:root {
    --cd-bg: #f3f6fb;
    --cd-surface: #ffffff;
    --cd-surface-soft: #f8fafc;
    --cd-border: #dbe3ef;
    --cd-border-soft: #edf2f7;
    --cd-text: #111827;
    --cd-muted: #667085;
    --cd-primary: #2563eb;
    --cd-primary-dark: #1d4ed8;
    --cd-sidebar: #111827;
    --cd-sidebar-soft: #1f2937;
    --cd-sidebar-link: #d1d5db;
    --cd-warning-bg: #fff7ed;
    --cd-warning-border: #fdba74;
    --cd-warning-text: #9a3412;
    --cd-danger: #b42318;
    --cd-success: #067647;
    --cd-radius: 12px;
    --cd-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

* {
    box-sizing: border-box;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    margin: 0;
    background: var(--cd-bg);
    color: var(--cd-text);
    font-size: 14px;
    line-height: 1.45;
}

a {
    color: var(--cd-primary);
    text-decoration: none;
}

a:hover {
    color: var(--cd-primary-dark);
    text-decoration: underline;
}

.cd-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
}

.cd-sidebar {
    background: linear-gradient(180deg, var(--cd-sidebar), var(--cd-sidebar-soft));
    color: #ffffff;
    padding: 20px 16px;
}

.cd-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 22px;
    font-weight: 700;
    font-size: 17px;
}

.cd-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--cd-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
}

.cd-nav a {
    display: block;
    color: var(--cd-sidebar-link);
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 4px;
}

.cd-nav a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    text-decoration: none;
}

.cd-content {
    min-width: 0;
    padding: 24px;
}

.cd-topbar {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius);
    padding: 14px 18px;
    margin-bottom: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    box-shadow: var(--cd-shadow);
}

.cd-topbar-actions {
    white-space: nowrap;
}

.muted {
    color: var(--cd-muted);
}

.card,
.stat,
.tenant-box {
    background: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius);
    box-shadow: var(--cd-shadow);
}

.card {
    padding: 20px 22px;
    margin-bottom: 18px;
}

.tenant-box {
    background: #eff6ff;
    padding: 14px 18px;
    margin-bottom: 18px;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.stat {
    padding: 14px 18px;
}

.stat .number {
    font-size: 28px;
    font-weight: 700;
    margin-top: 6px;
}

h1, h2, h3 {
    margin-top: 0;
    color: var(--cd-text);
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--cd-surface);
    border-radius: var(--cd-radius);
    overflow: hidden;
}

th, td {
    text-align: left;
    padding: 11px 12px;
    border-bottom: 1px solid var(--cd-border-soft);
    vertical-align: top;
}

th {
    background: var(--cd-surface-soft);
    color: #475467;
    font-size: 13px;
    font-weight: 700;
}

input,
select,
textarea {
    width: 100%;
    max-width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    padding: 9px 10px;
    background: #ffffff;
    color: var(--cd-text);
}

button,
.button,
input[type="submit"] {
    display: inline-block;
    width: auto;
    border: 1px solid var(--cd-primary);
    border-radius: 9px;
    background: var(--cd-primary);
    color: #ffffff;
    padding: 9px 14px;
    cursor: pointer;
    font-weight: 600;
}

button:hover,
.button:hover,
input[type="submit"]:hover {
    background: var(--cd-primary-dark);
    color: #ffffff;
    text-decoration: none;
}

.pill {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 12px;
    font-weight: 600;
}

.empty {
    color: var(--cd-muted);
}

.current-call-alert {
    display: none;
    background: var(--cd-warning-bg);
    border: 1px solid var(--cd-warning-border);
    border-left: 5px solid #f97316;
    border-radius: var(--cd-radius);
    padding: 14px 18px;
    margin-bottom: 18px;
    box-shadow: var(--cd-shadow);
}

.current-call-alert strong {
    color: var(--cd-warning-text);
}

.current-call-alert a {
    font-weight: 700;
    margin-left: 12px;
}

.cd-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: radial-gradient(circle at top left, #dbeafe, transparent 30%), var(--cd-bg);
}

.cd-login-card {
    width: 100%;
    max-width: 430px;
    background: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: 18px;
    padding: 28px;
    box-shadow: var(--cd-shadow);
}

.cd-login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 22px;
}

.cd-language-links {
    text-align: right;
    margin-bottom: 10px;
}

.cd-error {
    color: var(--cd-danger);
    background: #fef3f2;
    border: 1px solid #fecdca;
    border-radius: 10px;
    padding: 10px 12px;
}

@media (max-width: 900px) {
    .cd-layout {
        grid-template-columns: 1fr;
    }

    .cd-sidebar {
        position: static;
    }

    .cd-content {
        padding: 16px;
    }

    .cd-topbar,
    .grid {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: flex-start;
    }

    .grid {
        display: grid;
    }
}

/* Tabler integration helpers */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
select,
textarea {
    display: block;
    width: 100%;
}


.cd-logo-mark {
    width: 34px;
    height: 34px;
    display: inline-block;
    flex: 0 0 auto;
}

/* Tabler vertical shell refinements */
.navbar-vertical {
    width: 260px;
}

.navbar-vertical .navbar-brand {
    min-height: 64px;
    padding: 12px 14px;
    margin: 0;
    overflow: hidden;
}

.navbar-vertical .navbar-brand span {
    font-size: 16px;
    line-height: 1.15;
    white-space: nowrap;
}

.navbar-vertical .nav-link {
    color: rgba(255, 255, 255, 0.82);
    border-radius: 8px;
    margin: 2px 8px;
}

.navbar-vertical .nav-link:hover,
.navbar-vertical .nav-link:focus {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.navbar-vertical .nav-link.disabled {
    color: rgba(255, 255, 255, 0.35);
    background: transparent;
    pointer-events: none;
}

.page-wrapper > .navbar {
    min-height: 48px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.page-wrapper > .navbar .container-xl {
    align-items: center;
}

.page-wrapper > .navbar .nav-link {
    padding-top: 4px;
    padding-bottom: 4px;
}

.page-body {
    margin-top: 16px;
}

.page-body .container-xl {
    max-width: 1320px;
}

.card {
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.pill {
    background: #f1f5f9;
    color: #111827;
    border: 1px solid #e2e8f0;
    font-weight: 600;
}

/* Compact application header */
.cd-app-header {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

.cd-app-header-inner {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
}

.cd-user-line {
    font-size: 13px;
    color: #334155;
}

.cd-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-size: 13px;
}

.cd-header-actions a {
    color: #334155;
}

.cd-header-actions a:hover {
    color: #111827;
}

.cd-account-menu {
    position: relative;
    display: inline-block;
}

.cd-account-menu summary {
    list-style: none;
}

.cd-account-menu summary::-webkit-details-marker {
    display: none;
}

.cd-account-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--skytel-button, #00a9e0);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.16);
}

.cd-account-pill:hover,
.cd-account-menu[open] .cd-account-pill {
    background: var(--skytel-button-hover, #0098cc);
}

.cd-account-pill-title {
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cd-account-pill-caret {
    font-size: 11px;
    line-height: 1;
    opacity: 0.9;
}

.cd-account-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1050;
    width: 250px;
    padding: 12px;
    border: 1px solid #dbe3ef;
    border-radius: 12px;
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
}

.cd-account-dropdown-company {
    font-weight: 800;
    font-size: 14px;
    margin-bottom: 3px;
}

.cd-account-dropdown-user {
    font-weight: 600;
    font-size: 13px;
    color: #334155;
    margin-bottom: 8px;
}

.cd-account-dropdown-meta {
    font-size: 12px;
    color: #64748b;
    margin-top: 3px;
}

.cd-account-dropdown-divider {
    height: 1px;
    margin: 10px -12px 8px;
    background: #e2e8f0;
}

.cd-account-dropdown-link {
    display: block;
    padding: 4px 0;
    color: #334155;
    font-size: 13px;
    text-decoration: none;
}

.cd-account-dropdown-link:hover {
    color: #0f172a;
    text-decoration: underline;
}

/* More neutral operational background */
body,
.page {
    background: #f1f5f9;
}

/* In call timelines, customer names are context, not bright primary actions */
.card details summary a {
    color: #111827;
    font-weight: 600;
}

.card details summary a:hover {
    color: #111827;
    text-decoration: underline;
}

/* Compact dashboard cards / rows */
.cd-compact-card {
    padding: 16px 18px;
}

.cd-compact-card h2 {
    margin-bottom: 12px;
}

.cd-compact-row {
    border-bottom: 1px solid #e5e7eb;
    padding: 7px 0;
    line-height: 1.35;
}

.cd-compact-row:last-child {
    border-bottom: 0;
}

.cd-empty-state {
    margin: 8px 0 0;
    min-height: 0;
}

.cd-context-link {
    color: #111827;
    font-weight: 700;
}

.cd-context-link:hover {
    color: #111827;
    text-decoration: underline;
}

/* Dashboard/content polish */
.pill {
    border-radius: 6px;
    padding: 3px 7px;
}

/* Context links inside operational cards/tables should look like data, not primary actions */
.card table a,
.card details summary a,
.cd-context-link {
    color: #111827;
    font-weight: 700;
}

.card table a:hover,
.card details summary a:hover,
.cd-context-link:hover {
    color: #111827;
    text-decoration: underline;
}

/* Keep obvious action links blue */
.card > p a,
.card h2 small a,
.card .form-footer a {
    color: #2563eb;
    font-weight: 500;
}

/* Compact action forms inside tables */
.card table td form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.card table td form select {
    min-width: 150px;
    width: auto;
    height: 34px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.card table td form button {
    height: 34px;
    padding: 4px 10px;
    line-height: 1;
}

/* SkyTel action button refinement: darker brand blue with white text */
:root {
    --skytel-brand: #00bfff;
    --skytel-button: #00a9e0;
    --skytel-button-hover: #0098cc;
    --skytel-button-text: #ffffff;
}

.btn-primary,
button[type="submit"],
input[type="submit"] {
    background-color: var(--skytel-button);
    border-color: var(--skytel-button);
    color: var(--skytel-button-text);
    font-weight: 700;
    text-transform: none;
}

.btn-primary:hover,
.btn-primary:focus,
button[type="submit"]:hover,
button[type="submit"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
    background-color: var(--skytel-button-hover);
    border-color: var(--skytel-button-hover);
    color: var(--skytel-button-text);
}

/* Keep table action dropdown + button on one row */
.card table td form {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap;
}

.card table td form select {
    display: inline-block !important;
    width: 150px !important;
    min-width: 150px;
    max-width: 150px;
    height: 34px;
}

.card table td form button {
    display: inline-block !important;
    width: auto !important;
    min-width: auto;
    height: 34px;
    padding: 4px 10px;
    margin: 0;
}

/* Dashboard missed-call follow-up table column sizing */
.cd-followup-table .cd-count-col {
    width: 110px;
    white-space: nowrap;
    text-align: left;
}

.cd-followup-table th:nth-child(3),
.cd-followup-table td:nth-child(3) {
    width: 90px;
    white-space: nowrap;
}

.cd-followup-table th:nth-child(5),
.cd-followup-table td:nth-child(5) {
    width: 100px;
    white-space: nowrap;
}

.cd-followup-table th:nth-child(6),
.cd-followup-table td:nth-child(6) {
    width: 160px;
    white-space: nowrap;
}

.cd-followup-table th:nth-child(7),
.cd-followup-table td:nth-child(7) {
    width: 240px;
    white-space: nowrap;
}

/* Cleaner table headers */
table thead th,
.table thead th {
    background: #e9eef5;
    color: #172033;
    font-weight: 700;
    border-bottom: 1px solid #d7e0eb;
}

/* Context/customer links inside dashboard/list content */
.card td a,
.card details a,
.card .muted a {
    color: #111827;
    font-weight: 700;
}

.card td a:hover,
.card details a:hover,
.card .muted a:hover {
    color: #111827;
    text-decoration: underline;
}

/* But keep explicit action links blue */
.card h2 small a,
.card > p a,
a.action-link {
    color: #007fa8;
    font-weight: 500;
}

.card h2 small a:hover,
.card > p a:hover,
a.action-link:hover {
    color: #005f7d;
}

/* Small action links inside card headers */
.card h2 small a,
.cd-small-action-link {
    color: #007fa8;
    font-weight: 700;
    font-size: 13px;
    margin-left: 8px;
    text-decoration: none;
}

.card h2 small a:hover,
.cd-small-action-link:hover {
    color: #005f7d;
    text-decoration: underline;
}

/* Page headers and compact filters */
.cd-page-header-card {
    padding: 18px 22px;
}

.cd-page-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.cd-page-header-row h1 {
    margin-bottom: 6px;
}

.cd-page-header-row .muted {
    margin-bottom: 0;
}

.cd-page-header-actions {
    white-space: nowrap;
}

.cd-filter-card {
    padding: 18px 22px;
}

.cd-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 560px;
}

.cd-search-row input[type="text"],
.cd-search-row input[type="search"] {
    width: 280px;
}

.cd-search-row button {
    height: 38px;
    padding: 6px 14px;
}

.cd-search-help {
    margin: 7px 0 0;
}

@media (max-width: 700px) {
    .cd-page-header-row,
    .cd-search-row {
        align-items: stretch;
        flex-direction: column;
    }

    .cd-search-row input[type="text"],
    .cd-search-row input[type="search"] {
        width: 100%;
    }
}

/* Calls page filters/results */
.cd-call-filter-row {
    max-width: none;
}

.cd-call-filter-row input[type="text"] {
    width: 260px;
}

.cd-call-filter-row select {
    width: 180px;
}

.cd-results-summary {
    margin: 0 0 10px;
    font-size: 13px;
}

/* Wider working area for operational pages */
.page-body .container-xl,
.cd-app-header .container-xl {
    max-width: 1560px;
}

/* Compact horizontal dashboard statistic cards */
.stats {
    gap: 14px;
}

.stat {
    min-height: 64px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.stat > div:first-child {
    margin: 0;
    color: #334155;
    font-weight: 600;
}

.stat .number {
    margin: 0;
    font-size: 28px;
    line-height: 1;
    font-weight: 800;
    text-align: right;
}

/* Dashboard missed-call follow-up table: better operational column balance */
.cd-followup-table {
    width: 100%;
}

.cd-followup-table th,
.cd-followup-table td {
    vertical-align: middle;
}

.cd-followup-table th:nth-child(1),
.cd-followup-table td:nth-child(1) {
    width: 360px;
}

.cd-followup-table th:nth-child(2),
.cd-followup-table td:nth-child(2) {
    width: 240px;
}

.cd-followup-table th:nth-child(3),
.cd-followup-table td:nth-child(3),
.cd-followup-table th:nth-child(4),
.cd-followup-table td:nth-child(4),
.cd-followup-table th:nth-child(5),
.cd-followup-table td:nth-child(5) {
    width: 110px;
    text-align: center;
    white-space: nowrap;
}

.cd-followup-table th:nth-child(6),
.cd-followup-table td:nth-child(6) {
    width: 210px;
    white-space: nowrap;
}

.cd-followup-table th:nth-child(7),
.cd-followup-table td:nth-child(7) {
    width: 270px;
    white-space: nowrap;
}

.cd-followup-table td:nth-child(7) form {
    justify-content: flex-start;
}

/* One-line compact dashboard rows */
.cd-one-line-row {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cd-one-line-row a,
.cd-one-line-row strong,
.cd-one-line-row span {
    vertical-align: baseline;
}

/* Compact neutral status/priority badges in dashboard rows */
.cd-meta-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    margin-left: 6px;
    border-radius: 6px;
    background: #f1f5f9;
    border: 1px solid #dbe3ef;
    color: #111827;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* Tasks / Follow-ups page table balance */
.card table th:nth-child(4),
.card table td:nth-child(4) {
    width: 150px;
    white-space: nowrap;
    text-align: center;
}

.card table th:nth-child(5),
.card table td:nth-child(5) {
    width: 150px;
    white-space: nowrap;
}

.card table th:nth-child(6),
.card table td:nth-child(6) {
    width: 270px;
    white-space: nowrap;
}

.card table td:nth-child(6) form {
    justify-content: flex-start;
}

/* Better vertical alignment for task/follow-up operational rows */
.card table tbody td {
    vertical-align: middle;
}

.card table tbody td:first-child {
    vertical-align: middle;
}

.card table tbody td:first-child strong {
    display: block;
    margin-bottom: 3px;
}

.card table tbody td:first-child .muted {
    line-height: 1.3;
}

/* Inline new task form */
.cd-inline-form-card {
    padding: 18px 22px;
}

.cd-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 14px;
}

.cd-form-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cd-form-field-wide {
    grid-column: span 2;
}

.cd-form-field label {
    font-weight: 700;
    color: #334155;
    font-size: 13px;
}

.cd-form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

@media (max-width: 1000px) {
    .cd-form-grid {
        grid-template-columns: 1fr;
    }

    .cd-form-field-wide {
        grid-column: span 1;
    }
}

/* New task inline form: title/description left, metadata right */
.cd-task-form-layout {
    display: grid;
    grid-template-columns: minmax(420px, 1.5fr) minmax(320px, 1fr);
    gap: 18px;
}

.cd-task-form-main,
.cd-task-form-side {
    display: grid;
    gap: 14px;
    align-content: start;
}

.cd-task-form-main textarea {
    min-height: 140px;
}

@media (max-width: 1000px) {
    .cd-task-form-layout {
        grid-template-columns: 1fr;
    }
}

/* Force inline new task form into two columns */
.cd-inline-form-card .cd-task-form-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.9fr) !important;
    gap: 22px !important;
    align-items: start;
}

.cd-inline-form-card .cd-task-form-main,
.cd-inline-form-card .cd-task-form-side {
    display: grid !important;
    gap: 14px !important;
    align-content: start;
}

.cd-inline-form-card .cd-task-form-main input,
.cd-inline-form-card .cd-task-form-main textarea,
.cd-inline-form-card .cd-task-form-side input,
.cd-inline-form-card .cd-task-form-side select {
    width: 100% !important;
    box-sizing: border-box;
}

.cd-inline-form-card .cd-task-form-main textarea {
    min-height: 145px;
}

@media (max-width: 1000px) {
    .cd-inline-form-card .cd-task-form-layout {
        grid-template-columns: 1fr !important;
    }
}

/* New task form final compact two-column layout */
.cd-inline-form-card .cd-task-form-layout {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 22px !important;
    align-items: start;
}

.cd-inline-form-card .cd-task-form-main {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

.cd-inline-form-card .cd-task-form-side {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px 14px !important;
}

.cd-inline-form-card .cd-task-form-main textarea {
    min-height: 72px !important;
    max-height: 90px !important;
    resize: vertical;
}

.cd-inline-form-card .cd-form-actions {
    margin-top: 14px;
}

@media (max-width: 1000px) {
    .cd-inline-form-card .cd-task-form-layout,
    .cd-inline-form-card .cd-task-form-side {
        grid-template-columns: 1fr !important;
    }
}

/* Keep new task description compact */
.cd-inline-form-card .cd-task-form-main textarea {
    min-height: 58px !important;
    max-height: 72px !important;
}

/* Agents / Users page */
.cd-agent-create-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 22px;
    align-items: end;
}

.cd-agent-create-grid input {
    width: 100%;
    box-sizing: border-box;
}

.cd-agent-create-action {
    display: flex;
    align-items: end;
    min-height: 100%;
}

.cd-agent-create-action button {
    width: auto;
}

@media (max-width: 1000px) {
    .cd-agent-create-grid {
        grid-template-columns: 1fr;
    }

    .cd-agent-create-action {
        align-items: start;
    }
}

.cd-agent-users-table th:nth-child(1),
.cd-agent-users-table td:nth-child(1) {
    width: 28%;
}

.cd-agent-users-table th:nth-child(2),
.cd-agent-users-table td:nth-child(2) {
    width: 28%;
}

.cd-agent-users-table th:nth-child(3),
.cd-agent-users-table td:nth-child(3),
.cd-agent-users-table th:nth-child(4),
.cd-agent-users-table td:nth-child(4),
.cd-agent-users-table th:nth-child(5),
.cd-agent-users-table td:nth-child(5) {
    width: 11%;
    white-space: nowrap;
}

.cd-agent-users-table th:nth-child(6),
.cd-agent-users-table td:nth-child(6) {
    width: 11%;
    white-space: nowrap;
}

.cd-agent-name-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.cd-agent-users-table input {
    width: 100%;
    box-sizing: border-box;
}

.cd-agent-extension-field {
    max-width: 100px;
}

.cd-agent-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.cd-agent-row-actions form {
    display: inline-flex;
    margin: 0;
}

@media (max-width: 1100px) {
    .cd-agent-name-fields,
    .cd-agent-row-actions {
        grid-template-columns: 1fr;
        flex-wrap: wrap;
    }
}


/* Agents / Users table final alignment */
.cd-agent-users-table th,
.cd-agent-users-table td {
    vertical-align: middle;
}

.cd-agent-users-table th:nth-child(1),
.cd-agent-users-table td:nth-child(1) {
    width: 26%;
}

.cd-agent-users-table th:nth-child(2),
.cd-agent-users-table td:nth-child(2) {
    width: 30%;
}

.cd-agent-readonly-cell {
    min-height: 38px;
    display: flex;
    align-items: center;
}

/* Stronger Admin row alignment on Agents / Users table */
.cd-agent-users-table .cd-agent-admin-row td {
    height: 56px;
    vertical-align: middle !important;
}

.cd-agent-users-table .cd-agent-admin-row .cd-agent-readonly-cell {
    min-height: 40px;
    display: flex;
    align-items: center;
}

.cd-agent-users-table .cd-agent-admin-row td:nth-child(3),
.cd-agent-users-table .cd-agent-admin-row td:nth-child(4),
.cd-agent-users-table .cd-agent-admin-row td:nth-child(5),
.cd-agent-users-table .cd-agent-admin-row td:nth-child(6) {
    vertical-align: middle !important;
}

/* Read-only Admin values should align visually with editable Agent fields */
.cd-agent-readonly-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.cd-agent-readonly-field,
.cd-agent-readonly-fields span,
.cd-agent-readonly-small {
    min-height: 38px;
    padding: 9px 11px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.cd-agent-readonly-field a {
    font-weight: 700;
}

.cd-agent-readonly-small {
    max-width: 100px;
}


/* Agents / Users table proportion refinement */
.cd-agent-users-table th:nth-child(1),
.cd-agent-users-table td:nth-child(1) {
    width: 34%;
}

.cd-agent-users-table th:nth-child(2),
.cd-agent-users-table td:nth-child(2) {
    width: 24%;
}

.cd-agent-users-table th:nth-child(4),
.cd-agent-users-table td:nth-child(4) {
    text-align: center;
}

.cd-agent-users-table .cd-agent-extension-field,
.cd-agent-users-table .cd-agent-readonly-small {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Add Customer page dedicated two-column layout */
.cd-customer-add-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 22px;
}

.cd-customer-add-grid input,
.cd-customer-add-grid select,
.cd-customer-add-grid textarea {
    width: 100%;
    box-sizing: border-box;
}

.cd-customer-add-notes {
    grid-column: 1 / -1;
}

.cd-customer-add-notes textarea {
    min-height: 96px;
    resize: vertical;
}

@media (max-width: 1000px) {
    .cd-customer-add-grid {
        grid-template-columns: 1fr;
    }

    .cd-customer-add-notes {
        grid-column: auto;
    }
}

/* Customer detail top phone-number section */
.cd-customer-phone-list {
    display: grid;
    gap: 10px;
}

.cd-customer-phone-item {
    display: grid;
    gap: 8px;
}

.cd-customer-phone-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.cd-customer-phone-number {
    font-size: 15px;
    font-weight: 700;
}

.phone-list .cd-click-to-call {
    font-size: 14px;
    font-weight: 700;
}

.cd-inline-action-form {
    display: inline-flex;
    margin: 0;
}

.cd-phone-contact-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 8px;
    align-items: center;
    max-width: 520px;
}

.cd-phone-contact-form select {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 700px) {
    .cd-phone-contact-form {
        grid-template-columns: 1fr;
    }
}

/* Agents / Users card-based user management */
.cd-agent-card-list {
    display: grid;
    gap: 14px;
}

.cd-agent-user-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    background: #fff;
}

.cd-agent-user-card-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.cd-agent-user-name {
    font-weight: 800;
    color: #0f172a;
    font-size: 15px;
}

.cd-agent-user-email {
    margin-top: 4px;
}

.cd-agent-user-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.cd-agent-card-edit-form {
    margin: 0;
}

.cd-agent-card-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr 0.6fr;
    gap: 12px;
    align-items: end;
}

.cd-agent-card-edit-grid input {
    width: 100%;
    box-sizing: border-box;
}

.cd-agent-card-actions,
.cd-agent-card-secondary-action {
    display: inline-flex;
    margin: 12px 8px 0 0;
}

.cd-agent-admin-note {
    margin: 0;
}

@media (max-width: 1100px) {
    .cd-agent-user-card-header {
        flex-direction: column;
    }

    .cd-agent-user-meta {
        justify-content: flex-start;
    }

    .cd-agent-card-edit-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .cd-agent-card-edit-grid {
        grid-template-columns: 1fr;
    }
}

/* Agents / Users card compact action alignment */
.cd-agent-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.cd-agent-card-actions form,
.cd-agent-card-secondary-action {
    margin: 0;
}

.cd-agent-user-card {
    padding: 12px 14px;
}

.cd-agent-user-card-header {
    margin-bottom: 10px;
}

/* Agents / Users compact card layout */
.cd-agent-user-card-header-compact {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto minmax(260px, 1fr);
    align-items: center;
    gap: 16px;
}

.cd-agent-user-card-header-compact .cd-agent-user-meta {
    justify-content: center;
}

.cd-agent-user-card-header-compact .cd-agent-user-email {
    margin-top: 0;
    text-align: right;
}

.cd-agent-card-edit-grid-compact {
    grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(280px, 1.8fr);
}

.cd-agent-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.cd-agent-card-secondary-action {
    display: inline-flex;
    margin: 12px 0 0 0;
}

@media (max-width: 1100px) {
    .cd-agent-user-card-header-compact {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .cd-agent-user-card-header-compact .cd-agent-user-meta {
        justify-content: flex-start;
    }

    .cd-agent-user-card-header-compact .cd-agent-user-email {
        text-align: left;
    }

    .cd-agent-card-edit-grid-compact {
        grid-template-columns: 1fr;
    }
}

/* Agents / Users final compact horizontal layout */
.cd-agent-user-card-header-compact {
    grid-template-columns: minmax(120px, 0.6fr) minmax(240px, 1.2fr) auto;
}

.cd-agent-user-card-header-compact .cd-agent-user-email {
    text-align: left;
}

.cd-agent-user-card-header-compact .cd-agent-user-meta {
    justify-content: flex-end;
}

.cd-agent-card-edit-form {
    display: contents;
}

.cd-agent-card-edit-grid-compact {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(280px, 1.6fr);
    gap: 12px;
    align-items: end;
    max-width: calc(100% - 190px);
}

.cd-agent-card-actions {
    display: flex;
    justify-content: flex-end;
    align-items: end;
    gap: 8px;
    margin-top: -40px;
}

.cd-agent-card-actions form,
.cd-agent-card-secondary-action {
    margin: 0;
}

.cd-agent-create-action {
    justify-content: flex-end;
}

@media (max-width: 1100px) {
    .cd-agent-card-edit-grid-compact {
        max-width: 100%;
        grid-template-columns: 1fr;
    }

    .cd-agent-card-actions {
        justify-content: flex-start;
        margin-top: 12px;
    }
}


/* Agents / Users final spacing between email field and action buttons */
.cd-agent-card-edit-grid-compact {
    max-width: calc(100% - 260px);
}

.cd-agent-card-actions {
    gap: 10px;
}

/* Agent Detail reset password card */
.cd-agent-reset-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto;
    gap: 14px;
    align-items: end;
}

.cd-agent-reset-form input {
    width: 100%;
    box-sizing: border-box;
}

.cd-agent-reset-action {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 900px) {
    .cd-agent-reset-form {
        grid-template-columns: 1fr;
    }

    .cd-agent-reset-action {
        justify-content: flex-start;
    }
}

/* Floating incoming call popup */
.current-call-alert {
    display: none;
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1050;
    width: min(360px, calc(100vw - 32px));
    background: #ffffff;
    border: 1px solid #fed7aa;
    border-left: 5px solid #f97316;
    border-radius: 14px;
    padding: 14px 14px 12px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
}

.current-call-dismiss {
    position: absolute;
    top: 8px;
    right: 10px;
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 22px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.current-call-title {
    font-size: 13px;
    font-weight: 800;
    color: #9a3412;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 26px;
}

.current-call-caller {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    margin-top: 6px;
    word-break: break-word;
}

.current-call-customer {
    font-size: 14px;
    font-weight: 700;
    color: #334155;
    margin-top: 4px;
}

.current-call-called {
    font-size: 13px;
    color: #64748b;
    margin-top: 3px;
}

.current-call-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

@media (max-width: 700px) {
    .current-call-alert {
        right: 16px;
        left: 16px;
        bottom: 16px;
        width: auto;
    }
}


/* Move floating incoming-call popup to bottom-left, over unused menu area */
.current-call-alert {
    left: 22px;
    right: auto;
    bottom: 22px;
}

@media (max-width: 700px) {
    .current-call-alert {
        left: 16px;
        right: 16px;
        bottom: 16px;
        width: auto;
    }
}

.cd-click-to-call {
    color: #00a9e0;
    font-size: 1.08rem;
    font-weight: 700;
    text-decoration: none;
}

.cd-click-to-call:hover {
    color: #0098cc;
    text-decoration: underline;
}

.card table a.cd-click-to-call,
.card td a.cd-click-to-call,
a.cd-click-to-call {
    color: #00a9e0;
}

.card table a.cd-click-to-call:hover,
.card td a.cd-click-to-call:hover,
a.cd-click-to-call:hover {
    color: #0098cc;
    text-decoration: underline;
}

/* Compact click-to-call links inside call rows */
.card details summary a.cd-click-to-call,
.card details summary a.cd-click-to-call-compact,
details summary a.cd-click-to-call,
details summary a.cd-click-to-call-compact {
    color: #00a9e0 !important;
    font-size: inherit;
    line-height: inherit;
    font-weight: 700;
    text-decoration: none;
}

.card details summary a.cd-click-to-call:hover,
.card details summary a.cd-click-to-call-compact:hover,
details summary a.cd-click-to-call:hover,
details summary a.cd-click-to-call-compact:hover {
    color: #0098cc !important;
    text-decoration: underline;
}

.cd-page-back-link {
    margin: 0 0 10px 0;
}

.cd-page-back-link a {
    color: #00a9e0;
    font-weight: 600;
    text-decoration: none;
}

.cd-page-back-link a:hover {
    color: #0098cc;
    text-decoration: underline;
}

.cd-customer-summary-card {
    margin-bottom: 14px;
}

.cd-customer-summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
    margin-top: 14px;
}

.cd-phone-numbers-card {
    margin-bottom: 14px;
}

.cd-phone-numbers-card h2 {
    margin-bottom: 12px;
}

.cd-customer-phone-list-separated {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cd-customer-phone-row {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(520px, 1.6fr);
    gap: 14px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid #e6edf5;
    border-radius: 8px;
    background: #fbfdff;
}

.cd-customer-phone-row-main {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.cd-customer-phone-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

.cd-phone-contact-form-compact {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0;
}

.cd-phone-contact-form-compact select {
    min-width: 260px;
    max-width: 360px;
    height: 34px;
}

.cd-compact-action-button {
    padding: 7px 12px;
    font-size: 0.88rem;
    line-height: 1.1;
    min-height: 34px;
}

@media (max-width: 1100px) {
    .cd-customer-phone-row {
        grid-template-columns: 1fr;
    }

    .cd-customer-phone-row-actions {
        justify-content: flex-start;
    }
}

/* Keep customer-detail phone row action buttons compact and single-line */
.cd-customer-phone-row-actions {
    flex-wrap: nowrap;
}

.cd-customer-phone-row-actions .cd-inline-action-form,
.cd-customer-phone-row-actions .cd-phone-contact-form-compact {
    flex-shrink: 0;
}

.cd-customer-phone-row-actions .cd-compact-action-button {
    white-space: nowrap;
    min-width: 112px;
    text-align: center;
}

.cd-phone-contact-form-compact select {
    width: 300px;
}

@media (max-width: 1100px) {
    .cd-customer-phone-row-actions {
        flex-wrap: wrap;
    }

    .cd-phone-contact-form-compact select {
        width: 100%;
        max-width: none;
    }
}

.cd-card-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.cd-card-header-row h2 {
    margin: 0;
}

.cd-card-header-row a {
    color: #00a9e0;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.cd-card-header-row a:hover {
    color: #0098cc;
    text-decoration: underline;
}

/* Final phone-link sizing polish for customer work pages */
.cd-phone-numbers-card .cd-customer-phone-number.cd-click-to-call {
    font-size: 15px;
    line-height: 1.25;
}

.phone-list .cd-click-to-call {
    font-size: 14px;
    line-height: 1.25;
}

.card table td:has(.phone-list),
.card table td:has(.phone-list) ~ td {
    vertical-align: middle;
}

.card table tr:has(.phone-list) td {
    vertical-align: middle;
}

/* Customers list table alignment */
.cd-customers-table td {
    vertical-align: middle;
}

.cd-customers-table .phone-list {
    margin-top: 0;
    margin-bottom: 0;
}

/* Company Admin sidebar: subtle divider between company-wide and personal views */
.cd-sidebar-divider {
    height: 1px;
    margin: 14px 0 10px;
    background: rgba(255, 255, 255, 0.30);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

/* Dashboard: Company Admin / tenant main working row */
.cd-dashboard-main-row {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
    gap: 20px;
    align-items: stretch;
}

.cd-dashboard-main-left,
.cd-dashboard-main-right {
    min-width: 0;
}

.cd-dashboard-main-right {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
}

.cd-dashboard-main-row .card {
    margin-top: 0;
    height: 100%;
}

@media (max-width: 1100px) {
    .cd-dashboard-main-row {
        grid-template-columns: 1fr;
    }
}

/* Sidebar active/current page highlight */
.navbar-vertical .nav-link.active {
    background: rgba(0, 180, 216, 0.22);
    border-left: 4px solid #00b4d8;
    color: #ffffff;
    font-weight: 700;
}

.navbar-vertical .nav-link.active .nav-link-title {
    color: #ffffff;
}

/* Sidebar active/current page highlight - neutral gray override */
.navbar-vertical .nav-link.active {
    background: #374151;
    border-left: 4px solid #9ca3af;
    color: #ffffff;
    font-weight: 700;
}

.navbar-vertical .nav-link.active .nav-link-title {
    color: #ffffff;
}

/* Sidebar active/current page highlight - restore SkyTel blue left accent */
.navbar-vertical .nav-link.active {
    border-left: 4px solid #00b4d8;
}


/* Account dropdown tenant inbound numbers */
.cd-account-dropdown-numbers {
    margin: 5px 0 8px;
}

.cd-account-dropdown-number-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    line-height: 1.35;
    color: #334155;
}

.cd-account-dropdown-number-label {
    color: #64748b;
}

.cd-account-dropdown-number-row strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}


/* Account dropdown tenant inbound numbers - number first */
.cd-account-dropdown-number-row {
    justify-content: flex-start;
    gap: 4px;
}

.cd-account-dropdown-number-row strong {
    min-width: 118px;
    text-align: left;
}

.cd-account-dropdown-number-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Read-only preview popovers */
.cd-preview-trigger {
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.cd-preview-popover {
    position: absolute;
    z-index: 1050;
    width: min(320px, calc(100vw - 24px));
    filter: drop-shadow(0 14px 24px rgba(15, 23, 42, 0.18));
}

.cd-preview-card {
    background: #fff;
    border: 1px solid rgba(98, 105, 118, 0.18);
    border-radius: 12px;
    padding: 14px;
    color: #1f2937;
}

.cd-preview-card-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.cd-preview-card h2 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.25;
}

.cd-preview-card p {
    margin-bottom: 0;
}

.cd-preview-eyebrow {
    color: #667085;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin: 0 0 4px;
    text-transform: uppercase;
}

.cd-preview-meta {
    display: grid;
    gap: 8px;
    margin: 0 0 12px;
}

.cd-preview-meta div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 10px;
}

.cd-preview-meta dt {
    color: #667085;
    font-weight: 600;
}

.cd-preview-meta dd {
    margin: 0;
    min-width: 0;
    word-break: break-word;
}

.cd-preview-open-link {
    font-weight: 600;
}

.cd-preview-loading {
    color: #667085;
}

/* Approved SkyTel CRM sidebar navigation direction */
.navbar-vertical {
    background: linear-gradient(180deg, #081a33 0%, #0f2747 100%) !important;
    box-shadow: 10px 0 30px rgba(15, 23, 42, 0.16);
}

.navbar-vertical > .container-fluid {
    min-height: 100vh;
    align-items: stretch;
}

.navbar-vertical .navbar-brand {
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.navbar-vertical .navbar-collapse {
    min-height: calc(100vh - 64px);
    display: flex !important;
    flex-direction: column;
}

.navbar-vertical .navbar-nav {
    width: 100%;
}

.navbar-vertical .nav-link,
.cd-sidebar-collapse {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 42px;
    padding: 9px 12px;
    color: rgba(226, 232, 240, 0.86);
    border-left: 4px solid transparent;
    border-radius: 0 10px 10px 0;
    margin: 2px 10px 2px 0;
    font-weight: 600;
}

.navbar-vertical .nav-link:hover,
.navbar-vertical .nav-link:focus {
    background: rgba(37, 99, 235, 0.16);
    color: #ffffff;
    text-decoration: none;
}

.cd-nav-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
}

.cd-nav-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cd-sidebar-section {
    margin: 18px 14px 7px;
    color: rgba(148, 163, 184, 0.92);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cd-sidebar-divider {
    height: 1px;
    margin: 16px 14px 8px;
    background: rgba(148, 163, 184, 0.28);
    box-shadow: none;
}

.cd-sidebar-footer {
    margin-top: auto;
    padding: 14px 0 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.cd-sidebar-collapse {
    color: rgba(226, 232, 240, 0.62);
    cursor: default;
}

.navbar-vertical .nav-link.active {
    background: rgba(37, 99, 235, 0.26);
    border-left-color: #38bdf8;
    color: #ffffff;
    font-weight: 700;
}
/* Post-deployment tweak: make active sidebar item clearly visible */
.navbar-vertical .nav-link.active {
    background: linear-gradient(90deg, #0ea5e9 0%, #0284c7 100%);
    border-left-color: #7dd3fc;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(14, 165, 233, 0.22);
}

.navbar-vertical .nav-link.active .cd-nav-icon {
    color: #ffffff;
    opacity: 1;
}

/* Customers / Contacts list: keep the single phone number same size as row text */
.cd-customers-table td a.cd-click-to-call {
    font-size: inherit;
    font-weight: 700;
    color: #00a9e0;
}

/* Contacts page upper overview */
.cd-contacts-page-header-card {
    padding-top: 1.05rem;
    padding-bottom: 1.05rem;
}

.cd-contacts-page-title {
    color: #0f172a;
    margin-bottom: 0;
}

.cd-contacts-overview-card {
    padding: 1rem 1.15rem;
}

.cd-contacts-overview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}

.cd-contacts-overview-title {
    font-size: .85rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: .15rem;
}

.cd-contacts-overview-total {
    display: flex;
    align-items: baseline;
    gap: .45rem;
}

.cd-contacts-overview-number {
    font-size: 1.55rem;
    line-height: 1;
    font-weight: 650;
    color: #0f172a;
}

.cd-lead-status-bar {
    display: flex;
    width: 100%;
    height: .6rem;
    overflow: hidden;
    border-radius: 999px;
    background: #edf2f7;
}

.cd-lead-status-segment {
    display: block;
    min-width: 2px;
    height: 100%;
    background: #94a3b8;
}

.cd-lead-status-empty {
    display: block;
    width: 100%;
    height: 100%;
    background: #edf2f7;
}

.cd-lead-status-mini-row {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    margin-top: .55rem;
    font-size: .72rem;
    color: #64748b;
}

.cd-lead-status-mini-item {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    white-space: nowrap;
}

.cd-lead-status-mini-item strong {
    font-weight: 650;
    color: #334155;
}

.cd-lead-status-dot {
    width: .42rem;
    height: .42rem;
    border-radius: 999px;
    display: inline-block;
    background: #94a3b8;
}

/* Known lead-status colors. New future statuses fall back to neutral gray. */
.cd-lead-status-new { background: #bae6fd; }
.cd-lead-status-contacted { background: #0284c7; }
.cd-lead-status-interested { background: #86efac; }
.cd-lead-status-not-interested { background: #cbd5e1; }
.cd-lead-status-customer { background: #16a34a; }
.cd-lead-status-closed { background: #374151; }

/* Global lead-status badges */
.cd-lead-status-pill {
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #334155;
    font-weight: 650;
}

.cd-lead-status-pill-new {
    background: #e0f2fe;
    border-color: #bae6fd;
    color: #075985;
}

.cd-lead-status-pill-contacted {
    background: #0284c7;
    border-color: #0284c7;
    color: #ffffff;
}

.cd-lead-status-pill-interested {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

.cd-lead-status-pill-customer {
    background: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
}

.cd-lead-status-pill-not_interested {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #475569;
}

.cd-lead-status-pill-closed {
    background: #374151;
    border-color: #374151;
    color: #ffffff;
}

/* Customer detail profile layout */
.cd-customer-detail-hero {
    margin-bottom: 16px;
    border: 1px solid #d7edf8;
    background: linear-gradient(135deg, #ffffff 0%, #f5fbff 100%);
}

.cd-customer-detail-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
}

.cd-customer-detail-eyebrow {
    margin: 0 0 6px;
    color: #0284c7;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cd-customer-detail-hero h1 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.65rem, 2.4vw, 2.25rem);
    line-height: 1.1;
}

.cd-customer-detail-subtitle {
    margin: 8px 0 0;
    color: #475569;
    font-size: 1.02rem;
    font-weight: 650;
}

.cd-customer-detail-hero-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.cd-customer-detail-meta-item {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid #e2edf5;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
}

.cd-customer-detail-meta-value {
    font-weight: 800;
}

.cd-customer-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.85fr);
    gap: 16px;
    align-items: start;
    margin-bottom: 16px;
}

.cd-customer-detail-main,
.cd-customer-detail-sidebar {
    display: grid;
    gap: 16px;
}

.cd-current-call-card {
    border-color: #b7d7ff;
    background: #f0f7ff;
}

.cd-info-list {
    display: grid;
    gap: 12px;
}

.cd-info-list > div {
    display: grid;
    gap: 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef2f7;
}

.cd-info-list > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.cd-card-details {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #eef2f7;
}

.cd-card-details summary {
    color: #0284c7;
    cursor: pointer;
    font-weight: 750;
}

.cd-stacked-form {
    display: grid;
    gap: 9px;
    margin-top: 12px;
}

.cd-stacked-form input,
.cd-stacked-form select,
.cd-stacked-form textarea {
    width: 100%;
    box-sizing: border-box;
}

.cd-stacked-form label {
    color: #475569;
    font-size: 0.9rem;
    font-weight: 700;
}

.cd-contact-card-list {
    display: grid;
    gap: 10px;
}

.cd-contact-info-card {
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fbfdff;
}

.cd-contact-info-card-inactive {
    opacity: 0.72;
    background: #f8fafc;
}

.cd-contact-info-card-header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.cd-contact-phone-list {
    display: grid;
    gap: 4px;
    margin-top: 3px;
    color: #334155;
    font-size: 0.92rem;
}

.cd-contact-note {
    margin: 4px 0 0;
    font-size: 0.88rem;
}

.cd-history-card {
    max-height: 300px;
    overflow: hidden;
}

.cd-history-item {
    padding: 10px 0;
    border-bottom: 1px solid #eef2f7;
}

.cd-history-item:last-child {
    border-bottom: 0;
}

@media (max-width: 1180px) {
    .cd-customer-detail-layout {
        grid-template-columns: 1fr;
    }

    .cd-customer-detail-hero-meta {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }
}

@media (max-width: 700px) {
    .cd-customer-detail-hero-top {
        flex-direction: column;
    }

    .cd-customer-detail-hero-meta {
        grid-template-columns: 1fr;
    }
}

/* Customer detail hero polished mockup direction */
.cd-customer-detail-hero-polished {
    margin-bottom: 16px;
    padding: 18px 22px;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: none;
}

.cd-customer-detail-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: center;
}

.cd-customer-detail-avatar {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: linear-gradient(135deg, #fee2c5 0%, #fff1e5 100%);
    color: #c2410c;
    box-shadow: inset 0 0 0 1px rgba(194, 65, 12, 0.10);
}

.cd-customer-detail-avatar-icon {
    font-size: 38px;
    font-weight: 900;
    line-height: 1;
}

.cd-customer-detail-avatar-initials {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0.03em;
}

.cd-customer-detail-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
}

.cd-customer-detail-title-row .cd-lead-status-pill {
    margin-top: 4px;
    white-space: nowrap;
}

.cd-customer-detail-hero-polished .cd-customer-detail-eyebrow {
    margin: 0 0 5px;
    color: #0284c7;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.cd-customer-detail-hero-polished h1 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.25rem, 1.8vw, 1.65rem);
    font-weight: 850;
    line-height: 1.05;
}

.cd-customer-detail-hero-polished .cd-customer-detail-subtitle {
    margin: 8px 0 0;
    color: #475569;
    font-size: 1.05rem;
    font-weight: 650;
}

.cd-customer-detail-hero-meta-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 14px;
}

.cd-customer-detail-meta-inline-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    padding: 0 22px;
    border-right: 1px solid #dbe4ef;
    color: #0f172a;
}

.cd-customer-detail-meta-inline-item:first-child {
    padding-left: 0;
}

.cd-customer-detail-meta-inline-item:last-child {
    border-right: 0;
    padding-right: 0;
}

.cd-customer-detail-meta-inline-item .muted {
    font-size: 0.86rem;
    font-weight: 650;
}

.cd-customer-detail-meta-inline-item strong,
.cd-customer-detail-meta-inline-item a {
    font-size: 0.98rem;
}

.cd-customer-detail-meta-icon {
    color: #64748b;
    font-size: 1rem;
}

@media (max-width: 900px) {
    .cd-customer-detail-hero-inner {
        grid-template-columns: 1fr;
    }

    .cd-customer-detail-title-row {
        flex-direction: column;
    }

    .cd-customer-detail-meta-inline-item {
        width: 100%;
        padding: 8px 0;
        border-right: 0;
        border-bottom: 1px solid #e5edf5;
    }

    .cd-customer-detail-meta-inline-item:last-child {
        border-bottom: 0;
    }
}

/* Customer detail hero metadata alignment */
.cd-customer-detail-hero-polished .cd-customer-detail-meta-inline-item {
    color: #475569;
    font-size: 0.96rem;
    font-weight: 700;
}

.cd-customer-detail-hero-polished .cd-customer-detail-meta-inline-item .muted {
    color: #475569;
    font-size: 0.96rem;
    font-weight: 700;
}

.cd-customer-detail-hero-polished .cd-customer-detail-meta-inline-item strong,
.cd-customer-detail-hero-polished .cd-customer-detail-meta-inline-item a {
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.25;
}

.cd-customer-detail-hero-polished .cd-customer-detail-meta-inline-item a.cd-click-to-call {
    color: #00a9e0;
    text-decoration: none;
}

.cd-customer-detail-hero-polished .cd-customer-detail-meta-inline-item a.cd-click-to-call:hover {
    color: #0098cc;
    text-decoration: underline;
}

.cd-customer-detail-status-inline-item {
    gap: 8px;
}

.cd-customer-detail-status-inline-item .cd-lead-status-pill {
    margin-left: 0;
}

/* Customer detail hero outline icons */
.cd-hero-svg-icon,
.cd-hero-meta-svg-icon {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cd-hero-svg-icon {
    width: 42px;
    height: 42px;
}

.cd-hero-meta-svg-icon {
    width: 17px;
    height: 17px;
}

.cd-customer-detail-meta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
}

/* Customer detail hero final value color polish */
.cd-customer-detail-hero-polished .cd-customer-detail-meta-inline-item strong {
    color: #0f172a;
}

.cd-customer-detail-hero-polished .cd-customer-detail-meta-inline-item a.cd-click-to-call {
    color: #00a9e0;
}

/* Customer detail hero label/value separation polish */
.cd-customer-detail-hero-polished .cd-customer-detail-meta-inline-item:nth-child(n+3) > .muted {
    color: #64748b;
    font-weight: 600;
}

.cd-customer-detail-hero-polished .cd-customer-detail-meta-inline-item:nth-child(n+3) > .muted::after {
    content: ":";
}

.cd-customer-detail-hero-polished .cd-customer-detail-meta-inline-item:nth-child(n+3) strong {
    color: #0f172a;
    font-weight: 800;
}

/* Customer detail company/contact information compact rows */
.cd-customer-info-card .cd-info-list {
    gap: 0;
}

.cd-customer-info-card .cd-info-list > div {
    display: grid;
    grid-template-columns: minmax(120px, 0.85fr) minmax(0, 1.15fr);
    gap: 16px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid #eef2f7;
}

.cd-customer-info-card .cd-info-list > div:first-child {
    padding-top: 0;
}

.cd-customer-info-card .cd-info-list > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.cd-customer-info-card .cd-info-list > div > .muted {
    color: #475569;
    font-weight: 600;
}

.cd-customer-info-card .cd-info-list > div > strong,
.cd-customer-info-card .cd-info-list > div > span:not(.muted) {
    justify-self: end;
    color: #0f172a;
    font-weight: 800;
    text-align: right;
}

.cd-customer-info-card .cd-info-list .cd-lead-status-pill {
    display: inline-flex;
    justify-self: end;
    width: auto;
    max-width: 100%;
    white-space: nowrap;
}

/* Customer detail company contacts clickable phones */
.cd-contact-phone-link {
    color: #00a9e0;
    font-weight: inherit;
    text-decoration: none;
}

.cd-contact-phone-link:hover {
    color: #0098cc;
    text-decoration: underline;
}

/* Customer detail company contact icon alignment */
.cd-contact-info-line,
.cd-contact-phone-list span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cd-contact-line-icon {
    flex: 0 0 auto;
    color: #64748b;
}

/* Customer detail responsible agent compact card */
.cd-responsible-agent-card {
    padding-bottom: 16px;
}

.cd-responsible-agent-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.cd-responsible-agent-summary strong {
    color: #0f172a;
    font-weight: 800;
}

.cd-responsible-agent-summary .muted {
    color: #475569;
    font-weight: 600;
    white-space: nowrap;
}

.cd-responsible-agent-card .cd-card-details {
    margin-top: 8px;
}

/* Customer detail unified activity feed */
.cd-customer-activity-card {
    min-height: 620px;
}

.cd-activity-header-row {
    align-items: flex-start;
}

.cd-activity-header-row p {
    margin: 5px 0 0;
}

.cd-activity-feed {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.cd-activity-item {
    position: relative;
    border: 1px solid #e6edf5;
    border-radius: 12px;
    background: #ffffff;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.cd-activity-item:hover {
    border-color: #bae6fd;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
    transform: translateY(-1px);
}

.cd-activity-item[open] {
    border-color: #93c5fd;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
}

.cd-activity-summary {
    display: grid;
    grid-template-columns: 12px 128px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 13px 14px;
    cursor: pointer;
    list-style: none;
}

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

.cd-activity-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #94a3b8;
}

.cd-activity-item-call .cd-activity-dot {
    background: #0284c7;
}

.cd-activity-item-missed_call .cd-activity-dot,
.cd-activity-item-missed_call_work .cd-activity-dot {
    background: #f97316;
}

.cd-activity-item-note .cd-activity-dot {
    background: #64748b;
}

.cd-activity-item-task .cd-activity-dot {
    background: #16a34a;
}

.cd-activity-time {
    color: #64748b;
    font-size: 0.86rem;
    font-weight: 650;
    white-space: nowrap;
}

.cd-activity-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}

.cd-activity-title {
    color: #0f172a;
    font-weight: 850;
    white-space: nowrap;
}

.cd-activity-route {
    color: #475569;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cd-activity-badges {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
    white-space: nowrap;
}

.cd-activity-details {
    padding: 0 14px 14px 38px;
    color: #0f172a;
}

.cd-activity-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 18px;
    margin-top: 2px;
}

.cd-activity-detail-grid > div {
    display: grid;
    gap: 2px;
}

.cd-activity-detail-grid .muted {
    font-size: 0.82rem;
    font-weight: 650;
}

.cd-activity-detail-grid strong {
    color: #0f172a;
    font-weight: 800;
}

.cd-activity-note-stack {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.cd-activity-note-box {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid #e6edf5;
    border-radius: 10px;
    background: #f8fafc;
}

.cd-activity-inline-form {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.cd-activity-inline-form textarea {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
}

.cd-activity-inline-form button {
    justify-self: start;
}

@media (max-width: 1100px) {
    .cd-activity-summary {
        grid-template-columns: 12px 1fr;
    }

    .cd-activity-time,
    .cd-activity-badges {
        grid-column: 2;
    }

    .cd-activity-main {
        grid-column: 2;
    }

    .cd-activity-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* Customer detail conversation timeline under activity */
.cd-customer-conversation-card {
    margin-top: 16px;
}

.cd-conversation-compact-list {
    display: grid;
    gap: 9px;
    margin-top: 14px;
}

.cd-conversation-compact-item {
    border: 1px solid #e6edf5;
    border-radius: 12px;
    background: #ffffff;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.cd-conversation-compact-item:hover {
    border-color: #bae6fd;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.cd-conversation-compact-item[open] {
    border-color: #93c5fd;
}

.cd-conversation-compact-item summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
}

.cd-conversation-compact-item summary::-webkit-details-marker {
    display: none;
}

.cd-conversation-time {
    color: #64748b;
    font-size: 0.86rem;
    font-weight: 650;
    white-space: nowrap;
}

.cd-conversation-title {
    min-width: 0;
    color: #475569;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cd-conversation-compact-details {
    padding: 0 14px 14px 14px;
}

/* Customer detail activity icon, hover, and open-state polish */
.cd-customer-activity-card {
    min-height: auto;
}

.cd-activity-feed {
    max-height: 720px;
    overflow-y: auto;
    padding-right: 6px;
}

.cd-activity-summary {
    grid-template-columns: 34px 126px minmax(0, 1fr) auto;
    min-height: 58px;
    padding: 12px 14px;
}

.cd-activity-type-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #64748b;
}

.cd-activity-svg-icon {
    width: 17px;
    height: 17px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cd-activity-main {
    display: grid;
    gap: 2px;
}

.cd-activity-topline {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cd-activity-hover-preview {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    color: #64748b;
    font-size: 0.86rem;
    line-height: 1.35;
    transition: max-height 0.16s ease, opacity 0.16s ease;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cd-activity-item:hover .cd-activity-hover-preview,
.cd-activity-item[open] .cd-activity-hover-preview {
    max-height: 26px;
    opacity: 1;
}

.cd-activity-item:hover .cd-activity-summary {
    min-height: 72px;
}

.cd-activity-item[open] .cd-activity-summary {
    min-height: 72px;
}

.cd-activity-item-call,
.cd-activity-call-incoming {
    border-left: 4px solid #0ea5e9;
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.07), #ffffff 34%);
}

.cd-activity-call-outgoing {
    border-left: 4px solid #06b6d4;
    background: linear-gradient(90deg, rgba(6, 182, 212, 0.07), #ffffff 34%);
}

.cd-activity-item-missed_call,
.cd-activity-call-status-missed,
.cd-activity-item-missed_call_work {
    border-left: 4px solid #f97316;
    background: linear-gradient(90deg, rgba(249, 115, 22, 0.08), #ffffff 34%);
}

.cd-activity-item-note {
    border-left: 4px solid #64748b;
    background: linear-gradient(90deg, rgba(100, 116, 139, 0.07), #ffffff 34%);
}

.cd-activity-item-task {
    border-left: 4px solid #16a34a;
    background: linear-gradient(90deg, rgba(22, 163, 74, 0.07), #ffffff 34%);
}

.cd-activity-call-incoming .cd-activity-type-icon,
.cd-activity-item-call .cd-activity-type-icon {
    background: #e0f2fe;
    color: #0284c7;
}

.cd-activity-call-outgoing .cd-activity-type-icon {
    background: #cffafe;
    color: #0891b2;
}

.cd-activity-item-missed_call .cd-activity-type-icon,
.cd-activity-call-status-missed .cd-activity-type-icon,
.cd-activity-item-missed_call_work .cd-activity-type-icon {
    background: #ffedd5;
    color: #ea580c;
}

.cd-activity-item-note .cd-activity-type-icon {
    background: #f1f5f9;
    color: #475569;
}

.cd-activity-item-task .cd-activity-type-icon {
    background: #dcfce7;
    color: #15803d;
}

.cd-activity-item:hover {
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
}

.cd-activity-item[open] {
    border-top-color: #93c5fd;
    border-right-color: #93c5fd;
    border-bottom-color: #93c5fd;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}

.cd-activity-item[open] .cd-activity-details {
    border-top: 1px solid rgba(148, 163, 184, 0.28);
    margin-top: 0;
    padding-top: 14px;
}

/* Customer detail activity row color correction */
.cd-activity-item-call,
.cd-activity-call-incoming,
.cd-activity-call-outgoing {
    border-left-color: #22c55e;
    background: #f0fdf4;
}

.cd-activity-item-missed_call,
.cd-activity-call-status-missed,
.cd-activity-item-missed_call_work {
    border-left-color: #ef4444;
    background: #fef2f2;
}

.cd-activity-item-note {
    border-left-color: #eab308;
    background: #fefce8;
}

.cd-activity-item-task {
    border-left-color: #3b82f6;
    background: #eff6ff;
}

/* Keep hover border and icon colors inside the same visual family */
.cd-activity-item-call:hover,
.cd-activity-call-incoming:hover,
.cd-activity-call-outgoing:hover,
.cd-activity-item-call[open],
.cd-activity-call-incoming[open],
.cd-activity-call-outgoing[open] {
    border-top-color: #86efac;
    border-right-color: #86efac;
    border-bottom-color: #86efac;
    background: #ecfdf5;
}

.cd-activity-item-missed_call:hover,
.cd-activity-call-status-missed:hover,
.cd-activity-item-missed_call_work:hover,
.cd-activity-item-missed_call[open],
.cd-activity-call-status-missed[open],
.cd-activity-item-missed_call_work[open] {
    border-top-color: #fca5a5;
    border-right-color: #fca5a5;
    border-bottom-color: #fca5a5;
    background: #fff1f2;
}

.cd-activity-item-note:hover,
.cd-activity-item-note[open] {
    border-top-color: #fde68a;
    border-right-color: #fde68a;
    border-bottom-color: #fde68a;
    background: #fffbea;
}

.cd-activity-item-task:hover,
.cd-activity-item-task[open] {
    border-top-color: #bfdbfe;
    border-right-color: #bfdbfe;
    border-bottom-color: #bfdbfe;
    background: #eff6ff;
}

.cd-activity-item-call .cd-activity-type-icon,
.cd-activity-call-incoming .cd-activity-type-icon,
.cd-activity-call-outgoing .cd-activity-type-icon,
.cd-activity-item-call:hover .cd-activity-type-icon,
.cd-activity-call-incoming:hover .cd-activity-type-icon,
.cd-activity-call-outgoing:hover .cd-activity-type-icon,
.cd-activity-item-call[open] .cd-activity-type-icon,
.cd-activity-call-incoming[open] .cd-activity-type-icon,
.cd-activity-call-outgoing[open] .cd-activity-type-icon {
    background: #dcfce7;
    color: #15803d;
}

.cd-activity-item-missed_call .cd-activity-type-icon,
.cd-activity-call-status-missed .cd-activity-type-icon,
.cd-activity-item-missed_call_work .cd-activity-type-icon,
.cd-activity-item-missed_call:hover .cd-activity-type-icon,
.cd-activity-call-status-missed:hover .cd-activity-type-icon,
.cd-activity-item-missed_call_work:hover .cd-activity-type-icon,
.cd-activity-item-missed_call[open] .cd-activity-type-icon,
.cd-activity-call-status-missed[open] .cd-activity-type-icon,
.cd-activity-item-missed_call_work[open] .cd-activity-type-icon {
    background: #fee2e2;
    color: #dc2626;
}

.cd-activity-item-note .cd-activity-type-icon,
.cd-activity-item-note:hover .cd-activity-type-icon,
.cd-activity-item-note[open] .cd-activity-type-icon {
    background: #fef3c7;
    color: #b45309;
}

.cd-activity-item-task .cd-activity-type-icon,
.cd-activity-item-task:hover .cd-activity-type-icon,
.cd-activity-item-task[open] .cd-activity-type-icon {
    background: #dbeafe;
    color: #2563eb;
}

/* Remove the generic blue open-state feel added during the first polish pass */
.cd-activity-item[open] {
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10);
}

/* Customer detail activity row softer color correction */
.cd-activity-item-call,
.cd-activity-call-incoming,
.cd-activity-call-outgoing {
    border-left-color: #86efac;
    background: #fbfffc;
}

.cd-activity-item-missed_call,
.cd-activity-call-status-missed,
.cd-activity-item-missed_call_work {
    border-left-color: #fca5a5;
    background: #fffafa;
}

.cd-activity-item-note {
    border-left-color: #fde68a;
    background: #fffef7;
}

.cd-activity-item-task {
    border-left-color: #bfdbfe;
    background: #f8fbff;
}

.cd-activity-item-call:hover,
.cd-activity-call-incoming:hover,
.cd-activity-call-outgoing:hover,
.cd-activity-item-call[open],
.cd-activity-call-incoming[open],
.cd-activity-call-outgoing[open] {
    border-top-color: #bbf7d0;
    border-right-color: #bbf7d0;
    border-bottom-color: #bbf7d0;
    background: #f7fef9;
}

.cd-activity-item-missed_call:hover,
.cd-activity-call-status-missed:hover,
.cd-activity-item-missed_call_work:hover,
.cd-activity-item-missed_call[open],
.cd-activity-call-status-missed[open],
.cd-activity-item-missed_call_work[open] {
    border-top-color: #fecaca;
    border-right-color: #fecaca;
    border-bottom-color: #fecaca;
    background: #fff7f7;
}

.cd-activity-item-note:hover,
.cd-activity-item-note[open] {
    border-top-color: #fef3c7;
    border-right-color: #fef3c7;
    border-bottom-color: #fef3c7;
    background: #fffdf0;
}

.cd-activity-item-task:hover,
.cd-activity-item-task[open] {
    border-top-color: #dbeafe;
    border-right-color: #dbeafe;
    border-bottom-color: #dbeafe;
    background: #f3f8ff;
}

.cd-activity-item-call .cd-activity-type-icon,
.cd-activity-call-incoming .cd-activity-type-icon,
.cd-activity-call-outgoing .cd-activity-type-icon,
.cd-activity-item-call:hover .cd-activity-type-icon,
.cd-activity-call-incoming:hover .cd-activity-type-icon,
.cd-activity-call-outgoing:hover .cd-activity-type-icon,
.cd-activity-item-call[open] .cd-activity-type-icon,
.cd-activity-call-incoming[open] .cd-activity-type-icon,
.cd-activity-call-outgoing[open] .cd-activity-type-icon {
    background: #f0fdf4;
    color: #15803d;
}

.cd-activity-item-missed_call .cd-activity-type-icon,
.cd-activity-call-status-missed .cd-activity-type-icon,
.cd-activity-item-missed_call_work .cd-activity-type-icon,
.cd-activity-item-missed_call:hover .cd-activity-type-icon,
.cd-activity-call-status-missed:hover .cd-activity-type-icon,
.cd-activity-item-missed_call_work:hover .cd-activity-type-icon,
.cd-activity-item-missed_call[open] .cd-activity-type-icon,
.cd-activity-call-status-missed[open] .cd-activity-type-icon,
.cd-activity-item-missed_call_work[open] .cd-activity-type-icon {
    background: #fff1f2;
    color: #dc2626;
}

.cd-activity-item-note .cd-activity-type-icon,
.cd-activity-item-note:hover .cd-activity-type-icon,
.cd-activity-item-note[open] .cd-activity-type-icon {
    background: #fffbeb;
    color: #b45309;
}

.cd-activity-item-task .cd-activity-type-icon,
.cd-activity-item-task:hover .cd-activity-type-icon,
.cd-activity-item-task[open] .cd-activity-type-icon {
    background: #eff6ff;
    color: #2563eb;
}

/* Customer detail activity: white rows by default, color only on hover/open */
.cd-activity-item,
.cd-activity-item-call,
.cd-activity-call-incoming,
.cd-activity-call-outgoing,
.cd-activity-item-missed_call,
.cd-activity-call-status-missed,
.cd-activity-item-missed_call_work,
.cd-activity-item-note,
.cd-activity-item-task {
    background: #ffffff;
}

/* Keep type accent colors on the left border */
.cd-activity-item-call,
.cd-activity-call-incoming,
.cd-activity-call-outgoing {
    border-left-color: #86efac;
}

.cd-activity-item-missed_call,
.cd-activity-call-status-missed,
.cd-activity-item-missed_call_work {
    border-left-color: #fca5a5;
}

.cd-activity-item-note {
    border-left-color: #fde68a;
}

.cd-activity-item-task {
    border-left-color: #bfdbfe;
}

/* Show pale type color only on hover/open */
.cd-activity-item-call:hover,
.cd-activity-call-incoming:hover,
.cd-activity-call-outgoing:hover,
.cd-activity-item-call[open],
.cd-activity-call-incoming[open],
.cd-activity-call-outgoing[open] {
    border-top-color: #bbf7d0;
    border-right-color: #bbf7d0;
    border-bottom-color: #bbf7d0;
    background: #f7fef9;
}

.cd-activity-item-missed_call:hover,
.cd-activity-call-status-missed:hover,
.cd-activity-item-missed_call_work:hover,
.cd-activity-item-missed_call[open],
.cd-activity-call-status-missed[open],
.cd-activity-item-missed_call_work[open] {
    border-top-color: #fecaca;
    border-right-color: #fecaca;
    border-bottom-color: #fecaca;
    background: #fff7f7;
}

.cd-activity-item-note:hover,
.cd-activity-item-note[open] {
    border-top-color: #fef3c7;
    border-right-color: #fef3c7;
    border-bottom-color: #fef3c7;
    background: #fffdf0;
}

.cd-activity-item-task:hover,
.cd-activity-item-task[open] {
    border-top-color: #dbeafe;
    border-right-color: #dbeafe;
    border-bottom-color: #dbeafe;
    background: #f3f8ff;
}

/* Keep icon colors stable even when the row changes state */
.cd-activity-item-call .cd-activity-type-icon,
.cd-activity-call-incoming .cd-activity-type-icon,
.cd-activity-call-outgoing .cd-activity-type-icon,
.cd-activity-item-call:hover .cd-activity-type-icon,
.cd-activity-call-incoming:hover .cd-activity-type-icon,
.cd-activity-call-outgoing:hover .cd-activity-type-icon,
.cd-activity-item-call[open] .cd-activity-type-icon,
.cd-activity-call-incoming[open] .cd-activity-type-icon,
.cd-activity-call-outgoing[open] .cd-activity-type-icon {
    background: #f0fdf4;
    color: #15803d;
}

.cd-activity-item-missed_call .cd-activity-type-icon,
.cd-activity-call-status-missed .cd-activity-type-icon,
.cd-activity-item-missed_call_work .cd-activity-type-icon,
.cd-activity-item-missed_call:hover .cd-activity-type-icon,
.cd-activity-call-status-missed:hover .cd-activity-type-icon,
.cd-activity-item-missed_call_work:hover .cd-activity-type-icon,
.cd-activity-item-missed_call[open] .cd-activity-type-icon,
.cd-activity-call-status-missed[open] .cd-activity-type-icon,
.cd-activity-item-missed_call_work[open] .cd-activity-type-icon {
    background: #fff1f2;
    color: #dc2626;
}

.cd-activity-item-note .cd-activity-type-icon,
.cd-activity-item-note:hover .cd-activity-type-icon,
.cd-activity-item-note[open] .cd-activity-type-icon {
    background: #fffbeb;
    color: #b45309;
}

.cd-activity-item-task .cd-activity-type-icon,
.cd-activity-item-task:hover .cd-activity-type-icon,
.cd-activity-item-task[open] .cd-activity-type-icon {
    background: #eff6ff;
    color: #2563eb;
}

/* Customer detail activity: simple hover, no row jump/preview expansion */
.cd-activity-item,
.cd-activity-item:hover,
.cd-activity-item[open] {
    transform: none;
}

.cd-activity-item:hover {
    box-shadow: none;
}

.cd-activity-item[open] {
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.cd-activity-summary,
.cd-activity-item:hover .cd-activity-summary,
.cd-activity-item[open] .cd-activity-summary {
    min-height: 58px;
}

.cd-activity-hover-preview,
.cd-activity-item:hover .cd-activity-hover-preview,
.cd-activity-item[open] .cd-activity-hover-preview {
    display: none;
    max-height: 0;
    opacity: 0;
}

/* Keep hover/open as color feedback only */
.cd-activity-item-call:hover,
.cd-activity-call-incoming:hover,
.cd-activity-call-outgoing:hover {
    background: #f7fef9;
}

.cd-activity-item-missed_call:hover,
.cd-activity-call-status-missed:hover,
.cd-activity-item-missed_call_work:hover {
    background: #fff7f7;
}

.cd-activity-item-note:hover {
    background: #fffdf0;
}

.cd-activity-item-task:hover {
    background: #f3f8ff;
}

/* Customer detail activity: keep left accent color stable by activity type */
.cd-activity-item-call,
.cd-activity-item-call:hover,
.cd-activity-item-call[open],
.cd-activity-call-incoming,
.cd-activity-call-incoming:hover,
.cd-activity-call-incoming[open],
.cd-activity-call-outgoing,
.cd-activity-call-outgoing:hover,
.cd-activity-call-outgoing[open] {
    border-left-color: #86efac;
}

.cd-activity-item-missed_call,
.cd-activity-item-missed_call:hover,
.cd-activity-item-missed_call[open],
.cd-activity-call-status-missed,
.cd-activity-call-status-missed:hover,
.cd-activity-call-status-missed[open],
.cd-activity-item-missed_call_work,
.cd-activity-item-missed_call_work:hover,
.cd-activity-item-missed_call_work[open] {
    border-left-color: #fca5a5;
}

.cd-activity-item-note,
.cd-activity-item-note:hover,
.cd-activity-item-note[open] {
    border-left-color: #fde68a;
}

.cd-activity-item-task,
.cd-activity-item-task:hover,
.cd-activity-item-task[open] {
    border-left-color: #bfdbfe;
}

/* Customer detail activity call row compact summary and smaller note button */
.cd-activity-inline-separator {
    color: #94a3b8;
    font-weight: 700;
}

.cd-activity-inline-status,
.cd-activity-inline-duration {
    color: #0f172a;
    font-weight: 850;
    white-space: nowrap;
}

.cd-activity-inline-form {
    margin-top: 10px;
}

.cd-activity-inline-form textarea {
    min-height: 58px;
}

.cd-activity-inline-form button {
    padding: 7px 14px;
    min-height: 0;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.25;
    font-weight: 750;
}

.cd-activity-item-unanswered_call,
.cd-activity-item-unanswered_call:hover,
.cd-activity-item-unanswered_call[open] {
    border-left-color: #fca5a5;
}

.cd-activity-item-unanswered_call:hover,
.cd-activity-item-unanswered_call[open] {
    border-top-color: #fecaca;
    border-right-color: #fecaca;
    border-bottom-color: #fecaca;
    background: #fff7f7;
}

.cd-activity-item-unanswered_call .cd-activity-type-icon,
.cd-activity-item-unanswered_call:hover .cd-activity-type-icon,
.cd-activity-item-unanswered_call[open] .cd-activity-type-icon {
    background: #fff1f2;
    color: #dc2626;
}

/* Customer detail Work timeline header and actions */
.cd-work-timeline-card {
    margin-bottom: 16px;
}

.cd-work-timeline-header-row {
    align-items: flex-start;
    gap: 18px;
}

.cd-work-timeline-header-row p {
    margin: 5px 0 0;
}

.cd-work-timeline-header-actions {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
}

.cd-work-action-details {
    position: relative;
}

.cd-work-action-details summary {
    list-style: none;
}

.cd-work-action-details summary::-webkit-details-marker {
    display: none;
}

.cd-work-action-button {
    min-width: 132px;
    min-height: 42px;
    padding: 9px 15px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #ffffff;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.cd-work-action-button-note {
    border: 1px solid #f6c453;
    color: #0f172a;
}

.cd-work-action-button-task {
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
}

.cd-work-action-button:hover {
    background: #f8fafc;
}

.cd-work-action-button-note:hover {
    background: #fffdf0;
}

.cd-work-action-button-task:hover {
    background: #f3f8ff;
}

.cd-work-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cd-work-action-button-note .cd-work-action-icon {
    color: #d97706;
}

.cd-work-action-button-task .cd-work-action-icon {
    color: #1d4ed8;
}

.cd-work-action-svg-icon {
    width: 18px;
    height: 18px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cd-work-action-popover {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
    width: min(380px, 78vw);
    padding: 12px;
    border: 1px solid #dbe5f0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.14);
}

.cd-work-action-form {
    display: grid;
    gap: 9px;
}

.cd-work-action-form input,
.cd-work-action-form textarea {
    width: 100%;
    box-sizing: border-box;
}

.cd-work-action-form button {
    justify-self: start;
    padding: 7px 14px;
    min-height: 0;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.25;
    font-weight: 750;
}

.cd-work-timeline-view-all {
    padding-top: 10px;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .cd-work-timeline-header-row {
        display: grid;
    }

    .cd-work-timeline-header-actions {
        justify-content: flex-start;
    }

    .cd-work-action-popover {
        left: 0;
        right: auto;
    }
}

/* Customer detail Work timeline items */
.cd-work-timeline-list {
    max-height: 260px;
    overflow-y: auto;
    padding-right: 6px;
}

.cd-work-timeline-item-note {
    border-left: 4px solid #f6c453;
}

.cd-work-timeline-item-task {
    border-left: 4px solid #bfdbfe;
}

.cd-work-timeline-item-note:hover,
.cd-work-timeline-item-note[open] {
    background: #fffdf0;
    border-color: #fef3c7;
    border-left-color: #f6c453;
}

.cd-work-timeline-item-task:hover,
.cd-work-timeline-item-task[open] {
    background: #f3f8ff;
    border-color: #dbeafe;
    border-left-color: #bfdbfe;
}

.cd-work-note-pill {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

.cd-work-task-pill {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

/* Customer detail Work timeline row icons */
.cd-work-timeline-type-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.cd-work-timeline-svg-icon {
    width: 16px;
    height: 16px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cd-work-timeline-type-icon-call {
    background: #f0fdf4;
    color: #15803d;
}

.cd-work-timeline-type-icon-note {
    background: #fffbeb;
    color: #b45309;
}

.cd-work-timeline-type-icon-task {
    background: #eff6ff;
    color: #2563eb;
}

.cd-work-timeline-item summary {
    gap: 9px;
}

/* Customer detail Work timeline call row accent and clicked state */
.cd-work-timeline-item-call {
    border-left: 4px solid #86efac;
}

.cd-work-timeline-item-call[open] {
    background: #f7fef9;
    border-top-color: #bbf7d0;
    border-right-color: #bbf7d0;
    border-bottom-color: #bbf7d0;
    border-left-color: #86efac;
}

.cd-work-timeline-item-call:hover {
    border-left-color: #86efac;
}

/* Customer detail Work timeline alignment and height adjustment */
.cd-customer-detail-layout {
    align-items: flex-start;
}

.cd-customer-detail-main,
.cd-customer-activity-column,
.cd-customer-detail-sidebar {
    margin-top: 0;
    padding-top: 0;
}

.cd-work-timeline-card {
    margin-top: 0;
    margin-bottom: 12px;
}

.cd-customer-activity-card {
    margin-top: 0;
}

.cd-customer-activity-column > .card + .card {
    margin-top: 12px;
}

.cd-work-timeline-list {
    max-height: 365px;
}

/* Customer detail tighter vertical card spacing */
.cd-customer-detail-main,
.cd-customer-activity-column,
.cd-customer-detail-sidebar {
    gap: 7px;
}

.cd-customer-detail-main > .card,
.cd-customer-activity-column > .card,
.cd-customer-detail-sidebar > .card {
    margin-top: 0;
    margin-bottom: 0;
}

.cd-customer-activity-column > .card + .card,
.cd-customer-detail-sidebar > .card + .card {
    margin-top: 7px;
}

.cd-work-timeline-card {
    margin-bottom: 7px;
}

.cd-customer-activity-card {
    margin-top: 0;
}

/* Customer detail compact Work timeline actions and no-card-subtitle spacing */
.cd-work-action-button {
    min-width: 106px;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 7px;
    gap: 7px;
    font-size: 0.92rem;
}

.cd-work-action-svg-icon {
    width: 15px;
    height: 15px;
}

.cd-work-timeline-header-row,
.cd-activity-header-row {
    align-items: center;
}

.cd-work-timeline-header-row h2,
.cd-activity-header-row h2 {
    margin-bottom: 0;
}

/* Customer detail Work timeline call rows match Activity summary */
.cd-work-timeline-call-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    flex-wrap: wrap;
}

.cd-work-timeline-call-direction,
.cd-work-timeline-inline-status,
.cd-work-timeline-inline-duration {
    color: #0f172a;
    font-weight: 850;
    white-space: nowrap;
}

.cd-work-timeline-call-route {
    color: #334155;
    font-weight: 500;
}

.cd-work-timeline-inline-separator {
    color: #94a3b8;
    font-weight: 700;
}

/* Customer detail Work timeline call note add action */
.cd-work-call-note-action {
    margin-top: 10px;
}

.cd-work-call-note-action summary {
    list-style: none;
}

.cd-work-call-note-action summary::-webkit-details-marker {
    display: none;
}

.cd-work-inline-add-note-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border: 1px solid #f6c453;
    border-radius: 7px;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
}

.cd-work-inline-add-note-button:hover,
.cd-work-call-note-action[open] .cd-work-inline-add-note-button {
    background: #fffdf0;
}

.cd-work-call-note-action[open] .cd-work-inline-add-note-button {
    margin-bottom: 8px;
}

.cd-work-call-note-form {
    display: grid;
    gap: 8px;
}

.cd-work-call-note-form textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 58px;
}

.cd-work-call-note-form button {
    justify-self: start;
    padding: 7px 14px;
    min-height: 0;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.25;
    font-weight: 750;
}

/* Customer detail Work timeline full-width slim Add note button */
.cd-work-call-note-action {
    margin-top: 4px;
    text-align: initial;
}

.cd-work-call-note-action > .cd-work-inline-add-note-button {
    display: flex !important;
    width: 100% !important;
    min-width: 0;
    min-height: 0;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.84rem;
    line-height: 1.1;
    justify-content: center;
}

.cd-work-call-note-action[open] > .cd-work-inline-add-note-button {
    margin-bottom: 5px;
}

.cd-work-call-note-form {
    gap: 5px;
}

.cd-work-call-note-form textarea {
    min-height: 42px;
}

.cd-work-call-note-form button {
    padding: 5px 11px;
    border-radius: 7px;
    font-size: 0.86rem;
    line-height: 1.15;
}

/* Customer detail Work timeline slim Add note button pale yellow background */
.cd-work-call-note-action > .cd-work-inline-add-note-button {
    background: #fffdf0;
    border-color: #f6c453;
}

.cd-work-call-note-action > .cd-work-inline-add-note-button:hover,
.cd-work-call-note-action[open] > .cd-work-inline-add-note-button {
    background: #fffbeb;
}

/* Customer detail Work timeline note edit action */
.cd-work-note-edit-action {
    margin-top: 5px;
}

.cd-work-note-edit-action summary {
    list-style: none;
}

.cd-work-note-edit-action summary::-webkit-details-marker {
    display: none;
}

.cd-work-inline-edit-note-button {
    display: flex;
    width: 100%;
    min-height: 0;
    padding: 2px 8px;
    border: 1px solid #86efac;
    border-radius: 6px;
    background: #f0fdf4;
    color: #14532d;
    font-size: 0.84rem;
    line-height: 1.1;
    font-weight: 800;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}

.cd-work-inline-edit-note-button:hover,
.cd-work-note-edit-action[open] .cd-work-inline-edit-note-button {
    background: #dcfce7;
}

.cd-work-note-edit-action[open] .cd-work-inline-edit-note-button {
    margin-bottom: 5px;
}

.cd-work-note-edit-form {
    display: grid;
    gap: 5px;
}

.cd-work-note-edit-form input,
.cd-work-note-edit-form textarea {
    width: 100%;
    box-sizing: border-box;
}

.cd-work-note-edit-form textarea {
    min-height: 56px;
}

.cd-work-note-edit-form button {
    justify-self: start;
    padding: 5px 11px;
    min-height: 0;
    border-radius: 7px;
    font-size: 0.86rem;
    line-height: 1.15;
    font-weight: 750;
}

/* Customer detail Work timeline slim Edit note button override */
.cd-work-note-edit-action > summary.cd-work-inline-edit-note-button {
    min-height: 16px !important;
    height: 18px !important;
    padding: 0 8px !important;
    line-height: 1 !important;
    align-items: center !important;
}

.cd-work-note-edit-action[open] > summary.cd-work-inline-edit-note-button {
    margin-bottom: 5px;
}\n
/* Customer detail Work timeline compact task row */
.cd-work-task-title-line {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    flex-wrap: wrap;
}

.cd-work-task-title-line strong {
    color: #0f172a;
    font-weight: 800;
}

.cd-work-task-description-box {
    margin-top: 2px;
}

/* Customer detail Work timeline task edit action */
.cd-work-task-edit-action {
    margin-top: 5px;
}

.cd-work-task-edit-action summary {
    list-style: none;
}

.cd-work-task-edit-action summary::-webkit-details-marker {
    display: none;
}

.cd-work-inline-edit-task-button {
    display: flex;
    width: 100%;
    min-height: 18px;
    height: 18px;
    padding: 0 8px;
    border: 1px solid #86efac;
    border-radius: 6px;
    background: #f0fdf4;
    color: #14532d;
    font-size: 0.84rem;
    line-height: 1;
    font-weight: 800;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.cd-work-inline-edit-task-button:hover,
.cd-work-task-edit-action[open] .cd-work-inline-edit-task-button {
    background: #dcfce7;
}

.cd-work-task-edit-action[open] .cd-work-inline-edit-task-button {
    margin-bottom: 5px;
}

.cd-work-task-edit-form {
    display: grid;
    gap: 5px;
}

.cd-work-task-edit-form textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 56px;
}

.cd-work-task-edit-form button {
    justify-self: start;
    padding: 5px 11px;
    min-height: 0;
    border-radius: 7px;
    font-size: 0.86rem;
    line-height: 1.15;
    font-weight: 750;
}

/* Customer detail Work timeline task status/priority update */
.cd-work-task-status-priority-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 6px;
    padding: 7px 8px;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #f8fbff;
}

.cd-work-task-status-priority-form label {
    display: grid;
    gap: 2px;
    margin: 0;
}

.cd-work-task-status-priority-form label span {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
}

.cd-work-task-status-priority-form select {
    min-height: 28px;
    padding: 3px 8px;
    border-radius: 7px;
    font-size: 0.86rem;
}

.cd-work-task-status-priority-form button {
    min-height: 28px;
    padding: 4px 12px;
    border-radius: 7px;
    font-size: 0.86rem;
    line-height: 1.15;
    font-weight: 750;
}

/* Customer detail inline tabs and bottom View all footer */
.cd-card-title-tabs {
    display: flex;
    align-items: center;
    gap: 28px;
    min-width: 0;
    flex-wrap: wrap;
}

.cd-card-title-tabs h2 {
    margin: 0;
    white-space: nowrap;
}

.cd-inline-card-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    border-bottom: 1px solid #e5e7eb;
}

.cd-inline-card-tabs button {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: #475569;
    cursor: pointer;
    font-size: 0.91rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    padding: 2px 17px 9px;
    white-space: nowrap;
}

.cd-inline-card-tabs button:hover {
    color: #1d4ed8;
}

.cd-inline-card-tabs button.is-active {
    border-bottom-color: #2563eb;
    color: #1d4ed8;
}

.cd-filter-hidden {
    display: none !important;
}

.cd-card-bottom-view-all {
    display: flex;
    justify-content: flex-end;
    padding: 7px 2px 0;
    margin-top: 6px;
    border-top: 1px solid #eef2f7;
}

.cd-card-bottom-view-all a {
    color: #2563eb;
    font-size: 0.91rem;
    font-weight: 800;
    text-decoration: none;
}

.cd-card-bottom-view-all a:hover {
    text-decoration: underline;
}

@media (max-width: 900px) {
    .cd-card-title-tabs {
        gap: 12px;
    }

    .cd-inline-card-tabs {
        width: 100%;
        overflow-x: auto;
    }

    .cd-inline-card-tabs button {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Customer detail tabs alignment and straight underline override */
.cd-card-title-tabs {
    gap: 12px !important;
}

.cd-card-title-tabs h2 {
    flex: 0 0 150px;
}

.cd-inline-card-tabs {
    border-bottom: 1px solid #e5e7eb;
}

.cd-inline-card-tabs button {
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 2px solid transparent !important;
}

.cd-inline-card-tabs button.is-active {
    border-bottom-color: #2563eb !important;
    color: #1d4ed8 !important;
}

.cd-inline-card-tabs button::before,
.cd-inline-card-tabs button::after {
    display: none !important;
}\n
/* Customer detail Activity compact task rows */
.cd-activity-task-route {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cd-activity-task-route strong {
    color: #0f172a;
    font-weight: 800;
}

/* Softer Customer Desk action blue */
.cd-small-action-link,
.cd-card-bottom-view-all a,
.cd-customer-detail a.cd-small-action-link,
.cd-customer-detail .cd-card-bottom-view-all a {
    color: #0284c7 !important;
}

.cd-small-action-link:hover,
.cd-card-bottom-view-all a:hover,
.cd-customer-detail a.cd-small-action-link:hover,
.cd-customer-detail .cd-card-bottom-view-all a:hover {
    color: #0369a1 !important;
}

.cd-customer-detail a[href*="new_task"],
.cd-customer-detail a[href*="add_task"],
.cd-customer-detail a[href*="action=add_task"],
.cd-customer-detail .cd-add-task-button,
.cd-customer-detail .cd-secondary-action,
.cd-customer-detail .btn-outline-primary {
    color: #0284c7 !important;
    border-color: #bae6fd !important;
    background: #f0f9ff !important;
}

.cd-customer-detail a[href*="new_task"]:hover,
.cd-customer-detail a[href*="add_task"]:hover,
.cd-customer-detail a[href*="action=add_task"]:hover,
.cd-customer-detail .cd-add-task-button:hover,
.cd-customer-detail .cd-secondary-action:hover,
.cd-customer-detail .btn-outline-primary:hover {
    color: #0369a1 !important;
    border-color: #7dd3fc !important;
    background: #e0f2fe !important;
}

/* Add contact page: balanced two-column form with logical row/tab order */
.cd-page-back-link {
    margin: 0 0 12px;
}

.cd-page-back-link a {
    color: #0284c7;
    font-weight: 700;
    text-decoration: none;
}

.cd-page-back-link a:hover {
    color: #0369a1;
    text-decoration: underline;
}

.cd-customer-add-grid-balanced {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    align-items: start;
}

.cd-customer-add-grid-balanced .cd-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cd-customer-add-grid-balanced .cd-customer-add-notes {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .cd-customer-add-grid-balanced {
        grid-template-columns: 1fr;
    }

    .cd-customer-add-grid-balanced .cd-customer-add-notes {
        grid-column: auto;
    }
}

/* Task due date/time fields */
.cd-work-inline-form-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: #64748b;
}

.cd-work-inline-form-label input,
.cd-work-inline-form-label select,
.cd-work-action-form input[type="datetime-local"],
.cd-work-action-form select,
.cd-work-task-status-priority-form input[type="datetime-local"] {
    width: 100%;
    box-sizing: border-box;
}

.cd-task-due-badge {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #475569;
}

/* Customer detail task opened row: cleaner status/priority/due sizing */
.cd-work-task-status-priority-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.cd-work-task-status-priority-form label {
    margin: 0;
    flex: 0 0 auto;
}

.cd-work-task-status-priority-form label:nth-of-type(1) {
    width: 120px;
}

.cd-work-task-status-priority-form label:nth-of-type(2) {
    width: 105px;
}

.cd-work-task-status-priority-form label:nth-of-type(3) {
    width: 210px;
}

.cd-work-task-status-priority-form select,
.cd-work-task-status-priority-form input[type="datetime-local"] {
    width: 100%;
    box-sizing: border-box;
}

/* Customer detail task due date/time split fields */
.cd-work-due-split-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 8px;
}

.cd-work-due-split-row input[type="date"],
.cd-work-due-split-row input[type="time"] {
    width: 100%;
    box-sizing: border-box;
}

.cd-work-task-status-priority-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.cd-work-task-status-priority-form label {
    margin: 0;
    flex: 0 0 auto;
}

.cd-work-task-status-priority-form label:nth-of-type(1) {
    width: 120px;
}

.cd-work-task-status-priority-form label:nth-of-type(2) {
    width: 105px;
}

.cd-work-task-status-priority-form label:nth-of-type(3) {
    width: 145px;
}

.cd-work-task-status-priority-form label:nth-of-type(4) {
    width: 115px;
}

.cd-work-task-status-priority-form select,
.cd-work-task-status-priority-form input[type="date"],
.cd-work-task-status-priority-form input[type="time"] {
    width: 100%;
    box-sizing: border-box;
}

/* Customer detail task opened row: equal field heights */
.cd-work-task-status-priority-form select,
.cd-work-task-status-priority-form input[type="date"],
.cd-work-task-status-priority-form input[type="time"] {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 10px !important;
    font-size: 14px !important;
    line-height: 38px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

.cd-work-task-status-priority-form button {
    height: 38px !important;
    min-height: 38px !important;
    align-self: flex-end;
}

/* Tasks page due date/time split fields */
.cd-task-due-two-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 8px;
}

.cd-task-due-two-fields input[type="date"],
.cd-task-due-two-fields input[type="time"] {
    width: 100%;
    height: 38px;
    min-height: 38px;
    box-sizing: border-box;
}

/* Contacts list: search moved into page header */
.cd-page-header-search-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.cd-header-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cd-header-search-form input[type="text"] {
    width: 220px;
    min-width: 180px;
}

.cd-header-search-form select {
    width: 170px;
}

.cd-header-search-form input[type="text"],
.cd-header-search-form select,
.cd-header-search-form button {
    height: 38px;
    min-height: 38px;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .cd-page-header-search-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .cd-header-search-form {
        width: 100%;
    }

    .cd-header-search-form input[type="text"],
    .cd-header-search-form select {
        width: 100%;
    }
}

/* Tasks list: search moved into page header */
.cd-filter-context-card {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cd-filter-context-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Tasks overview card */
.cd-task-overview-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cd-task-overview-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.cd-task-overview-top h2 {
    margin: 0 0 4px;
}

.cd-task-overview-top p {
    margin: 0;
}

.cd-task-overview-counters {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    color: #475569;
    font-size: 13px;
}

.cd-task-overview-counters span {
    border: 1px solid #dbeafe;
    background: #f8fafc;
    border-radius: 999px;
    padding: 5px 9px;
}

.cd-task-overview-bars {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.cd-task-overview-bar-title {
    font-weight: 700;
    margin-bottom: 6px;
}

.cd-task-overview-bar {
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
    display: flex;
}

.cd-task-overview-segment {
    display: block;
    min-width: 3px;
    height: 100%;
}

.cd-task-overview-empty {
    background: #e2e8f0;
}

.cd-task-overview-legend {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
    color: #475569;
    font-size: 13px;
}

.cd-task-overview-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.cd-task-overview-legend i {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    display: inline-block;
}

.cd-task-status-segment-new { background: #38bdf8; }
.cd-task-status-segment-assigned { background: #2563eb; }
.cd-task-status-segment-in-progress { background: #f59e0b; }
.cd-task-status-segment-called-back { background: #14b8a6; }
.cd-task-status-segment-closed { background: #16a34a; }
.cd-task-status-segment-ignored { background: #64748b; }

.cd-task-priority-segment-low { background: #93c5fd; }
.cd-task-priority-segment-normal { background: #22c55e; }
.cd-task-priority-segment-high { background: #ef4444; }

/* Tasks overview: status and priority bars side by side */
.cd-task-overview-bars {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: start;
}

.cd-task-overview-bar-block {
    min-width: 0;
}

@media (max-width: 900px) {
    .cd-task-overview-bars {
        grid-template-columns: 1fr !important;
    }
}

/* Tasks page unified work queue */
.cd-task-work-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 18px;
    align-items: start;
}

.cd-task-work-main {
    min-width: 0;
}

.cd-task-priority-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0 12px;
}

.cd-task-priority-filter-row a {
    border: 1px solid #dbeafe;
    background: #f8fafc;
    border-radius: 999px;
    color: #0284c7;
    font-weight: 700;
    padding: 5px 10px;
    text-decoration: none;
}

.cd-task-priority-filter-row a.active {
    background: #e0f2fe;
    border-color: #7dd3fc;
    color: #0369a1;
}

.cd-task-expandable-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cd-task-expandable-row {
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.cd-task-expandable-row summary {
    cursor: pointer;
    list-style: none;
    display: grid;
    grid-template-columns: 32px 140px auto auto 150px 150px minmax(160px, 1fr);
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
}

.cd-task-expandable-row summary::-webkit-details-marker {
    display: none;
}

.cd-task-expandable-row[open] {
    background: #f8fbff;
}

.cd-task-source-manual[open] {
    border-left: 4px solid #93c5fd;
}

.cd-task-source-call[open] {
    border-left: 4px solid #86efac;
}

.cd-task-source-missed[open] {
    border-left: 4px solid #fca5a5;
}

.cd-task-row-source-icon {
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: #eff6ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cd-task-row-source-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #2563eb;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cd-task-row-due,
.cd-task-row-customer,
.cd-task-row-assigned {
    color: #475569;
    font-size: 13px;
}

.cd-task-row-title {
    font-weight: 700;
    color: #0f172a;
}

.cd-task-expanded-body {
    padding: 0 12px 12px 52px;
}

.cd-task-expanded-description {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
}

.cd-task-expanded-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    color: #64748b;
    font-size: 13px;
    margin-bottom: 10px;
}

.cd-task-expanded-edit-form {
    display: grid;
    grid-template-columns: 130px 120px minmax(170px, 1fr) 145px 110px;
    gap: 8px;
    align-items: end;
}

.cd-task-expanded-edit-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #475569;
    font-size: 12px;
}

.cd-task-expanded-edit-form select,
.cd-task-expanded-edit-form input,
.cd-task-expanded-edit-form textarea {
    width: 100%;
    box-sizing: border-box;
}

.cd-task-expanded-edit-form select,
.cd-task-expanded-edit-form input {
    height: 38px;
    min-height: 38px;
}

.cd-task-edit-description {
    grid-column: 1 / -2;
}

.cd-task-expanded-edit-form button {
    height: 38px;
    min-height: 38px;
}

.cd-task-calendar-panel {
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: #f8fafc;
    padding: 14px;
    position: sticky;
    top: 74px;
}

.cd-task-calendar-panel h3 {
    margin: 0 0 12px;
}

.cd-task-calendar-panel h4 {
    margin: 14px 0 8px;
    color: #334155;
}

.cd-task-calendar-item {
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 13px;
}

.cd-task-calendar-item strong {
    color: #0369a1;
}

.cd-task-calendar-item em {
    color: #64748b;
    font-style: normal;
}

.cd-pagination-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 14px;
}

@media (max-width: 1200px) {
    .cd-task-work-layout {
        grid-template-columns: 1fr;
    }

    .cd-task-calendar-panel {
        position: static;
    }

    .cd-task-expandable-row summary {
        grid-template-columns: 32px 1fr;
    }

    .cd-task-row-due,
    .cd-task-row-customer,
    .cd-task-row-assigned,
    .cd-task-row-title {
        grid-column: 2;
    }

    .cd-task-expanded-body {
        padding-left: 12px;
    }

    .cd-task-expanded-edit-form {
        grid-template-columns: 1fr;
    }

    .cd-task-edit-description {
        grid-column: auto;
    }
}

/* Tasks page tabs: match Customer Detail inline tabs */
.cd-task-work-card .cd-card-title-tabs {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    border-bottom: 1px solid #dbeafe;
    margin-bottom: 12px;
}

.cd-task-work-card .cd-card-title-tabs h2 {
    flex: 0 0 150px;
    margin: 0;
}

.cd-task-work-card .cd-inline-card-tabs {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.cd-task-work-card .cd-inline-card-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #334155;
    font-weight: 700;
    text-decoration: none;
    padding: 0 0 9px;
    border-bottom: 2px solid transparent;
}

.cd-task-work-card .cd-inline-card-tabs a:hover {
    color: #0369a1;
}

.cd-task-work-card .cd-inline-card-tabs a.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

.cd-task-work-card .cd-inline-card-tabs a span {
    color: #64748b;
    font-weight: 700;
    font-size: 12px;
}

.cd-task-work-card .cd-inline-card-tabs a.active span {
    color: #2563eb;
}

.cd-task-work-card .cd-task-priority-filter-row {
    margin-top: 4px;
}

/* Global radius pass: more square business application style */
:root {
    --cd-radius-card: 6px;
    --cd-radius-panel: 4px;
    --cd-radius-control: 4px;
    --cd-radius-badge: 3px;
}

/* Main cards / containers */
.card,
.cd-page-header-card,
.cd-task-overview-card,
.cd-task-work-card,
.cd-filter-context-card,
.cd-inline-form-card,
.cd-customer-hero,
.cd-customer-side-card,
.cd-activity-card,
.cd-conversation-card,
.cd-work-timeline-card,
.cd-task-calendar-panel {
    border-radius: var(--cd-radius-card) !important;
}

/* Inner panels, rows, expandable items */
.cd-task-expandable-row,
.cd-activity-item,
.cd-conversation-compact-item,
.cd-work-timeline-item,
.cd-customer-contact-card,
.cd-activity-note-box,
.cd-task-expanded-description,
.cd-task-calendar-item,
.cd-work-action-popover,
.cd-customer-add-grid,
.cd-filter-card,
details,
summary {
    border-radius: var(--cd-radius-panel) !important;
}

/* Forms and buttons */
input,
select,
textarea,
button,
.btn,
.btn-primary,
.cd-header-search-form input,
.cd-header-search-form select,
.cd-header-search-form button,
.cd-work-action-button,
.cd-work-action-form button,
.cd-task-expanded-edit-form button,
.cd-small-action-link,
.cd-page-header-actions .btn {
    border-radius: var(--cd-radius-control) !important;
}

/* Badges / pills / status labels: intentionally not pill-shaped */
.pill,
.badge,
.cd-meta-badge,
.cd-status-badge,
.cd-lead-status-badge,
.cd-task-priority-filter-row a,
.cd-task-overview-counters span,
.cd-inline-card-tabs a span,
.cd-task-row-source-icon {
    border-radius: var(--cd-radius-badge) !important;
}

/* Progress / overview bars: less pill-like */
.cd-task-overview-bar,
.cd-task-overview-segment,
.cd-lead-overview-bar,
.cd-lead-overview-segment,
.cd-overview-bar,
.cd-overview-segment {
    border-radius: var(--cd-radius-badge) !important;
}

/* Keep only true tiny dots round */
.cd-task-overview-legend i,
.cd-lead-overview-legend i,
.cd-status-dot,
.cd-dot {
    border-radius: 50% !important;
}

/* Radius correction: progress bars square, menu more business-like */

/* Progress/overview bars must stay square so segments connect cleanly */
.cd-task-overview-bar,
.cd-task-overview-segment,
.cd-lead-overview-bar,
.cd-lead-overview-segment,
.cd-overview-bar,
.cd-overview-segment,
.progress,
.progress-bar {
    border-radius: 0 !important;
}

/* Menu/sidebar/nav items should follow the more-square business style */
.nav-link,
.navbar-nav .nav-link,
.navbar .nav-link,
.dropdown-menu,
.dropdown-item,
.cd-sidebar,
.cd-sidebar a,
.cd-sidebar .nav-link,
.cd-menu,
.cd-menu a,
.cd-menu-item {
    border-radius: 4px !important;
}

/* Active menu items should also be square-ish, not pill-like */
.nav-link.active,
.navbar-nav .nav-link.active,
.navbar .nav-link.active,
.cd-sidebar .nav-link.active,
.cd-menu-item.active {
    border-radius: 4px !important;
}

/* Menu badges/counters should not be pill-shaped */
.nav-link .badge,
.navbar-nav .badge,
.cd-sidebar .badge,
.cd-menu .badge {
    border-radius: 3px !important;
}

/* Tasks page queue header: state tabs left, priority filter right */
.cd-task-work-card .cd-task-queue-header {
    border-bottom: 1px solid #dbeafe;
    margin-bottom: 12px;
}

.cd-task-work-card .cd-task-queue-header h2 {
    margin: 0 0 8px;
}

.cd-task-work-card .cd-task-queue-controls {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.cd-task-work-card .cd-task-state-tabs {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
    min-width: 0;
}

.cd-task-work-card .cd-task-state-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #334155;
    font-weight: 700;
    text-decoration: none;
    padding: 0 0 10px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.cd-task-work-card .cd-task-state-tabs a:hover {
    color: #0369a1;
}

.cd-task-work-card .cd-task-state-tabs a.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

.cd-task-work-card .cd-task-state-tabs a span {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.cd-task-work-card .cd-task-state-tabs a.active span {
    color: #2563eb;
}

.cd-task-work-card .cd-task-priority-filter-row {
    margin: 0 0 8px auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.cd-task-work-card .cd-task-priority-filter-row a {
    border: 1px solid #dbeafe;
    background: #f8fafc;
    border-radius: 4px !important;
    color: #0369a1;
    font-weight: 700;
    padding: 6px 12px;
    line-height: 1.2;
    text-decoration: none;
}

.cd-task-work-card .cd-task-priority-filter-row a.active {
    background: #e0f2fe;
    border-color: #7dd3fc;
    color: #0369a1;
}

@media (max-width: 1100px) {
    .cd-task-work-card .cd-task-queue-controls {
        align-items: flex-start;
    }

    .cd-task-work-card .cd-task-priority-filter-row {
        margin-left: 0;
        justify-content: flex-start;
    }
}

/* Expanded task row title box */
.cd-task-expanded-title-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cd-task-expanded-title-label {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.cd-task-expanded-edit-form button {
    white-space: nowrap;
    min-width: 110px;
}

/* Expanded task row compact metadata line */
.cd-task-expanded-meta-line {
    align-items: center;
    margin: 2px 0 10px;
}

.cd-task-expanded-meta-line span {
    white-space: nowrap;
}

.cd-task-expanded-meta-line span strong {
    color: #334155;
}

/* Task row content order: created, status, priority, task, customer, assigned, due */
.cd-task-expandable-row summary {
    grid-template-columns: 32px 145px auto auto minmax(220px, 1.3fr) minmax(145px, .8fr) minmax(140px, .8fr) 145px;
}

.cd-task-expandable-row.cd-task-scope-my summary {
    grid-template-columns: 32px 145px auto auto minmax(260px, 1.4fr) minmax(160px, .9fr) 145px;
}

.cd-task-row-created,
.cd-task-row-due,
.cd-task-row-customer,
.cd-task-row-assigned {
    color: #475569;
    font-size: 13px;
}

.cd-task-row-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cd-task-focused {
    box-shadow: inset 3px 0 0 #00a9e0;
    background: #f0f9ff;
}

/* Clickable task calendar items */
a.cd-task-calendar-item {
    color: inherit;
    text-decoration: none;
}

a.cd-task-calendar-item:hover {
    border-color: #7dd3fc;
    background: #eff6ff;
}

@media (max-width: 1200px) {
    .cd-task-expandable-row summary,
    .cd-task-expandable-row.cd-task-scope-my summary {
        grid-template-columns: 32px 1fr;
    }

    .cd-task-row-created,
    .cd-task-row-due,
    .cd-task-row-customer,
    .cd-task-row-assigned,
    .cd-task-row-title {
        grid-column: 2;
    }
}

/* Task queue table-like alignment */
.cd-task-list-header,
.cd-task-expandable-row summary {
    display: grid;
    grid-template-columns: 32px 145px 78px 86px minmax(260px, 1fr) 170px 150px 145px;
    gap: 10px;
    align-items: center;
}

.cd-task-list-header.cd-task-scope-my,
.cd-task-expandable-row.cd-task-scope-my summary {
    grid-template-columns: 32px 145px 78px 86px minmax(300px, 1fr) 180px 145px;
}

.cd-task-list-header {
    padding: 0 12px 6px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 6px;
}

.cd-task-expandable-row summary {
    padding: 10px 12px;
}

.cd-task-expandable-row summary > .cd-meta-badge {
    justify-self: start;
    max-width: 100%;
    white-space: nowrap;
}

.cd-task-row-created,
.cd-task-row-due,
.cd-task-row-customer,
.cd-task-row-assigned {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cd-task-row-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cd-task-calendar-panel h3::after {
    content: "";
}

/* keep old class name, but visually this is now the Task agenda */
.cd-task-calendar-panel {
    width: 100%;
}

@media (max-width: 1200px) {
    .cd-task-list-header {
        display: none;
    }

    .cd-task-expandable-row summary,
    .cd-task-expandable-row.cd-task-scope-my summary {
        grid-template-columns: 32px 1fr;
    }
}

/* Task agenda: compact empty sections */
.cd-task-calendar-panel section > p.empty {
    margin: 2px 0 12px !important;
    padding: 2px 0 !important;
    min-height: 0 !important;
    text-align: left !important;
    font-size: 13px;
    color: #64748b;
}

.cd-task-calendar-panel section {
    margin-bottom: 12px;
}

.cd-task-calendar-panel h4 {
    margin-bottom: 6px;
}

/* Calls page queue/history layout */
.cd-call-overview-card,
.cd-call-work-card {
    border-radius: var(--cd-radius-card) !important;
}

.cd-call-overview-bars {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.cd-call-overview-bar-block {
    min-width: 0;
}

.cd-call-overview-bar {
    height: 12px;
    background: #e2e8f0;
    border-radius: 0 !important;
    overflow: hidden;
    display: flex;
}

.cd-call-overview-segment {
    display: block;
    height: 100%;
    border-radius: 0 !important;
}

.cd-call-status-segment-ringing { background: #38bdf8; }
.cd-call-status-segment-answered { background: #22c55e; }
.cd-call-status-segment-completed { background: #16a34a; }
.cd-call-status-segment-missed { background: #ef4444; }
.cd-call-status-segment-failed { background: #f97316; }
.cd-call-status-segment-unknown,
.cd-call-status-segment-empty { background: #cbd5e1; }

.cd-call-queue-header {
    border-bottom: 1px solid #dbeafe;
    margin-bottom: 12px;
}

.cd-call-queue-header h2 {
    margin: 0 0 8px;
}

.cd-call-queue-controls {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.cd-call-status-tabs {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
    min-width: 0;
}

.cd-call-status-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #334155;
    font-weight: 700;
    text-decoration: none;
    padding: 0 0 10px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.cd-call-status-tabs a:hover {
    color: #0369a1;
}

.cd-call-status-tabs a.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

.cd-call-status-tabs a span {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.cd-call-status-tabs a.active span {
    color: #2563eb;
}

.cd-call-direction-filter-row {
    margin: 0 0 8px auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.cd-call-direction-filter-row a {
    border: 1px solid #dbeafe;
    background: #f8fafc;
    border-radius: 4px !important;
    color: #0369a1;
    font-weight: 700;
    padding: 6px 12px;
    line-height: 1.2;
    text-decoration: none;
}

.cd-call-direction-filter-row a.active {
    background: #e0f2fe;
    border-color: #7dd3fc;
    color: #0369a1;
}

.cd-call-list-header,
.cd-call-expandable-row summary {
    display: grid;
    grid-template-columns: 32px 145px 92px 105px minmax(220px, 1fr) minmax(170px, .9fr) minmax(140px, .8fr) 75px;
    gap: 10px;
    align-items: center;
}

.cd-call-list-header {
    padding: 0 12px 6px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 6px;
}

.cd-call-expandable-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cd-call-expandable-row {
    border: 1px solid #dbeafe;
    border-radius: var(--cd-radius-panel) !important;
    background: #fff;
    overflow: hidden;
}

.cd-call-expandable-row summary {
    cursor: pointer;
    list-style: none;
    padding: 10px 12px;
}

.cd-call-expandable-row summary::-webkit-details-marker {
    display: none;
}

.cd-call-expandable-row[open] {
    background: #f8fbff;
}

.cd-call-row-source-icon {
    width: 26px;
    height: 26px;
    border-radius: var(--cd-radius-badge) !important;
    background: #eff6ff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.cd-call-row-time,
.cd-call-row-customer,
.cd-call-row-external,
.cd-call-row-agent,
.cd-call-row-duration {
    color: #475569;
    font-size: 13px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cd-call-row-customer a {
    color: #0f172a;
    font-weight: 700;
    text-decoration: none;
}

.cd-call-row-customer a:hover {
    text-decoration: underline;
}

.cd-call-expanded-body {
    padding: 0 12px 12px 52px;
}

.cd-call-expanded-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    color: #64748b;
    font-size: 13px;
    margin: 2px 0 10px;
}

.cd-call-notes-block {
    margin-bottom: 10px;
}

.cd-call-note-item {
    margin-top: 6px;
    padding: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: var(--cd-radius-panel) !important;
}

.cd-call-note-form-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px;
    gap: 8px;
    align-items: end;
    margin: 0;
}

.cd-call-note-form-list textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 58px;
}

.cd-call-note-form-list button {
    height: 38px;
    white-space: nowrap;
}

.cd-call-row-incoming:hover,
.cd-call-row-incoming[open] {
    border-color: #93c5fd;
}

.cd-call-row-outgoing:hover,
.cd-call-row-outgoing[open] {
    border-color: #86efac;
}

.cd-call-row-missed:hover,
.cd-call-row-missed[open] {
    border-color: #fca5a5;
}

@media (max-width: 1200px) {
    .cd-call-overview-bars {
        grid-template-columns: 1fr;
    }

    .cd-call-list-header {
        display: none;
    }

    .cd-call-expandable-row summary {
        grid-template-columns: 32px 1fr;
    }

    .cd-call-row-time,
    .cd-call-row-customer,
    .cd-call-row-external,
    .cd-call-row-agent,
    .cd-call-row-duration {
        grid-column: 2;
    }

    .cd-call-expanded-body {
        padding-left: 12px;
    }

    .cd-call-note-form-list {
        grid-template-columns: 1fr;
    }
}

/* Calls page outcome accent: left stripe and direction icon color */
.cd-call-expandable-row {
    border-left-width: 4px !important;
    border-left-style: solid !important;
}

.cd-call-outcome-success {
    border-left-color: #22c55e !important;
}

.cd-call-outcome-problem {
    border-left-color: #ef4444 !important;
}

.cd-call-outcome-neutral {
    border-left-color: #94a3b8 !important;
}

.cd-call-outcome-success .cd-call-row-source-icon {
    background: #dcfce7;
    color: #15803d;
}

.cd-call-outcome-problem .cd-call-row-source-icon {
    background: #fee2e2;
    color: #dc2626;
}

.cd-call-outcome-neutral .cd-call-row-source-icon {
    background: #f1f5f9;
    color: #64748b;
}

/* Keep direction hover/outline subtle, while outcome remains the stronger left signal */
.cd-call-row-incoming:hover,
.cd-call-row-incoming[open] {
    border-top-color: #93c5fd;
    border-right-color: #93c5fd;
    border-bottom-color: #93c5fd;
}

.cd-call-row-outgoing:hover,
.cd-call-row-outgoing[open] {
    border-top-color: #86efac;
    border-right-color: #86efac;
    border-bottom-color: #86efac;
}

.cd-call-outcome-problem:hover,
.cd-call-outcome-problem[open] {
    background: #fff7f7;
}

/* Calls page final hover/open behavior by outcome */
.cd-call-expandable-row:hover,
.cd-call-expandable-row[open] {
    border-left-width: 4px !important;
}

/* Successful calls: green outline on hover/open, very light green when open */
.cd-call-outcome-success:hover {
    border-color: #22c55e !important;
    background: #fff !important;
}

.cd-call-outcome-success[open] {
    border-color: #22c55e !important;
    background: #f0fdf4 !important;
}

/* Not answered / failed calls: red outline on hover/open, very light red when open */
.cd-call-outcome-problem:hover {
    border-color: #ef4444 !important;
    background: #fff !important;
}

.cd-call-outcome-problem[open] {
    border-color: #ef4444 !important;
    background: #fff7f7 !important;
}

/* Unknown/other calls: gray outline on hover/open, very light gray when open */
.cd-call-outcome-neutral:hover {
    border-color: #94a3b8 !important;
    background: #fff !important;
}

.cd-call-outcome-neutral[open] {
    border-color: #94a3b8 !important;
    background: #f8fafc !important;
}

/* Keep direction as icon shape; icon color follows outcome */
.cd-call-outcome-success .cd-call-row-source-icon {
    background: #dcfce7 !important;
    color: #15803d !important;
}

.cd-call-outcome-problem .cd-call-row-source-icon {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}

.cd-call-outcome-neutral .cd-call-row-source-icon {
    background: #f1f5f9 !important;
    color: #64748b !important;
}

/* Override older direction-based open/hover colors so missed incoming is not blue */
.cd-call-row-incoming:hover,
.cd-call-row-incoming[open],
.cd-call-row-outgoing:hover,
.cd-call-row-outgoing[open],
.cd-call-row-missed:hover,
.cd-call-row-missed[open] {
    border-left-width: 4px !important;
}

/* Calls page compact hero search controls */
.cd-page-header-card .cd-header-search-form input[name="q"][placeholder="Search calls..."],
.cd-page-header-card .cd-header-search-form select[name="per_page"],
.cd-page-header-card .cd-header-search-form button {
    min-height: 34px;
    height: 34px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.cd-page-header-card .cd-header-search-form input[name="q"][placeholder="Search calls..."] {
    max-width: 250px;
}

/* Tasks page source accent: normal task vs missed-call task */
.cd-task-expandable-row {
    border-left-width: 4px !important;
    border-left-style: solid !important;
}

.cd-task-row-standard {
    border-left-color: #2563eb !important;
}

.cd-task-row-missed-call {
    border-left-color: #ef4444 !important;
}

.cd-task-row-standard:hover {
    border-color: #2563eb !important;
    background: #fff !important;
}

.cd-task-row-standard[open] {
    border-color: #2563eb !important;
    background: #eff6ff !important;
}

.cd-task-row-missed-call:hover {
    border-color: #ef4444 !important;
    background: #fff !important;
}

.cd-task-row-missed-call[open] {
    border-color: #ef4444 !important;
    background: #fff7f7 !important;
}

/* Task source icons: keep task blue, missed-call red with small x */
.cd-task-row-standard .cd-task-row-source-icon,
.cd-task-row-missed-call .cd-task-row-source-icon {
    position: relative;
    font-size: 0 !important;
}

.cd-task-row-standard .cd-task-row-source-icon {
    background: #dbeafe !important;
    color: #2563eb !important;
}

.cd-task-row-standard .cd-task-row-source-icon::before {
    content: "✓";
    font-size: 14px;
    line-height: 1;
}

.cd-task-row-missed-call .cd-task-row-source-icon {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}

.cd-task-row-missed-call .cd-task-row-source-icon::before {
    content: "☎";
    font-size: 13px;
    line-height: 1;
}

.cd-task-row-missed-call .cd-task-row-source-icon::after {
    content: "×";
    position: absolute;
    right: 4px;
    top: 2px;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}

/* Task agenda accents by due section */
.cd-task-calendar-panel .cd-task-calendar-item {
    border-left-width: 4px !important;
    border-left-style: solid !important;
}

.cd-task-calendar-panel section:nth-of-type(1) .cd-task-calendar-item {
    border-left-color: #ef4444 !important;
}

.cd-task-calendar-panel section:nth-of-type(2) .cd-task-calendar-item {
    border-left-color: #22c55e !important;
}

.cd-task-calendar-panel section:nth-of-type(3) .cd-task-calendar-item {
    border-left-color: #2563eb !important;
}

/* Tasks page icon cleanup and agenda right-side accent */
.cd-task-row-source-icon {
    font-size: 0 !important;
}

.cd-task-row-source-icon::before,
.cd-task-row-source-icon::after {
    content: none !important;
    display: none !important;
}

.cd-task-source-svg {
    width: 17px;
    height: 17px;
    display: block;
}

.cd-task-row-standard .cd-task-row-source-icon {
    background: #dbeafe !important;
    color: #2563eb !important;
}

.cd-task-row-missed-call .cd-task-row-source-icon {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}

/* Task agenda cards use right-side timing accent */
.cd-task-calendar-panel .cd-task-calendar-item {
    border-left-width: 1px !important;
    border-left-style: solid !important;
    border-left-color: #e2e8f0 !important;
    border-right-width: 4px !important;
    border-right-style: solid !important;
}

.cd-task-calendar-panel section:nth-of-type(1) .cd-task-calendar-item {
    border-right-color: #ef4444 !important;
}

.cd-task-calendar-panel section:nth-of-type(2) .cd-task-calendar-item {
    border-right-color: #22c55e !important;
}

.cd-task-calendar-panel section:nth-of-type(3) .cd-task-calendar-item {
    border-right-color: #2563eb !important;
}

/* Tasks page final source icons: match Customer Detail Activity line-icon style */
.cd-task-row-source-icon {
    width: 26px !important;
    height: 26px !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
}

.cd-task-row-source-icon::before,
.cd-task-row-source-icon::after {
    content: none !important;
    display: none !important;
}

.cd-task-source-svg {
    width: 17px !important;
    height: 17px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.cd-task-source-svg path {
    fill: none !important;
    stroke: currentColor !important;
}

.cd-task-row-standard .cd-task-row-source-icon {
    background: #eff6ff !important;
    color: #2563eb !important;
}

.cd-task-row-missed-call .cd-task-row-source-icon {
    background: #fff1f2 !important;
    color: #dc2626 !important;
}

/* Task agenda final hover behavior: right accent only */
.cd-task-calendar-panel .cd-task-calendar-item {
    border-left-width: 1px !important;
    border-left-style: solid !important;
    border-left-color: #e2e8f0 !important;
    border-right-width: 4px !important;
    border-right-style: solid !important;
}

/* Overdue: red right accent and red hover */
.cd-task-calendar-panel section:nth-of-type(1) .cd-task-calendar-item {
    border-right-color: #ef4444 !important;
}

.cd-task-calendar-panel section:nth-of-type(1) .cd-task-calendar-item:hover {
    border-color: #ef4444 !important;
    background: #fff7f7 !important;
}

/* Today: green right accent and green hover */
.cd-task-calendar-panel section:nth-of-type(2) .cd-task-calendar-item {
    border-right-color: #22c55e !important;
}

.cd-task-calendar-panel section:nth-of-type(2) .cd-task-calendar-item:hover {
    border-color: #22c55e !important;
    background: #f0fdf4 !important;
}

/* Upcoming: blue right accent and blue hover */
.cd-task-calendar-panel section:nth-of-type(3) .cd-task-calendar-item {
    border-right-color: #2563eb !important;
}

.cd-task-calendar-panel section:nth-of-type(3) .cd-task-calendar-item:hover {
    border-color: #2563eb !important;
    background: #eff6ff !important;
}

/* Keep the left side non-accented even on hover */
.cd-task-calendar-panel section:nth-of-type(1) .cd-task-calendar-item:hover,
.cd-task-calendar-panel section:nth-of-type(2) .cd-task-calendar-item:hover,
.cd-task-calendar-panel section:nth-of-type(3) .cd-task-calendar-item:hover {
    border-left-color: #e2e8f0 !important;
}

/* Task agenda final border behavior: right accent normally, full outline on hover */
.cd-task-calendar-panel .cd-task-calendar-item {
    border: 1px solid #e2e8f0 !important;
    border-right-width: 4px !important;
    background: #fff !important;
}

/* Normal state: only right side carries meaning */
.cd-task-calendar-panel section:nth-of-type(1) .cd-task-calendar-item {
    border-right-color: #ef4444 !important;
}

.cd-task-calendar-panel section:nth-of-type(2) .cd-task-calendar-item {
    border-right-color: #22c55e !important;
}

.cd-task-calendar-panel section:nth-of-type(3) .cd-task-calendar-item {
    border-right-color: #2563eb !important;
}

/* Hover state: full outline carries meaning, right side stays thicker */
.cd-task-calendar-panel section:nth-of-type(1) .cd-task-calendar-item:hover {
    border-color: #ef4444 !important;
    border-right-width: 4px !important;
    background: #fff7f7 !important;
}

.cd-task-calendar-panel section:nth-of-type(2) .cd-task-calendar-item:hover {
    border-color: #22c55e !important;
    border-right-width: 4px !important;
    background: #f0fdf4 !important;
}

.cd-task-calendar-panel section:nth-of-type(3) .cd-task-calendar-item:hover {
    border-color: #2563eb !important;
    border-right-width: 4px !important;
    background: #eff6ff !important;
}

/* Task agenda final correction: neutral left border in normal view */
.cd-task-calendar-panel section:nth-of-type(1) .cd-task-calendar-item:not(:hover),
.cd-task-calendar-panel section:nth-of-type(2) .cd-task-calendar-item:not(:hover),
.cd-task-calendar-panel section:nth-of-type(3) .cd-task-calendar-item:not(:hover) {
    border-left-color: #e2e8f0 !important;
}

/* Keep normal right accent only */
.cd-task-calendar-panel section:nth-of-type(1) .cd-task-calendar-item:not(:hover) {
    border-top-color: #e2e8f0 !important;
    border-bottom-color: #e2e8f0 !important;
    border-right-color: #ef4444 !important;
}

.cd-task-calendar-panel section:nth-of-type(2) .cd-task-calendar-item:not(:hover) {
    border-top-color: #e2e8f0 !important;
    border-bottom-color: #e2e8f0 !important;
    border-right-color: #22c55e !important;
}

.cd-task-calendar-panel section:nth-of-type(3) .cd-task-calendar-item:not(:hover) {
    border-top-color: #e2e8f0 !important;
    border-bottom-color: #e2e8f0 !important;
    border-right-color: #2563eb !important;
}

/* Hover remains full outline with right accent */
.cd-task-calendar-panel section:nth-of-type(1) .cd-task-calendar-item:hover {
    border-color: #ef4444 !important;
    border-right-width: 4px !important;
    background: #fff7f7 !important;
}

.cd-task-calendar-panel section:nth-of-type(2) .cd-task-calendar-item:hover {
    border-color: #22c55e !important;
    border-right-width: 4px !important;
    background: #f0fdf4 !important;
}

.cd-task-calendar-panel section:nth-of-type(3) .cd-task-calendar-item:hover {
    border-color: #2563eb !important;
    border-right-width: 4px !important;
    background: #eff6ff !important;
}

/* Tasks page status/priority badges: colored outline only */
.cd-task-status-badge,
.cd-task-priority-badge {
    border-width: 1px !important;
    border-style: solid !important;
}

/* Status badge outline colors only */
.cd-task-status-new {
    border-color: #38bdf8 !important;
}

.cd-task-status-assigned {
    border-color: #2563eb !important;
}

.cd-task-status-in_progress {
    border-color: #f59e0b !important;
}

.cd-task-status-called_back {
    border-color: #14b8a6 !important;
}

.cd-task-status-closed {
    border-color: #16a34a !important;
}

.cd-task-status-ignored {
    border-color: #64748b !important;
}

/* Priority badge outline colors only */
.cd-task-priority-low {
    border-color: #93c5fd !important;
}

.cd-task-priority-normal {
    border-color: #22c55e !important;
}

.cd-task-priority-high {
    border-color: #ef4444 !important;
}

/* Tasks page badge outline support: keep original fill/text, only make border visible */
.cd-task-status-badge,
.cd-task-priority-badge {
    border-width: 1px !important;
    border-style: solid !important;
}

/* Tasks page queue column adjustment: give Status a little more room */
.cd-task-list-header,
.cd-task-expandable-row summary {
    grid-template-columns: 32px 145px 96px 86px minmax(220px, 1fr) 170px 150px 145px !important;
}

.cd-task-list-header.cd-task-scope-my,
.cd-task-expandable-row.cd-task-scope-my summary {
    grid-template-columns: 32px 145px 96px 86px minmax(260px, 1fr) 180px 145px !important;
}

.cd-task-status-badge {
    min-width: 72px;
    text-align: center;
    justify-content: center;
}

/* Users page layout */
.cd-user-create-card,
.cd-user-overview-card,
.cd-user-work-card {
    border-radius: var(--cd-radius-card) !important;
}

.cd-user-create-card-header,
.cd-user-list-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cd-user-create-card-header h2,
.cd-user-list-header-row h2 {
    margin: 0;
}

.cd-user-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

.cd-user-form-action {
    display: flex;
    align-items: end;
}

.cd-user-form-action button {
    min-height: 38px;
    white-space: nowrap;
}

.cd-user-overview-chips {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.cd-user-overview-chips span {
    border: 1px solid #dbeafe;
    border-radius: 4px;
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 10px;
}

.cd-user-overview-bars {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.cd-user-overview-bar {
    height: 12px;
    background: #e2e8f0;
    border-radius: 0 !important;
    overflow: hidden;
    display: flex;
}

.cd-user-overview-bar span {
    display: block;
    height: 100%;
    border-radius: 0 !important;
}

.cd-user-role-admin-segment { background: #22c55e; }
.cd-user-role-agent-segment { background: #2563eb; }
.cd-user-active-segment { background: #22c55e; }
.cd-user-inactive-segment { background: #94a3b8; }

.cd-user-list-header,
.cd-user-expandable-row summary {
    display: grid;
    grid-template-columns: 32px minmax(180px, 1fr) minmax(220px, 1.2fr) 88px 90px minmax(140px, .8fr) minmax(130px, .8fr) 85px;
    gap: 10px;
    align-items: center;
}

.cd-user-list-header {
    padding: 0 12px 6px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 6px;
}

.cd-user-expandable-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cd-user-expandable-row {
    border: 1px solid #dbeafe;
    border-left: 4px solid #2563eb;
    border-radius: var(--cd-radius-panel) !important;
    background: #fff;
    overflow: hidden;
}

.cd-user-expandable-row summary {
    cursor: pointer;
    list-style: none;
    padding: 10px 12px;
}

.cd-user-expandable-row summary::-webkit-details-marker {
    display: none;
}

.cd-user-expandable-row:hover {
    border-color: #2563eb;
    background: #fff;
}

.cd-user-expandable-row[open] {
    border-color: #2563eb;
    background: #eff6ff;
}

.cd-user-row-inactive {
    border-left-color: #94a3b8;
}

.cd-user-row-inactive:hover,
.cd-user-row-inactive[open] {
    border-color: #94a3b8;
}

.cd-user-row-inactive[open] {
    background: #f8fafc;
}

.cd-user-row-icon {
    width: 26px;
    height: 26px;
    border-radius: var(--cd-radius-badge) !important;
    background: #eff6ff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
}

.cd-user-row-admin .cd-user-row-icon {
    background: #dcfce7;
    color: #15803d;
}

.cd-user-row-inactive .cd-user-row-icon {
    background: #f1f5f9;
    color: #64748b;
}

.cd-user-row-name,
.cd-user-row-email,
.cd-user-row-extension,
.cd-user-row-position,
.cd-user-row-phone {
    color: #475569;
    font-size: 13px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cd-user-row-name {
    color: #0f172a;
    font-weight: 700;
}

.cd-user-expanded-body {
    padding: 0 12px 12px 52px;
}

.cd-user-edit-form {
    margin: 0;
}

.cd-user-secondary-action {
    margin: 10px 0 0;
}

.cd-user-warning-box {
    border: 1px solid #f59e0b;
    background: #fffbeb;
    padding: 12px;
    border-radius: var(--cd-radius-panel) !important;
}

@media (max-width: 1200px) {
    .cd-user-overview-bars,
    .cd-user-form-grid {
        grid-template-columns: 1fr;
    }

    .cd-user-list-header {
        display: none;
    }

    .cd-user-expandable-row summary {
        grid-template-columns: 32px 1fr;
    }

    .cd-user-row-email,
    .cd-user-row-extension,
    .cd-user-row-position,
    .cd-user-row-phone {
        grid-column: 2;
    }

    .cd-user-expanded-body {
        padding-left: 12px;
    }
}

/* Users page admin row color and action alignment */
.cd-user-expandable-row.cd-user-row-admin:not(.cd-user-row-inactive) {
    border-left-color: #22c55e !important;
}

.cd-user-expandable-row.cd-user-row-admin:not(.cd-user-row-inactive):hover {
    border-color: #22c55e !important;
    background: #fff !important;
}

.cd-user-expandable-row.cd-user-row-admin:not(.cd-user-row-inactive)[open] {
    border-color: #22c55e !important;
    background: #f0fdf4 !important;
}

.cd-user-expandable-row.cd-user-row-admin:not(.cd-user-row-inactive) .cd-user-row-icon {
    background: #dcfce7 !important;
    color: #15803d !important;
}

/* Keep agents blue */
.cd-user-expandable-row.cd-user-row-agent:not(.cd-user-row-inactive) {
    border-left-color: #2563eb !important;
}

.cd-user-expandable-row.cd-user-row-agent:not(.cd-user-row-inactive):hover {
    border-color: #2563eb !important;
    background: #fff !important;
}

.cd-user-expandable-row.cd-user-row-agent:not(.cd-user-row-inactive)[open] {
    border-color: #2563eb !important;
    background: #eff6ff !important;
}

/* Put secondary action on the same visual action row, right side */
.cd-user-expanded-body {
    position: relative;
}

.cd-user-secondary-action {
    position: absolute;
    right: 12px;
    bottom: 12px;
    margin: 0 !important;
}

.cd-user-secondary-action button {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #fff !important;
}

.cd-user-secondary-action button:hover {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
}

/* Keep enough right-side space so Save and Deactivate do not collide */
.cd-user-edit-form .cd-user-form-grid {
    padding-right: 130px;
}

@media (max-width: 1200px) {
    .cd-user-secondary-action {
        position: static;
        margin-top: 10px !important;
    }

    .cd-user-edit-form .cd-user-form-grid {
        padding-right: 0;
    }
}

/* Users page: center Role and Status columns/badges */
.cd-user-list-header span:nth-child(4),
.cd-user-list-header span:nth-child(8) {
    text-align: center;
}

.cd-user-expandable-row summary > .cd-meta-badge {
    justify-self: center;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 86px;
    text-align: center !important;
}

/* Users page: rebalance Email / Role / Extension columns */
.cd-user-list-header,
.cd-user-expandable-row summary {
    grid-template-columns:
        32px
        minmax(180px, 1fr)
        minmax(190px, .85fr)
        105px
        105px
        minmax(140px, .75fr)
        minmax(130px, .75fr)
        90px !important;
    column-gap: 12px !important;
}

/* Center Role, Extension, and Status columns */
.cd-user-list-header span:nth-child(4),
.cd-user-list-header span:nth-child(5),
.cd-user-list-header span:nth-child(8),
.cd-user-expandable-row summary > .cd-meta-badge,
.cd-user-row-extension {
    text-align: center !important;
    justify-self: center !important;
}

.cd-user-row-extension {
    width: 100%;
}

/* Users page role/status color separation */
.cd-user-role-admin-segment {
    background: #8b5cf6 !important;
}

.cd-user-role-agent-segment {
    background: #2563eb !important;
}

.cd-user-active-segment {
    background: #22c55e !important;
}

.cd-user-inactive-segment {
    background: #ef4444 !important;
}

/* Overview chips follow the same colors */
.cd-user-overview-chips span:nth-child(1) {
    border-color: #c4b5fd !important;
    color: #6d28d9 !important;
    background: #f5f3ff !important;
}

.cd-user-overview-chips span:nth-child(2) {
    border-color: #93c5fd !important;
    color: #1d4ed8 !important;
    background: #eff6ff !important;
}

.cd-user-overview-chips span:nth-child(3) {
    border-color: #86efac !important;
    color: #15803d !important;
    background: #f0fdf4 !important;
}

.cd-user-overview-chips span:nth-child(4) {
    border-color: #fca5a5 !important;
    color: #dc2626 !important;
    background: #fff7f7 !important;
}

/* Role badges */
.cd-user-role-badge,
.cd-user-status-badge {
    border-width: 1px !important;
    border-style: solid !important;
}

.cd-user-role-admin-badge {
    border-color: #8b5cf6 !important;
    color: #6d28d9 !important;
}

.cd-user-role-agent-badge {
    border-color: #2563eb !important;
    color: #1d4ed8 !important;
}

/* Status badges */
.cd-user-status-active-badge {
    border-color: #22c55e !important;
    color: #15803d !important;
}

.cd-user-status-inactive-badge {
    border-color: #ef4444 !important;
    color: #dc2626 !important;
}

/* Admin rows use purple now, because green is reserved for Active status */
.cd-user-expandable-row.cd-user-row-admin:not(.cd-user-row-inactive) {
    border-left-color: #8b5cf6 !important;
}

.cd-user-expandable-row.cd-user-row-admin:not(.cd-user-row-inactive):hover {
    border-color: #8b5cf6 !important;
    background: #fff !important;
}

.cd-user-expandable-row.cd-user-row-admin:not(.cd-user-row-inactive)[open] {
    border-color: #8b5cf6 !important;
    background: #f5f3ff !important;
}

.cd-user-expandable-row.cd-user-row-admin:not(.cd-user-row-inactive) .cd-user-row-icon {
    background: #ede9fe !important;
    color: #7c3aed !important;
}

/* Inactive rows keep inactive red/gray status meaning stronger than role */
.cd-user-row-inactive {
    border-left-color: #ef4444 !important;
}

.cd-user-row-inactive:hover {
    border-color: #ef4444 !important;
    background: #fff !important;
}

.cd-user-row-inactive[open] {
    border-color: #ef4444 !important;
    background: #fff7f7 !important;
}

.cd-user-row-inactive .cd-user-row-icon {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}

/* Users page: Admin color final override to dark gray */
.cd-user-role-admin-segment {
    background: #334155 !important;
}

.cd-user-overview-chips span:nth-child(1) {
    border-color: #94a3b8 !important;
    color: #1f2937 !important;
    background: #f8fafc !important;
}

.cd-user-role-admin-badge {
    border-color: #334155 !important;
    color: #1f2937 !important;
}

.cd-user-expandable-row.cd-user-row-admin:not(.cd-user-row-inactive) {
    border-left-color: #334155 !important;
}

.cd-user-expandable-row.cd-user-row-admin:not(.cd-user-row-inactive):hover {
    border-color: #334155 !important;
    background: #fff !important;
}

.cd-user-expandable-row.cd-user-row-admin:not(.cd-user-row-inactive)[open] {
    border-color: #334155 !important;
    background: #f8fafc !important;
}

.cd-user-expandable-row.cd-user-row-admin:not(.cd-user-row-inactive) .cd-user-row-icon {
    background: #f1f5f9 !important;
    color: #334155 !important;
}

/* Account pill: keep tenant/company selector visually stable */
.cd-account-pill {
    min-width: 190px !important;
    max-width: 340px !important;
    justify-content: space-between !important;
}

.cd-account-pill-title {
    flex: 1 1 auto !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.cd-account-pill-caret {
    flex: 0 0 auto !important;
    margin-left: 10px !important;
}

/* Account pill: right-align tenant name and make dropdown arrow clearer */
.cd-account-pill {
    min-width: 190px !important;
    max-width: 340px !important;
    justify-content: flex-end !important;
    gap: 6px !important;
}

.cd-account-pill-title {
    flex: 1 1 auto !important;
    text-align: right !important;
    padding-right: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.cd-account-pill-caret {
    flex: 0 0 auto !important;
    margin-left: 2px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    opacity: 1 !important;
    color: currentColor !important;
}

/* Account pill: centered tenant name with balanced spacing */
.cd-account-pill {
    min-width: 190px !important;
    max-width: 340px !important;
    display: inline-grid !important;
    grid-template-columns: 24px minmax(0, 1fr) 24px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
}

.cd-account-pill-title {
    grid-column: 2 !important;
    text-align: center !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.cd-account-pill-caret {
    grid-column: 3 !important;
    justify-self: center !important;
    margin-left: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    opacity: 1 !important;
    color: currentColor !important;
}

/* Dashboard overview cards */
.cd-dashboard-hero {
    margin-bottom: 16px;
}

.cd-dashboard-hero h1 {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
}

.cd-dashboard-hero p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 13px;
}

.cd-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}

.cd-dashboard-card {
    min-width: 0;
}

.cd-dashboard-agenda-card {
    grid-column: 3;
    grid-row: 1 / span 2;
}

.cd-dashboard-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.cd-dashboard-card-header h2 {
    margin: 0;
    font-size: 17px;
    line-height: 1.25;
}

.cd-dashboard-card-header p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 12px;
}

.cd-dashboard-card-header a {
    font-size: 12px;
    white-space: nowrap;
    text-decoration: none;
}

.cd-dashboard-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.cd-dashboard-filter {
    border: 1px solid #dbe4ef;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    text-decoration: none;
    color: #475569;
    background: #fff;
}

.cd-dashboard-filter:hover,
.cd-dashboard-filter.is-active {
    border-color: #2563eb;
    color: #1d4ed8;
    background: #eff6ff;
}

.cd-dashboard-bar-group {
    margin-top: 14px;
}

.cd-dashboard-bar-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 12px;
    color: #475569;
}

.cd-dashboard-bar-title strong {
    color: #0f172a;
}

.cd-dashboard-bar {
    display: flex;
    height: 10px;
    width: 100%;
    overflow: hidden;
    border-radius: 0;
    background: #eef2f7;
}

.cd-dashboard-segment {
    display: block;
    min-width: 4px;
    height: 100%;
}

.cd-dashboard-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 8px;
    font-size: 12px;
    color: #475569;
}

.cd-dashboard-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.cd-dashboard-legend i {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 2px;
}

.cd-dashboard-legend strong {
    color: #0f172a;
    font-weight: 600;
}

.cd-dash-success { background: #22c55e !important; }
.cd-dash-problem { background: #ef4444 !important; }
.cd-dash-warning { background: #f59e0b !important; }
.cd-dash-neutral { background: #94a3b8 !important; }

.cd-dash-status-new { background: #38bdf8 !important; }
.cd-dash-status-assigned { background: #2563eb !important; }
.cd-dash-status-progress { background: #f59e0b !important; }
.cd-dash-status-called { background: #14b8a6 !important; }

.cd-dash-priority-high { background: #ef4444 !important; }
.cd-dash-priority-normal { background: #22c55e !important; }
.cd-dash-priority-low { background: #93c5fd !important; }

.cd-dash-role-admin { background: #334155 !important; }
.cd-dash-role-agent { background: #2563eb !important; }
.cd-dash-status-active { background: #22c55e !important; }
.cd-dash-status-inactive { background: #ef4444 !important; }

.cd-dash-contact-0 { background: #2563eb !important; }
.cd-dash-contact-1 { background: #22c55e !important; }
.cd-dash-contact-2 { background: #f59e0b !important; }
.cd-dash-contact-3 { background: #14b8a6 !important; }
.cd-dash-contact-4 { background: #94a3b8 !important; }
.cd-dash-contact-5 { background: #ef4444 !important; }

.cd-dashboard-agenda-section {
    margin-top: 14px;
}

.cd-dashboard-agenda-section h3 {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
}

.cd-dashboard-agenda-item {
    display: block;
    padding: 9px 10px;
    margin-bottom: 8px;
    border: 1px solid #dbe4ef;
    border-right-width: 4px;
    border-radius: 4px;
    text-decoration: none;
    background: #fff;
}

.cd-dashboard-agenda-item strong {
    display: block;
    color: #0f172a;
    font-size: 13px;
    line-height: 1.25;
}

.cd-dashboard-agenda-item span {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
}

.cd-agenda-overdue .cd-dashboard-agenda-item {
    border-right-color: #ef4444;
}

.cd-agenda-overdue .cd-dashboard-agenda-item:hover {
    border-color: #ef4444;
    background: #fff7f7;
}

.cd-agenda-today .cd-dashboard-agenda-item {
    border-right-color: #22c55e;
}

.cd-agenda-today .cd-dashboard-agenda-item:hover {
    border-color: #22c55e;
    background: #f0fdf4;
}

.cd-agenda-upcoming .cd-dashboard-agenda-item {
    border-right-color: #2563eb;
}

.cd-agenda-upcoming .cd-dashboard-agenda-item:hover {
    border-color: #2563eb;
    background: #eff6ff;
}

.cd-dashboard-empty {
    margin: 0 0 8px;
    padding: 8px 10px;
    border: 1px dashed #dbe4ef;
    border-radius: 4px;
    color: #94a3b8;
    font-size: 12px;
    background: #f8fafc;
}

@media (max-width: 1200px) {
    .cd-dashboard-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .cd-dashboard-agenda-card {
        grid-column: 1 / -1;
        grid-row: auto;
    }
}

@media (max-width: 800px) {
    .cd-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

/* Dashboard spacing fix: separate main cards from agenda rail */
.cd-dashboard-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 16px !important;
    align-items: start !important;
}

.cd-dashboard-main-cards {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 16px !important;
    min-width: 0 !important;
}

.cd-dashboard-agenda-card {
    grid-column: auto !important;
    grid-row: auto !important;
}

@media (max-width: 1200px) {
    .cd-dashboard-grid {
        grid-template-columns: 1fr !important;
    }

    .cd-dashboard-main-cards {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    }

    .cd-dashboard-agenda-card {
        grid-column: auto !important;
        grid-row: auto !important;
    }
}

@media (max-width: 800px) {
    .cd-dashboard-main-cards {
        grid-template-columns: 1fr !important;
    }
}

/* Dashboard tabs and clickable cards */
.cd-dashboard-card-header {
    margin-bottom: 12px !important;
}

.cd-dashboard-filter-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 20px !important;
    margin: 4px 0 16px !important;
    border-bottom: 1px solid #dbe4ef !important;
}

.cd-dashboard-filter {
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 0 0 8px !important;
    margin-bottom: -1px !important;
    background: transparent !important;
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.cd-dashboard-filter:hover {
    color: #1d4ed8 !important;
    background: transparent !important;
    border-bottom-color: #93c5fd !important;
}

.cd-dashboard-filter.is-active {
    color: #1d4ed8 !important;
    background: transparent !important;
    border-bottom-color: #2563eb !important;
}

.cd-dashboard-click-card {
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.cd-dashboard-click-card:hover {
    border-color: #93c5fd !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
}

.cd-dashboard-click-card a,
.cd-dashboard-click-card .cd-dashboard-filter {
    cursor: pointer;
}

.cd-dashboard-agenda-card .cd-dashboard-card-header {
    margin-bottom: 10px !important;
}

/* Dashboard: align Contacts single bar with Users first bar */
.cd-dashboard-card-contacts > .cd-dashboard-bar-title {
    margin-top: 14px !important;
}

/* Tasks page: widen Task Agenda to match dashboard agenda */
.cd-task-layout,
.cd-task-page-layout,
.cd-task-board-layout,
.cd-task-content-layout,
.cd-task-queue-agenda-layout {
    grid-template-columns: minmax(0, 1fr) 320px !important;
}

.cd-task-agenda-card,
.cd-task-calendar-card,
.cd-task-sidebar-card {
    width: 320px !important;
    min-width: 320px !important;
}

/* Take the extra space mainly from Due date column */
.cd-task-list-header,
.cd-task-expandable-row summary {
    grid-template-columns:
        32px
        145px
        96px
        86px
        minmax(220px, 1fr)
        170px
        150px
        115px !important;
}

/* My tasks view hides Assigned to, so keep the agenda wider there too */
.cd-task-list-header.cd-task-my-scope,
.cd-task-expandable-row.cd-task-my-scope summary,
.cd-task-list-header.is-my-scope,
.cd-task-expandable-row.is-my-scope summary {
    grid-template-columns:
        32px
        145px
        96px
        86px
        minmax(260px, 1fr)
        180px
        115px !important;
}

@media (max-width: 1200px) {
    .cd-task-layout,
    .cd-task-page-layout,
    .cd-task-board-layout,
    .cd-task-content-layout,
    .cd-task-queue-agenda-layout {
        grid-template-columns: 1fr !important;
    }

    .cd-task-agenda-card,
    .cd-task-calendar-card,
    .cd-task-sidebar-card {
        width: auto !important;
        min-width: 0 !important;
    }
}

/* Tasks page: give Task Agenda a little more width and rebalance queue columns */
.cd-task-layout,
.cd-task-page-layout,
.cd-task-board-layout,
.cd-task-content-layout,
.cd-task-queue-agenda-layout {
    grid-template-columns: minmax(0, 1fr) 340px !important;
}

.cd-task-agenda-card,
.cd-task-calendar-card,
.cd-task-sidebar-card {
    width: 340px !important;
    min-width: 340px !important;
}

/* Rebalance task queue columns:
   take space from Created / Customer / Assigned to / Due date,
   preserve more room for Task name and the wider agenda. */
.cd-task-list-header,
.cd-task-expandable-row summary {
    grid-template-columns:
        32px
        128px
        90px
        80px
        minmax(240px, 1fr)
        150px
        120px
        112px !important;
    column-gap: 12px !important;
}

/* My tasks view has no Assigned to column */
.cd-task-list-header.cd-task-my-scope,
.cd-task-expandable-row.cd-task-my-scope summary,
.cd-task-list-header.is-my-scope,
.cd-task-expandable-row.is-my-scope summary {
    grid-template-columns:
        32px
        128px
        90px
        80px
        minmax(280px, 1fr)
        150px
        112px !important;
    column-gap: 12px !important;
}

@media (max-width: 1200px) {
    .cd-task-layout,
    .cd-task-page-layout,
    .cd-task-board-layout,
    .cd-task-content-layout,
    .cd-task-queue-agenda-layout {
        grid-template-columns: 1fr !important;
    }

    .cd-task-agenda-card,
    .cd-task-calendar-card,
    .cd-task-sidebar-card {
        width: auto !important;
        min-width: 0 !important;
    }
}

/* Tasks page: center Status and Priority columns */
.cd-task-list-header span:nth-child(3),
.cd-task-list-header span:nth-child(4),
.cd-task-expandable-row summary > *:nth-child(3),
.cd-task-expandable-row summary > *:nth-child(4) {
    justify-self: center !important;
    text-align: center !important;
}

/* Keep status/priority badges visually centered inside their columns */
.cd-task-expandable-row summary > *:nth-child(3) .cd-meta-badge,
.cd-task-expandable-row summary > *:nth-child(4) .cd-meta-badge,
.cd-task-status-badge,
.cd-task-priority-badge {
    justify-content: center !important;
    text-align: center !important;
}

/* Tasks page: make Task Agenda card white with grey outline */
.cd-task-agenda-card,
.cd-task-calendar-card,
.cd-task-sidebar-card {
    background: #ffffff !important;
    border: 1px solid #dbe4ef !important;
    box-shadow: none !important;
}

.cd-task-agenda-card .cd-dashboard-empty,
.cd-task-calendar-card .cd-dashboard-empty,
.cd-task-sidebar-card .cd-dashboard-empty {
    background: #ffffff !important;
}

/* Tasks page: final white Task Agenda panel */
.cd-task-calendar-panel {
    background: #ffffff !important;
    border: 1px solid #dbe4ef !important;
    box-shadow: none !important;
}

.cd-task-calendar-panel section {
    background: #ffffff !important;
}

.cd-task-calendar-panel .empty {
    background: #ffffff !important;
}

/* Tasks page: stronger outline for white Task Agenda panel */
.cd-task-calendar-panel {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
}

.cd-task-calendar-panel h3 {
    color: #0f172a !important;
}

/* Tasks page: Task Queue and Task Agenda as sibling cards */
.cd-task-work-layout-split {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 16px !important;
    align-items: start !important;
}

.cd-task-work-layout-split .cd-task-queue-card {
    min-width: 0 !important;
}

.cd-task-work-layout-split .cd-task-calendar-panel.card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
    min-width: 0 !important;
}

.cd-task-work-layout-split .cd-task-calendar-panel section {
    background: #ffffff !important;
}

@media (max-width: 1200px) {
    .cd-task-work-layout-split {
        grid-template-columns: 1fr !important;
    }
}\n
/* Calls page: customer/contact context inside header */
.cd-page-context-back-link {
    display: inline-flex;
    margin-bottom: 8px;
    font-size: 13px;
    text-decoration: none;
}

.cd-page-context-subtitle {
    margin: 6px 0 0;
    font-size: 13px;
}\n
/* Conversation timeline page refresh */
.cd-conversation-timeline-header-card .cd-page-header-row {
    align-items: center;
}

.cd-conversation-timeline-header-form select {
    min-width: 160px;
}

.cd-conversation-timeline-card {
    margin-top: 16px;
}

.cd-conversation-timeline-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.cd-conversation-timeline-entry {
    border: 1px solid #dbe4ef;
    border-left-width: 4px;
    border-radius: 4px;
    background: #ffffff;
    padding: 11px 12px;
}

.cd-conversation-timeline-entry-call {
    border-left-color: #2563eb;
}

.cd-conversation-timeline-entry-note {
    border-left-color: #14b8a6;
}

.cd-conversation-timeline-entry-header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}

.cd-conversation-timeline-icon {
    width: 26px;
    height: 26px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.cd-conversation-timeline-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cd-conversation-timeline-icon-call {
    color: #1d4ed8;
    background: #eff6ff;
}

.cd-conversation-timeline-icon-note {
    color: #0f766e;
    background: #f0fdfa;
}

.cd-conversation-timeline-time {
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
}

.cd-conversation-timeline-title {
    min-width: 0;
    color: #334155;
}

.cd-conversation-timeline-details {
    margin-top: 9px;
    padding-left: 34px;
}

.cd-conversation-timeline-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    color: #475569;
    font-size: 13px;
    margin-bottom: 8px;
}

.cd-conversation-timeline-note-box {
    margin-top: 8px;
    padding: 8px 10px;
    border-left: 3px solid #dbe4ef;
    background: #f8fafc;
    border-radius: 4px;
}

.cd-conversation-timeline-note-box .muted {
    margin-bottom: 4px;
}

.cd-conversation-timeline-note-body {
    color: #0f172a;
    line-height: 1.45;
}

.cd-conversation-timeline-empty-note {
    margin: 0;
    padding: 8px 10px;
    border: 1px dashed #dbe4ef;
    border-radius: 4px;
    background: #f8fafc;
}\n
/* Conversation timeline final type colors */
.cd-conversation-timeline-entry-call {
    border-left-color: #22c55e !important;
    background: #f0fdf4 !important;
}

.cd-conversation-timeline-entry-task {
    border-left-color: #2563eb !important;
    background: #eff6ff !important;
}

.cd-conversation-timeline-entry-note {
    border-left-color: #f59e0b !important;
    background: #fffbeb !important;
}

.cd-conversation-timeline-icon-call {
    color: #15803d !important;
    background: #dcfce7 !important;
}

.cd-conversation-timeline-icon-task {
    color: #1d4ed8 !important;
    background: #dbeafe !important;
}

.cd-conversation-timeline-icon-note {
    color: #b45309 !important;
    background: #fef3c7 !important;
}

.cd-conversation-timeline-note-box {
    background: #ffffff !important;
    border-left-color: #dbe4ef !important;
}

.cd-conversation-timeline-entry-note .cd-conversation-timeline-details,
.cd-conversation-timeline-entry-task .cd-conversation-timeline-details {
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(203, 213, 225, .75);
    border-radius: 4px;
    padding: 9px 10px;
}\n
/* Page-level back link above header card */
.cd-page-preheader-link {
    margin: 0 0 8px;
}

.cd-page-preheader-link .cd-small-action-link {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    text-decoration: none;
}

/* Customer detail simple hero: same visual rhythm as standard page headers. */
.cd-customer-detail-hero-simple {
    margin-bottom: 16px;
}

/* Global card title standard: keep card headings smaller than page hero titles. */
.card > h2,
.card > h3,
.cd-card-header-row h2,
.cd-card-title-tabs h2,
.cd-task-overview-top h2,
.cd-task-work-card .cd-task-queue-header h2,
.cd-call-queue-header h2,
.cd-user-create-card-header h2,
.cd-user-list-header-row h2,
.cd-dashboard-card-header h2 {
    color: #0f172a;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
}

.card > h2,
.card > h3 {
    margin: 0 0 12px;
}

.cd-card-header-row h2,
.cd-card-title-tabs h2,
.cd-task-overview-top h2,
.cd-user-create-card-header h2,
.cd-user-list-header-row h2,
.cd-dashboard-card-header h2 {
    margin: 0;
}

.cd-task-work-card .cd-task-queue-header h2,
.cd-call-queue-header h2 {
    margin: 0 0 8px;
}

/* Page section titles: used for full-width page sections above their cards. */
.cd-section-title {
    margin: 0 0 8px 20px;
    color: #0f172a;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
}

/* Calls page overview: title outside, metric left, bars right. */
.cd-call-overview-card-horizontal {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    padding: 18px 22px;
}

.cd-call-overview-total-block {
    min-width: 0;
}

.cd-call-overview-total-number {
    color: #0f172a;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
}

.cd-call-queue-header-no-title {
    padding-top: 0;
}

@media (max-width: 900px) {
    .cd-section-title {
        margin-left: 0;
    }

    .cd-call-overview-card-horizontal {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* Calls overview parade alignment:
   total number aligns with title+bar block; label aligns with legend row. */
.cd-call-overview-card-horizontal {
    align-items: start;
}

.cd-call-overview-total-block {
    padding-top: 0;
}

.cd-call-overview-total-number {
    display: flex;
    align-items: center;
    height: 34px;
    margin: 0 0 6px;
    color: #0f172a;
    font-size: 30px;
    font-weight: 750;
    line-height: 1;
}

.cd-call-overview-total-block .muted {
    display: block;
    line-height: 16px;
}

.cd-call-overview-bar-block .cd-task-overview-bar-title {
    line-height: 16px;
    margin-bottom: 6px;
}

.cd-call-overview-bar {
    margin-bottom: 6px;
}

.cd-call-overview-bar-block .cd-task-overview-legend {
    line-height: 16px;
}

/* Calls overview: make "matching calls" easier to scan without overpowering the number. */
.cd-call-overview-total-block .muted {
    color: #334155;
    font-weight: 650;
}

/* Calls page hero search: compact utility controls aligned with the page title. */
.cd-page-header-card .cd-header-search-form {
    gap: 7px;
}

.cd-page-header-card .cd-header-search-form input[name="q"][placeholder="Search calls..."],
.cd-page-header-card .cd-header-search-form select[name="per_page"],
.cd-page-header-card .cd-header-search-form button {
    min-height: 32px;
    height: 32px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 13px;
    line-height: 1.2;
}

.cd-page-header-card .cd-header-search-form input[name="q"][placeholder="Search calls..."] {
    width: 230px;
    max-width: 230px;
}

.cd-page-header-card .cd-header-search-form select[name="per_page"] {
    width: 145px;
}

.cd-page-header-card .cd-header-search-form button {
    padding-left: 13px;
    padding-right: 13px;
}

/* Contacts page header: compact utility controls matching Calls page. */
.cd-contacts-page-header-card .cd-header-search-form {
    gap: 7px;
}

.cd-contacts-page-header-card .cd-header-search-form input[name="q"],
.cd-contacts-page-header-card .cd-header-search-form select[name="per_page"],
.cd-contacts-page-header-card .cd-header-search-form button,
.cd-contacts-page-header-card .cd-page-header-actions .btn {
    min-height: 32px;
    height: 32px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 13px;
    line-height: 1.2;
}

.cd-contacts-page-header-card .cd-header-search-form input[name="q"] {
    width: 230px;
    max-width: 230px;
}

.cd-contacts-page-header-card .cd-header-search-form select[name="per_page"] {
    width: 145px;
}

.cd-contacts-page-header-card .cd-header-search-form button,
.cd-contacts-page-header-card .cd-page-header-actions .btn {
    padding-left: 13px;
    padding-right: 13px;
}

.cd-contacts-page-header-card .cd-page-header-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Contacts overview parade alignment: total label aligns with status legend row. */
.cd-contacts-overview-card-horizontal {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    padding: 18px 22px;
}

.cd-contacts-overview-total-block {
    min-width: 0;
}

.cd-contacts-overview-card-horizontal .cd-contacts-overview-number {
    display: flex;
    align-items: center;
    height: 34px;
    margin: 0 0 6px;
    color: #0f172a;
    font-size: 30px;
    font-weight: 750;
    line-height: 1;
}

.cd-contacts-overview-card-horizontal .cd-contacts-overview-total-block .muted {
    display: block;
    color: #334155;
    font-weight: 650;
    line-height: 16px;
}

.cd-contacts-overview-bars {
    min-width: 0;
    padding-top: 16px;
}

.cd-contacts-overview-card-horizontal .cd-lead-status-bar {
    margin-bottom: 6px;
}

.cd-contacts-overview-card-horizontal .cd-lead-status-mini-row {
    margin-top: 0;
    line-height: 16px;
}

@media (max-width: 900px) {
    .cd-contacts-overview-card-horizontal {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .cd-contacts-overview-bars {
        padding-top: 0;
    }
}

/* Contacts overview: align the status bar/legend block with the left total block. */
.cd-contacts-overview-bars {
    padding-top: 22px;
}

/* Contacts overview: keep segmented status bar square, like Calls overview. */
.cd-contacts-overview-card-horizontal .cd-lead-status-bar,
.cd-contacts-overview-card-horizontal .cd-lead-status-segment,
.cd-contacts-overview-card-horizontal .cd-lead-status-empty {
    border-radius: 0 !important;
}

/* Contacts overview: keep bar higher, move only the legend row down to align with "total contacts". */
.cd-contacts-overview-bars {
    padding-top: 16px;
}

.cd-contacts-overview-card-horizontal .cd-lead-status-bar {
    margin-bottom: 13px;
}

/* Contacts overview single-bar alignment:
   one bar only, so keep bar+legend closer together and move the pair slightly down. */
.cd-contacts-overview-bars {
    padding-top: 20px;
}

.cd-contacts-overview-card-horizontal .cd-lead-status-bar {
    margin-bottom: 7px;
}

/* Contacts overview: move single bar + legend group slightly lower while keeping their internal spacing. */
.cd-contacts-overview-bars {
    padding-top: 24px;
}

.cd-contacts-overview-card-horizontal .cd-lead-status-bar {
    margin-bottom: 7px;
}

/* Contacts table: cleaner header row and bottom result summary. */
.cd-customers-table thead th {
    background: #ffffff;
    border-bottom: 1px solid #cbd5e1;
}

.cd-customers-table tbody tr:first-child td {
    border-top: 0;
}

.cd-results-summary-bottom {
    margin: 12px 0 0;
}

/* Calls table redesign: filter strip, clean column header, bottom summary. */
.cd-call-work-card .cd-call-queue-header-no-title {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--cd-radius-panel);
    padding: 8px 10px;
    margin: 0 0 12px;
}

.cd-call-work-card .cd-call-queue-header-no-title .cd-call-queue-controls {
    width: 100%;
    align-items: center;
}

.cd-call-work-card .cd-call-list-header {
    background: transparent !important;
    border-bottom: 1px solid #cbd5e1;
    color: #475467;
    padding-top: 8px;
    padding-bottom: 8px;
}

.cd-call-work-card .cd-call-list-header span {
    font-weight: 700;
}

.cd-call-row-customer strong {
    font-weight: 700;
}

.cd-call-row-customer a {
    color: #0f172a;
    text-decoration: none;
}

.cd-call-row-customer a:hover {
    text-decoration: underline;
}

.cd-call-work-card .cd-results-summary-bottom {
    margin: 12px 0 0;
}

/* Calls list column headers: match Contacts table header typography. */
.cd-call-work-card .cd-call-list-header {
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
}

.cd-call-work-card .cd-call-list-header span {
    color: #0f172a;
    font-weight: 700;
}

/* Contacts table phone numbers: match Calls table external number typography. */
.cd-customers-table td a.cd-click-to-call {
    font-size: 1.08rem;
    font-weight: 700;
    color: #00a9e0;
}

/* Contacts table phone numbers: keep same size as table row text, blue and bold. */
.cd-customers-table td a.cd-click-to-call {
    font-size: inherit;
    font-weight: 700;
    color: #00a9e0;
}

/* Contacts table: make lead-status badges a consistent minimum width. */
.cd-customers-table .cd-lead-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 94px;
    text-align: center;
}

/* Calls table badges: center text inside fixed-width direction/result badges. */
.cd-call-expandable-row summary .cd-meta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Calls table: center Direction/Result columns and give Contacts a little more breathing room. */
.cd-call-list-header,
.cd-call-expandable-row summary {
    grid-template-columns: 32px 132px 96px 118px minmax(230px, 1fr) minmax(170px, .9fr) minmax(140px, .8fr) 75px;
}

/* Header labels: Direction and Result centered above their badges. */
.cd-call-list-header span:nth-child(3),
.cd-call-list-header span:nth-child(4) {
    text-align: center;
    justify-self: center;
}

/* Row badges: keep Direction and Result centered inside their columns. */
.cd-call-expandable-row summary > span:nth-child(3),
.cd-call-expandable-row summary > span:nth-child(4) {
    justify-self: center;
}

/* Add a touch of visual separation before Contacts. */
.cd-call-list-header span:nth-child(5),
.cd-call-expandable-row summary > span:nth-child(5) {
    padding-left: 4px;
}

/* Calls table Result badges: use one uniform width based on "Not answered". */
.cd-call-expandable-row summary > .cd-meta-badge:nth-child(4) {
    width: 96px;
    min-width: 96px;
    justify-content: center;
    text-align: center;
}

/* Calls table Result badges: keep "Not answered" on one line. */
.cd-call-list-header,
.cd-call-expandable-row summary {
    grid-template-columns: 32px 126px 96px 128px minmax(230px, 1fr) minmax(170px, .9fr) minmax(140px, .8fr) 75px;
}

.cd-call-expandable-row summary > .cd-meta-badge:nth-child(4) {
    width: 112px;
    min-width: 112px;
    max-width: 112px;
    white-space: nowrap;
    justify-content: center;
    text-align: center;
}

/* Calls table footer: align results summary and pagination on one controlled row. */
.cd-call-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 12px;
    min-height: 30px;
}

.cd-call-table-footer .cd-results-summary-bottom {
    margin: 0;
}

.cd-call-table-footer .cd-pagination-row {
    margin: 0;
}

/* Calls table duration: centered numeric/time column. */
.cd-call-list-header span:nth-child(8),
.cd-call-expandable-row summary > span:nth-child(8) {
    justify-self: center;
    text-align: center;
}

.cd-call-row-duration {
    white-space: nowrap;
}

@media (max-width: 900px) {
    .cd-call-table-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Tasks page hero search: compact utility controls matching Contacts/Calls. */
.cd-tasks-page-header-card .cd-header-search-form {
    gap: 7px;
}

.cd-tasks-page-header-card .cd-header-search-form input[name="q"],
.cd-tasks-page-header-card .cd-header-search-form select[name="per_page"],
.cd-tasks-page-header-card .cd-header-search-form button,
.cd-tasks-page-header-card .cd-page-header-actions .btn {
    min-height: 32px;
    height: 32px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 13px;
    line-height: 1.2;
}

.cd-tasks-page-header-card .cd-header-search-form input[name="q"] {
    width: 230px;
    max-width: 230px;
}

.cd-tasks-page-header-card .cd-header-search-form select[name="per_page"] {
    width: 145px;
}

.cd-tasks-page-header-card .cd-header-search-form button,
.cd-tasks-page-header-card .cd-page-header-actions .btn {
    padding-left: 13px;
    padding-right: 13px;
}

.cd-tasks-page-header-card .cd-page-header-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Tasks overview parade layout: title outside, metric left, counters/bars right. */
.cd-task-overview-card-horizontal {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    padding: 18px 22px;
}

.cd-task-overview-total-block {
    min-width: 0;
}

.cd-task-overview-card-horizontal .cd-task-overview-total-number {
    display: flex;
    align-items: center;
    height: 34px;
    margin: 0 0 6px;
    color: #0f172a;
    font-size: 30px;
    font-weight: 750;
    line-height: 1;
}

.cd-task-overview-card-horizontal .cd-task-overview-total-block .muted {
    display: block;
    color: #334155;
    font-weight: 650;
    line-height: 16px;
}

.cd-task-overview-main {
    min-width: 0;
}

.cd-task-overview-card-horizontal .cd-task-overview-counters {
    justify-content: flex-end;
    margin-bottom: 12px;
}

.cd-task-overview-card-horizontal .cd-task-overview-bars {
    margin-top: 0;
}

.cd-task-overview-card-horizontal .cd-task-overview-bar {
    margin-bottom: 7px;
}

@media (max-width: 900px) {
    .cd-task-overview-card-horizontal {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .cd-task-overview-card-horizontal .cd-task-overview-counters {
        justify-content: flex-start;
    }
}

/* Tasks overview: align "matching tasks" with the status/priority legend row. */
.cd-task-overview-card-horizontal .cd-task-overview-total-number {
    height: 42px;
    margin-bottom: 7px;
}

.cd-task-overview-card-horizontal .cd-task-overview-total-block .muted {
    line-height: 16px;
}

/* Tasks overview: move the whole left metric block down and match Calls/Contacts metric size. */
.cd-task-overview-card-horizontal .cd-task-overview-total-block {
    padding-top: 18px;
}

.cd-task-overview-card-horizontal .cd-task-overview-total-number {
    display: flex;
    align-items: center;
    height: 34px;
    margin: 0 0 6px;
    color: #0f172a;
    font-size: 30px;
    font-weight: 750;
    line-height: 1;
}

.cd-task-overview-card-horizontal .cd-task-overview-total-block .muted {
    display: block;
    color: #334155;
    font-weight: 650;
    line-height: 16px;
}

/* Tasks overview: move the left metric block further down to align with the bar/legend area. */
.cd-task-overview-card-horizontal .cd-task-overview-total-block {
    padding-top: 42px;
}

/* Tasks overview: final nudge down for left metric block alignment. */
.cd-task-overview-card-horizontal .cd-task-overview-total-block {
    padding-top: 50px;
}

/* Task queue: footer aligned like Calls table footer. */
.cd-task-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 12px;
    min-height: 30px;
}

.cd-task-table-footer .cd-results-summary-bottom {
    margin: 0;
}

.cd-task-table-footer .cd-pagination-row {
    margin: 0;
}

/* Task queue badges: fixed width and centered text for parade-style scanning. */
.cd-task-expandable-row summary > .cd-task-status-badge,
.cd-task-expandable-row summary > .cd-task-priority-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

.cd-task-expandable-row summary > .cd-task-status-badge {
    width: 96px;
    min-width: 96px;
    max-width: 96px;
}

.cd-task-expandable-row summary > .cd-task-priority-badge {
    width: 72px;
    min-width: 72px;
    max-width: 72px;
}

.cd-task-list-header span:nth-child(3),
.cd-task-list-header span:nth-child(4),
.cd-task-expandable-row summary > span:nth-child(3),
.cd-task-expandable-row summary > span:nth-child(4) {
    justify-self: center;
    text-align: center;
}

/* Tasks page: Task queue section title outside the card, matching Calls/Contacts section style. */
.cd-task-queue-section {
    min-width: 0;
}

.cd-task-queue-section-title {
    margin-left: 20px;
}

/* Task queue filter strip: subtle gray row inside the card, title moved outside. */
.cd-task-work-card .cd-task-queue-header-no-title {
    background: #f8fafc;
    border: 1px solid #e2e8f0 !important;
    border-radius: var(--cd-radius-panel);
    padding: 8px 10px;
    margin: 0 0 12px;
}

.cd-task-work-card .cd-task-queue-header-no-title .cd-task-queue-controls {
    width: 100%;
    align-items: center;
}

/* Task queue column header: same clean table rhythm as Calls/Contacts. */
.cd-task-list-header {
    background: transparent !important;
    border-bottom: 1px solid #cbd5e1;
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
    padding-top: 8px;
    padding-bottom: 8px;
}

.cd-task-list-header span {
    color: #0f172a;
    font-weight: 700;
}

/* Task queue column rebalance for fixed badges and better scanning. */
.cd-task-list-header,
.cd-task-expandable-row summary {
    grid-template-columns:
        32px
        128px
        112px
        84px
        minmax(220px, 1fr)
        150px
        120px
        112px !important;
    column-gap: 12px !important;
}

.cd-task-list-header.cd-task-scope-my,
.cd-task-expandable-row.cd-task-scope-my summary {
    grid-template-columns:
        32px
        128px
        112px
        84px
        minmax(260px, 1fr)
        160px
        112px !important;
}

/* Task queue badges: fixed width and centered text. */
.cd-task-expandable-row summary > .cd-task-status-badge {
    width: 104px;
    min-width: 104px;
    max-width: 104px;
}

.cd-task-expandable-row summary > .cd-task-priority-badge {
    width: 72px;
    min-width: 72px;
    max-width: 72px;
}

.cd-task-expandable-row summary > .cd-task-status-badge,
.cd-task-expandable-row summary > .cd-task-priority-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

/* Center Status and Priority labels over their badges. */
.cd-task-list-header span:nth-child(3),
.cd-task-list-header span:nth-child(4),
.cd-task-expandable-row summary > span:nth-child(3),
.cd-task-expandable-row summary > span:nth-child(4) {
    justify-self: center;
    text-align: center;
}

/* Tasks page: Task agenda title outside its card, matching Task queue. */
.cd-task-agenda-section {
    min-width: 0;
}

.cd-task-agenda-section-title {
    margin-left: 14px;
}

.cd-task-calendar-panel-no-title {
    padding-top: 16px;
}

/* Dashboard: compact hero without subtitle. */
.cd-dashboard-hero-compact h1 {
    margin-bottom: 0;
}

/* Dashboard: subtle full-width tab strip only for Calls and Tasks cards. */
.cd-dashboard-card-calls .cd-dashboard-filter-row,
.cd-dashboard-card-tasks .cd-dashboard-filter-row {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: var(--cd-radius-panel) !important;
    padding: 8px 10px 0 !important;
    margin: 4px 0 16px !important;
}

/* Keep dashboard tabs as underline tabs inside the strip, without changing chart spacing below. */
.cd-dashboard-card-calls .cd-dashboard-filter,
.cd-dashboard-card-tasks .cd-dashboard-filter {
    padding-bottom: 8px !important;
}

/* Task queue: task name is not clickable here, so keep it regular row text. */
.cd-task-row-title {
    color: #0f172a;
    font-weight: 400;
}


/* Task queue: Contacts column is the clickable bold value, company first then contact fallback. */
.cd-task-row-contact-link {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    color: #1e293b;
    font-weight: 700;
    text-decoration: none;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.cd-task-row-contact-link:hover {
    color: #0369a1;
    text-decoration: underline;
}

/* Task queue: task name is not clickable here, so keep it regular row text. */
.cd-task-row-title {
    color: #0f172a;
    font-weight: 400;
}

/* Customer detail: test narrower right column and more readable company info values. */
.cd-customer-detail-layout {
    grid-template-columns: minmax(0, 1fr) 380px;
}

/* Company information card: labels stay steady, values no longer all look like primary bold actions. */
.cd-customer-info-card .cd-info-list > div {
    grid-template-columns: 122px minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
}

.cd-customer-info-card .cd-info-list > div > .muted {
    color: #475569;
    font-weight: 600;
}

.cd-customer-info-card .cd-info-list > div > strong,
.cd-customer-info-card .cd-info-list > div > span:not(.muted):not(.cd-lead-status-pill) {
    color: #0f172a;
    font-weight: 500;
    line-height: 1.35;
    text-align: right;
    overflow-wrap: anywhere;
}

/* Clickable values should still read as links/actions. */
.cd-customer-info-card .cd-info-list > div > a,
.cd-customer-info-card .cd-info-list a {
    color: #0369a1;
    font-weight: 650;
    text-align: right;
    overflow-wrap: anywhere;
}

/* Status badge remains visually distinct. */
.cd-customer-info-card .cd-info-list .cd-lead-status-pill {
    font-weight: 700;
}

/* Customer detail: compact reference-card links should be blue, regular-size, not oversized/bold. */
.cd-customer-info-card .cd-info-list > div > strong a,
.cd-customer-info-card .cd-info-list > div > strong a.cd-click-to-call {
    color: #0369a1 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-decoration: none;
}

.cd-customer-info-card .cd-info-list > div > strong a:hover,
.cd-customer-info-card .cd-info-list > div > strong a.cd-click-to-call:hover {
    color: #075985 !important;
    text-decoration: underline;
}

/* Keep normal quick-reference values calm; links use color, not heavy weight. */
.cd-customer-info-card .cd-info-list > div > strong {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
}


/* Customer detail: quick-reference external/contact links use SkyTel action blue. */
.cd-customer-info-card .cd-info-list > div > strong a,
.cd-customer-info-card .cd-info-list > div > strong a.cd-click-to-call {
    color: #00a9e0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-decoration: none;
}

.cd-customer-info-card .cd-info-list > div > strong a:hover,
.cd-customer-info-card .cd-info-list > div > strong a.cd-click-to-call:hover {
    color: #0098cc !important;
    text-decoration: underline;
}

/* Customer detail: site rule — phone numbers are SkyTel blue; other links stay dark and underline on hover. */

/* Default quick-reference links in Company information: email, website, internal/reference links. */
.cd-customer-info-card .cd-info-list > div > strong a {
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-decoration: none;
}

/* Phone number is the exception: phone-first action uses SkyTel blue. */
.cd-customer-info-card .cd-info-list > div > strong a.cd-click-to-call {
    color: #00a9e0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-decoration: none;
}

/* Hover behavior: underline clickable items; keep phone blue, darken normal links slightly. */
.cd-customer-info-card .cd-info-list > div > strong a:hover {
    color: #020617 !important;
    text-decoration: underline;
}

.cd-customer-info-card .cd-info-list > div > strong a.cd-click-to-call:hover {
    color: #0098cc !important;
    text-decoration: underline;
}


/* Customer detail: compact company contact cards. */
.cd-contact-info-card-compact {
    gap: 5px;
    padding: 10px 12px;
    border-radius: 10px;
}

.cd-contact-info-card-compact .cd-contact-info-card-header strong {
    color: #0f172a;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.25;
}

.cd-contact-compact-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 6px;
    color: #334155;
    font-size: 14px;
    line-height: 1.35;
}

.cd-contact-meta-separator {
    color: #94a3b8;
}

.cd-contact-phone-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
}

.cd-contact-info-card-compact .cd-contact-phone-link {
    color: #00a9e0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-decoration: none;
}

.cd-contact-info-card-compact .cd-contact-phone-link:hover {
    color: #0098cc !important;
    text-decoration: underline;
}

.cd-contact-email-link {
    color: #0f172a;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.cd-contact-email-link:hover {
    color: #020617;
    text-decoration: underline;
}


/* Customer detail: make compact contact separators easier to see. */
.cd-contact-meta-separator {
    color: #64748b;
    font-weight: 600;
    padding: 0 1px;
}


/* Customer detail: company contact cards use stacked compact lines for reliable wrapping. */
.cd-contact-compact-meta-stacked {
    display: grid;
    gap: 3px;
    color: #334155;
    font-size: 14px;
    line-height: 1.35;
}

.cd-contact-compact-line {
    min-width: 0;
    overflow-wrap: anywhere;
}

.cd-contact-info-card-compact {
    gap: 6px;
}

.cd-contact-phone-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 6px;
}

.cd-contact-email-link {
    color: #0f172a !important;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.cd-contact-email-link:hover {
    color: #020617 !important;
    text-decoration: underline;
}


/* Customer detail: keep contact phone and email on one compact methods line. */
.cd-contact-methods-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 6px;
    min-width: 0;
}

.cd-contact-methods-line .cd-contact-email-link {
    min-width: 0;
    overflow-wrap: anywhere;
}

.cd-contact-methods-line .cd-contact-meta-separator {
    color: #64748b;
    font-weight: 600;
}


/* Customer detail: existing company contact cards expand in place for View / Edit. */
.cd-contact-edit-details {
    cursor: pointer;
}

.cd-contact-edit-details > summary {
    display: grid;
    gap: 6px;
    cursor: pointer;
    list-style: none;
}

.cd-contact-edit-details > summary::-webkit-details-marker {
    display: none;
}

.cd-contact-edit-details[open] {
    background: #ffffff;
    border-color: #bfdbfe;
}

.cd-contact-edit-form {
    border-top: 1px solid #e2e8f0;
    margin-top: 10px;
    padding-top: 10px;
    cursor: default;
}

.cd-contact-edit-form label {
    margin-top: 4px;
}

.cd-contact-edit-form input,
.cd-contact-edit-form textarea {
    width: 100%;
}

/* Customer detail: make company contact cards clearly clickable on hover. */
.cd-contact-edit-details {
    transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.cd-contact-edit-details:hover {
    border-color: #93c5fd;
    box-shadow: 0 6px 14px rgba(15, 23, 42, .06);
    background: #ffffff;
}

.cd-contact-edit-details:hover .cd-contact-info-card-header strong {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.cd-contact-edit-details[open]:hover .cd-contact-info-card-header strong {
    text-decoration: none;
}

/* Customer detail: clickable company contact cards should not turn white on hover. */
.cd-contact-edit-details {
    background: #fbfdff;
}

.cd-contact-edit-details:hover {
    background: #f8fafc !important;
    border-color: #93c5fd;
    box-shadow: 0 3px 8px rgba(15, 23, 42, .04);
}

.cd-contact-edit-details[open] {
    background: #fbfdff !important;
    border-color: #bfdbfe;
}

.cd-contact-edit-details[open]:hover {
    background: #f8fafc !important;
    border-color: #93c5fd;
}


/* Customer detail right sidebar: titles outside cards. */
.cd-customer-detail-card-title-outside {
    margin: 14px 0 8px 14px;
    color: #0f172a;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.25;
}

.cd-customer-detail-card-title-outside:first-child {
    margin-top: 0;
}

.cd-card-title-outside {
    margin-top: 0;
}


/* Customer detail: profile change history title outside + scrollable compact card. */
.cd-profile-history-card {
    padding: 0;
}

.cd-profile-history-scroll {
    max-height: 220px;
    overflow-y: auto;
    padding: 14px 16px;
    scrollbar-gutter: stable;
}

.cd-profile-history-item {
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.cd-profile-history-item:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.cd-history-item-title {
    color: #0f172a;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.35;
}

.cd-history-item-body {
    color: #334155;
    font-size: 13px;
    line-height: 1.4;
}

.cd-history-item-meta {
    margin-top: 4px;
    font-size: 12px;
}

.cd-profile-history-created-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}


/* Customer detail: readable lead-status badges. Used by Company Information and history. */
.cd-lead-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    font-weight: 700 !important;
    line-height: 1.2;
}

.cd-lead-status-pill-new {
    background: #e0f2fe !important;
    border-color: #bae6fd !important;
    color: #0369a1 !important;
}

.cd-lead-status-pill-contacted {
    background: #eef2ff !important;
    border-color: #c7d2fe !important;
    color: #4338ca !important;
}

.cd-lead-status-pill-interested {
    background: #dcfce7 !important;
    border-color: #bbf7d0 !important;
    color: #166534 !important;
}

.cd-lead-status-pill-not_interested {
    background: #fee2e2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}

.cd-lead-status-pill-customer {
    background: #ccfbf1 !important;
    border-color: #99f6e4 !important;
    color: #0f766e !important;
}

.cd-lead-status-pill-closed {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}

/* Restore Customer lead-status badge to the approved dark-green style. */
.cd-lead-status-pill-customer {
    background: #15803d !important;
    border-color: #15803d !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Restore Contacted lead-status badge to approved dark-blue style. */
.cd-lead-status-pill-contacted {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* =====================================================
   Lead status color system — single source of truth
   Applies to Contacts overview, Dashboard Contacts card,
   contact/customer badges, and any lead-status history badges.
   Order: new, contacted, interested, not_interested, customer, closed.
   ===================================================== */

/* Contacts overview bar + legend dots */
.cd-lead-status-new {
    background: #bae6fd !important;
}

.cd-lead-status-contacted {
    background: #0284c7 !important;
}

.cd-lead-status-interested {
    background: #86efac !important;
}

.cd-lead-status-not-interested {
    background: #fca5a5 !important;
}

.cd-lead-status-customer {
    background: #16a34a !important;
}

.cd-lead-status-closed {
    background: #374151 !important;
}

/* Dashboard Contacts card uses index classes in lead-status order. */
.cd-dash-contact-0 {
    background: #bae6fd !important;
}

.cd-dash-contact-1 {
    background: #0284c7 !important;
}

.cd-dash-contact-2 {
    background: #86efac !important;
}

.cd-dash-contact-3 {
    background: #fca5a5 !important;
}

.cd-dash-contact-4 {
    background: #16a34a !important;
}

.cd-dash-contact-5 {
    background: #374151 !important;
}

/* Lead-status badges: same palette, adjusted for readable text. */
.cd-lead-status-pill-new {
    background: #e0f2fe !important;
    border-color: #bae6fd !important;
    color: #075985 !important;
    font-weight: 700 !important;
}

.cd-lead-status-pill-contacted {
    background: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

.cd-lead-status-pill-interested {
    background: #dcfce7 !important;
    border-color: #86efac !important;
    color: #166534 !important;
    font-weight: 700 !important;
}

.cd-lead-status-pill-not_interested {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #991b1b !important;
    font-weight: 700 !important;
}

.cd-lead-status-pill-customer {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

.cd-lead-status-pill-closed {
    background: #374151 !important;
    border-color: #374151 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}


/* Calls color system: Result badges use the same palette as Calls overview bars. */
.cd-call-result-badge {
    border: 1px solid transparent;
    font-weight: 700;
}

.cd-call-result-badge-ringing {
    background: #38bdf8 !important;
    border-color: #38bdf8 !important;
    color: #075985 !important;
}

.cd-call-result-badge-answered {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: #ffffff !important;
}

.cd-call-result-badge-completed {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
}

.cd-call-result-badge-missed {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
}

.cd-call-result-badge-busy,
.cd-call-result-badge-failed {
    background: #f97316 !important;
    border-color: #f97316 !important;
    color: #ffffff !important;
}

.cd-call-result-badge-unknown {
    background: #cbd5e1 !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}

/* Calls Result badges: neutral fill, status color only on outline. */
.cd-call-result-badge {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-width: 1px !important;
    border-style: solid !important;
    font-weight: 700 !important;
}

.cd-call-result-badge-ringing {
    border-color: #38bdf8 !important;
}

.cd-call-result-badge-answered,
.cd-call-result-badge-completed {
    border-color: #16a34a !important;
}

.cd-call-result-badge-missed {
    border-color: #ef4444 !important;
}

.cd-call-result-badge-busy,
.cd-call-result-badge-failed {
    border-color: #f97316 !important;
}

.cd-call-result-badge-unknown {
    border-color: #cbd5e1 !important;
}


/* Profile change history: title, changed fields, then timestamp/user. */
.cd-profile-history-change-list {
    display: grid;
    gap: 4px;
    margin: 4px 0 2px;
}

.cd-profile-history-change-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    min-width: 0;
}

.cd-profile-history-status-line {
    gap: 6px;
}

.cd-profile-history-field-label {
    color: #334155;
    font-weight: 600;
}

.cd-profile-history-value,
.cd-profile-history-detail-line {
    color: #0f172a;
}

.cd-profile-history-arrow {
    color: #64748b;
    font-weight: 700;
}

.cd-profile-history-item .cd-history-item-title {
    font-weight: 700;
    margin-bottom: 4px;
}

.cd-profile-history-item .cd-history-item-meta {
    margin-top: 5px;
}


/* Customer detail: Responsibility history title is outside; card content scrolls. */
.cd-responsibility-history-card {
    max-height: 220px;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.cd-responsibility-history-card .cd-history-item:first-child {
    margin-top: 0;
}


/* Page navigation links: triangle back/forward markers. */
.cd-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #00a9e0 !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

.cd-nav-link:hover {
    color: #0098cc !important;
    text-decoration: underline;
}

.cd-nav-link-back::before,
.cd-nav-link-forward::after {
    content: "";
    width: 0;
    height: 0;
    display: inline-block;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.cd-nav-link-back::before {
    border-right: 7px solid currentColor;
}

.cd-nav-link-forward::after {
    border-left: 7px solid currentColor;
}

/* Customer detail: keep back/view navigation links visually consistent. */
.cd-page-back-link .cd-nav-link,
.cd-customer-detail-main .cd-nav-link,
.cd-work-timeline-view-all.cd-nav-link {
    color: #00a9e0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

.cd-page-back-link .cd-nav-link:hover,
.cd-customer-detail-main .cd-nav-link:hover,
.cd-work-timeline-view-all.cd-nav-link:hover {
    color: #0098cc !important;
    text-decoration: underline !important;
}

.cd-work-timeline-view-all.cd-nav-link::after {
    border-left-color: currentColor !important;
}


/* Customer detail: Work timeline title outside, tabs like Calls/Tasks, balanced action buttons. */
.cd-work-timeline-title-outside {
    margin: 0 0 8px 14px;
    color: #0f172a;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.25;
}

.cd-work-timeline-card .cd-work-timeline-filter-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 10px 12px !important;
    margin-bottom: 12px !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 4px !important;
    background: #f8fafc !important;
}

.cd-work-timeline-filter-row > div:first-child,
.cd-work-timeline-tabs {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.cd-work-timeline-tabs > h2 {
    display: none !important;
}

.cd-work-timeline-tabs .cd-inline-card-tabs {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    min-height: 34px !important;
    border-bottom: 1px solid #dbe3ef !important;
}

.cd-work-timeline-tabs .cd-inline-card-tabs button {
    height: 34px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.cd-work-timeline-tabs .cd-inline-card-tabs button.is-active {
    color: #2563eb !important;
    border-bottom-color: #2563eb !important;
}

.cd-work-timeline-header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
}

.cd-work-timeline-header-actions .cd-work-action-button {
    box-sizing: border-box !important;
    height: 34px !important;
    min-width: 104px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    list-style: none !important;
}

.cd-work-timeline-header-actions .cd-work-action-button::-webkit-details-marker {
    display: none !important;
}

.cd-work-timeline-header-actions .cd-work-action-button-note {
    border: 1px solid #f59e0b !important;
}

.cd-work-timeline-header-actions .cd-work-action-button-task {
    border: 1px solid #93c5fd !important;
}

.cd-work-timeline-header-actions .cd-work-action-button-note:hover {
    border-color: #d97706 !important;
    background: #fffbeb !important;
}

.cd-work-timeline-header-actions .cd-work-action-button-task:hover {
    border-color: #60a5fa !important;
    background: #eff6ff !important;
}

.cd-work-timeline-header-actions .cd-work-action-icon {
    width: 15px !important;
    height: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.cd-work-timeline-header-actions .cd-work-action-svg-icon {
    width: 15px !important;
    height: 15px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.cd-work-timeline-header-actions .cd-work-action-button-note .cd-work-action-icon {
    color: #d97706 !important;
}

.cd-work-timeline-header-actions .cd-work-action-button-task .cd-work-action-icon {
    color: #2563eb !important;
}


/* Customer detail: Activity title outside and tabs aligned with Work timeline / Calls / Tasks. */
.cd-activity-title-outside {
    margin: 14px 0 8px 14px;
    color: #0f172a;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.25;
}

.cd-customer-detail-main .cd-activity-filter-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 10px 12px !important;
    margin-bottom: 12px !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 4px !important;
    background: #f8fafc !important;
}

.cd-activity-tabs {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.cd-activity-tabs .cd-inline-card-tabs {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    min-height: 34px !important;
    border-bottom: 1px solid #dbe3ef !important;
}

.cd-activity-tabs .cd-inline-card-tabs button {
    height: 34px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.cd-activity-tabs .cd-inline-card-tabs button.is-active {
    color: #2563eb !important;
    border-bottom-color: #2563eb !important;
}


/* Customer detail: corrected Activity title position and tab subcard styling. */
.cd-activity-title-outside {
    margin: 14px 0 8px 14px !important;
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
}

.cd-activity-filter-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 10px 12px !important;
    margin-bottom: 12px !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 4px !important;
    background: #f8fafc !important;
}

.cd-activity-tabs {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.cd-activity-tabs .cd-inline-card-tabs {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    min-height: 34px !important;
    border-bottom: 1px solid #dbe3ef !important;
}

.cd-activity-tabs .cd-inline-card-tabs button {
    height: 34px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.cd-activity-tabs .cd-inline-card-tabs button.is-active {
    color: #2563eb !important;
    border-bottom-color: #2563eb !important;
}


/* Customer detail: Work timeline task rows use mini Task Queue layout. */
.cd-work-timeline-item-task > summary {
    display: grid !important;
    grid-template-columns: 34px 142px 104px 86px minmax(160px, 1fr) 140px 150px !important;
    align-items: center !important;
    gap: 10px !important;
}

.cd-work-task-mini-icon {
    justify-self: center;
}

.cd-work-task-mini-created {
    min-width: 0;
    white-space: nowrap;
}

.cd-work-task-mini-status,
.cd-work-task-mini-priority {
    min-width: 76px;
    justify-content: center;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    border-width: 1px !important;
    border-style: solid !important;
}

.cd-work-task-mini-status {
    min-width: 94px;
}

.cd-work-task-mini-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #0f172a;
}

.cd-work-task-mini-assigned,
.cd-work-task-mini-due {
    min-width: 0;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cd-work-task-mini-assigned {
    font-weight: 500;
}

.cd-work-task-mini-due {
    text-align: left;
}

@media (max-width: 1200px) {
    .cd-work-timeline-item-task > summary {
        grid-template-columns: 34px 132px 94px 82px minmax(140px, 1fr) 120px !important;
    }

    .cd-work-task-mini-due {
        display: none;
    }
}

/* Customer detail Work timeline: show real Task Queue panel only when Tasks tab is active. */
.cd-work-task-queue-panel {
    display: none;
    margin-top: 16px;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="tasks"].is-active) .cd-work-task-queue-panel {
    display: block !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="tasks"].is-active) .cd-work-timeline-list {
    display: none !important;
}

.cd-work-task-queue-panel .cd-task-list-header,
.cd-work-task-queue-panel .cd-task-expandable-row > summary {
    grid-template-columns: 34px 146px 112px 86px minmax(190px, 1fr) 140px 150px !important;
}

.cd-work-task-queue-panel .cd-task-list-header {
    display: grid !important;
}

.cd-work-task-queue-panel .cd-task-expandable-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@media (max-width: 1300px) {
    .cd-work-task-queue-panel .cd-task-list-header,
    .cd-work-task-queue-panel .cd-task-expandable-row > summary {
        grid-template-columns: 34px 136px 104px 82px minmax(150px, 1fr) 120px !important;
    }

    .cd-work-task-queue-panel .cd-task-list-header span:last-child,
    .cd-work-task-queue-panel .cd-task-row-due {
        display: none !important;
    }
}

/* Customer detail Work timeline Tasks tab: scroll/height only. */
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="tasks"].is-active) .cd-work-task-queue-panel {
    max-height: 390px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 4px !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="tasks"].is-active) .cd-work-task-queue-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    background: #ffffff !important;
}


/* Customer detail Work timeline Calls tab: Call History style panel. */
.cd-work-call-queue-panel {
    display: none;
    margin-top: 16px;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="calls"].is-active) .cd-work-call-queue-panel {
    display: block !important;
    max-height: 620px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 4px !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="calls"].is-active) .cd-work-timeline-list {
    display: none !important;
}

.cd-work-call-queue-panel .cd-call-list-header,
.cd-work-call-queue-panel .cd-call-expandable-row > summary {
    grid-template-columns: 40px minmax(120px, 1fr) 100px 120px minmax(180px, 2fr) 130px 95px !important;
}

.cd-work-call-queue-panel .cd-call-list-header {
    display: grid !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    background: #ffffff !important;
}

.cd-work-call-queue-panel .cd-call-expandable-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.cd-work-call-empty {
    padding: 16px;
}

@media (max-width: 900px) {
    .cd-work-call-queue-panel .cd-call-list-header,
    .cd-work-call-queue-panel .cd-call-expandable-row > summary {
        grid-template-columns: 32px minmax(120px, 1fr) minmax(110px, 1fr) !important;
    }

    .cd-work-call-queue-panel .cd-call-list-header span:nth-child(3),
    .cd-work-call-queue-panel .cd-call-list-header span:nth-child(4),
    .cd-work-call-queue-panel .cd-call-list-header span:nth-child(6),
    .cd-work-call-queue-panel .cd-call-list-header span:nth-child(7),
    .cd-work-call-queue-panel .cd-call-row-agent,
    .cd-work-call-queue-panel .cd-call-row-duration {
        display: none !important;
    }
}


/* Customer detail Work timeline Notes tab: existing row cleanup. */
.cd-work-note-inline-header {
    display: none;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="notes"].is-active) .cd-work-note-inline-header {
    display: grid !important;
    grid-template-columns: 40px 180px minmax(240px, 1fr) !important;
    align-items: center !important;
    column-gap: 14px !important;
    padding: 10px 14px 8px 14px !important;
    border-bottom: 1px solid #d7e1ef !important;
    font-weight: 600 !important;
    background: #ffffff !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="notes"].is-active) .cd-work-timeline-item-note > summary {
    display: grid !important;
    grid-template-columns: 40px 180px minmax(240px, 1fr) !important;
    align-items: center !important;
    column-gap: 14px !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="notes"].is-active) .cd-work-note-pill {
    display: none !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="notes"].is-active) .cd-work-note-row-date-time,
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="notes"].is-active) .cd-work-note-row-name {
    font-weight: 400 !important;
    color: #1f2a44 !important;
}

@media (max-width: 900px) {
    .cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="notes"].is-active) .cd-work-note-inline-header,
    .cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="notes"].is-active) .cd-work-timeline-item-note > summary {
        grid-template-columns: 32px 150px minmax(150px, 1fr) !important;
        column-gap: 10px !important;
    }
}


/* Customer detail Work timeline All tab: unified table layout. */
.cd-work-all-inline-header {
    display: none;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-inline-header {
    display: grid !important;
    grid-template-columns: 40px 150px 118px 104px minmax(150px, 1fr) 118px 76px 126px !important;
    align-items: center !important;
    column-gap: 10px !important;
    padding: 10px 14px 8px 14px !important;
    border-bottom: 1px solid #d7e1ef !important;
    font-weight: 600 !important;
    background: #ffffff !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-timeline-item > summary {
    display: grid !important;
    grid-template-columns: 40px 150px 118px 104px minmax(150px, 1fr) 118px 76px 126px !important;
    align-items: center !important;
    column-gap: 10px !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-date-time,
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-name-number,
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-user-ext,
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-duration,
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-due {
    font-weight: 400 !important;
    color: #1f2a44 !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-name-number {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-status .cd-meta-badge,
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-priority .cd-meta-badge {
    width: 100% !important;
    justify-content: center !important;
}

@media (max-width: 1300px) {
    .cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-inline-header,
    .cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-timeline-item > summary {
        grid-template-columns: 34px 140px 106px 88px minmax(140px, 1fr) 108px 66px !important;
    }

    .cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-inline-header span:nth-child(8),
    .cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-due {
        display: none !important;
    }
}


/* Customer detail Work timeline All tab: call icons and task badge colors. */
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-call-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-call-icon-success {
    background: #dcfce7 !important;
    color: #15803d !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-call-icon-problem {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-call-icon-neutral {
    background: #eef2ff !important;
    color: #4f46e5 !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-task-status-value-new {
    background: #eff6ff !important;
    border-color: #38bdf8 !important;
    color: #075985 !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-task-status-value-assigned {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #334155 !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-task-status-value-in_progress {
    background: #fffbeb !important;
    border-color: #f59e0b !important;
    color: #92400e !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-task-status-value-closed,
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-task-status-value-done {
    background: #f0fdf4 !important;
    border-color: #22c55e !important;
    color: #166534 !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-task-status-value-ignored {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #64748b !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-task-priority-value-low {
    background: #eff6ff !important;
    border-color: #60a5fa !important;
    color: #1d4ed8 !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-task-priority-value-normal {
    background: #f0fdf4 !important;
    border-color: #22c55e !important;
    color: #166534 !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-task-priority-value-high {
    background: #fff1f2 !important;
    border-color: #ef4444 !important;
    color: #b91c1c !important;
}

/* Customer detail Work timeline All tab: column alignment tuning. */
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-inline-header,
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-timeline-item > summary {
    grid-template-columns: 40px 132px 118px 108px minmax(190px, 1fr) 118px 82px 132px !important;
    column-gap: 14px !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-inline-header span {
    text-align: center !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-inline-header span:nth-child(5) {
    text-align: left !important;
    padding-left: 8px !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-status,
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-priority {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-name-number {
    padding-left: 8px !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-user-ext,
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-duration,
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-due {
    text-align: center !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-status .cd-meta-badge,
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-priority .cd-meta-badge {
    min-width: 104px !important;
    max-width: 118px !important;
}

@media (max-width: 1300px) {
    .cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-inline-header,
    .cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-timeline-item > summary {
        grid-template-columns: 34px 126px 106px 94px minmax(170px, 1fr) 108px 72px !important;
        column-gap: 12px !important;
    }
}

/* Customer detail Work timeline All tab: right-align Due date column. */
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-inline-header span:nth-child(8),
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-due {
    text-align: right !important;
    justify-self: stretch !important;
    white-space: nowrap !important;
}

/* Customer detail Work timeline All tab: alignment third pass. */
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-inline-header,
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-timeline-item > summary {
    grid-template-columns: 36px 116px 118px 112px minmax(235px, 1fr) 118px 82px 126px !important;
    column-gap: 12px !important;
}

/* User / Ext. centered with values. */
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-inline-header span:nth-child(6),
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-user-ext {
    text-align: center !important;
    justify-self: stretch !important;
}

/* Duration centered with values. */
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-inline-header span:nth-child(7),
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-duration {
    text-align: center !important;
    justify-self: stretch !important;
}

/* Due date: values right-aligned, header centered so it is not too far right. */
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-inline-header span:nth-child(8) {
    text-align: center !important;
    justify-self: stretch !important;
    white-space: nowrap !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-due {
    text-align: right !important;
    justify-self: stretch !important;
    white-space: nowrap !important;
}

/* Keep Name / Number left aligned and give it room. */
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-inline-header span:nth-child(5),
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-name-number {
    text-align: left !important;
    padding-left: 8px !important;
}

/* Customer detail Work timeline All tab: header-only micro alignment. */

/* Move User / Ext. header slightly left to align with values. */
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-inline-header span:nth-child(6) {
    text-align: center !important;
    transform: translateX(-10px) !important;
}

/* Move Duration header slightly left to align with values. */
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-inline-header span:nth-child(7) {
    text-align: center !important;
    transform: translateX(-8px) !important;
}

/* Move Due date header slightly right, while keeping due date values right-aligned. */
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-inline-header span:nth-child(8) {
    text-align: center !important;
    transform: translateX(10px) !important;
}

/* Customer detail Work timeline All tab: header-only micro alignment pass 2. */

/* User / Ext. header: a little more left. */
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-inline-header span:nth-child(6) {
    transform: translateX(-16px) !important;
}

/* Duration header: a little more left. */
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-inline-header span:nth-child(7) {
    transform: translateX(-16px) !important;
}

/* Due date header: just a little more right. */
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-inline-header span:nth-child(8) {
    transform: translateX(14px) !important;
}

/* Customer detail Work timeline All tab: header-only micro alignment pass 3. */

/* User / Ext. header: small additional move left. */
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-inline-header span:nth-child(6) {
    transform: translateX(-22px) !important;
}

/* Duration header: small additional move left. */
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-inline-header span:nth-child(7) {
    transform: translateX(-22px) !important;
}

/* Customer detail Work timeline All tab: keep column alignment stable with/without scrollbar. */
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-timeline-list {
    scrollbar-gutter: stable !important;
}

/* Fallback for browsers that do not reserve scrollbar gutter. */
@supports not (scrollbar-gutter: stable) {
    .cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-timeline-list {
        overflow-y: scroll !important;
    }
}


/* Customer detail Work timeline All tab: dynamic scrollbar alignment. */
/* Override previous always-reserved gutter so short lists do not show reserved scrollbar space. */
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-timeline-list {
    scrollbar-gutter: auto !important;
    overflow-y: auto !important;
}

/* Only when the All list actually has a scrollbar, reserve matching space on the header. */
.cd-work-timeline-card.cd-work-all-has-scrollbar .cd-work-all-inline-header {
    padding-right: 22px !important;
}

/* Customer detail Work timeline All tab: align Date Time header with row date values. */
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-inline-header span:nth-child(2) {
    text-align: left !important;
    transform: translateX(-4px) !important;
}

/* Customer detail Work timeline All tab: tiny Date Time header correction. */
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-inline-header span:nth-child(2) {
    transform: translateX(2px) !important;
}


/* ==========================================================
   Customer Desk global badge design system v0.1
   One central place for badge colors, borders, and text.
   ========================================================== */

:root {
    --cd-badge-blue-bg: #e0f2fe;
    --cd-badge-blue-border: #38bdf8;
    --cd-badge-blue-text: #075985;
    --cd-badge-blue-solid: #0284c7;

    --cd-badge-cyan-bg: #cffafe;
    --cd-badge-cyan-border: #67e8f9;
    --cd-badge-cyan-text: #155e75;
    --cd-badge-cyan-solid: #0891b2;

    --cd-badge-indigo-bg: #e0e7ff;
    --cd-badge-indigo-border: #818cf8;
    --cd-badge-indigo-text: #3730a3;
    --cd-badge-indigo-solid: #4f46e5;

    --cd-badge-green-bg: #dcfce7;
    --cd-badge-green-border: #86efac;
    --cd-badge-green-text: #166534;
    --cd-badge-green-solid: #16a34a;

    --cd-badge-orange-bg: #ffedd5;
    --cd-badge-orange-border: #fdba74;
    --cd-badge-orange-text: #9a3412;
    --cd-badge-orange-solid: #f97316;

    --cd-badge-red-bg: #fee2e2;
    --cd-badge-red-border: #fca5a5;
    --cd-badge-red-text: #991b1b;
    --cd-badge-red-solid: #dc2626;

    --cd-badge-slate-bg: #f1f5f9;
    --cd-badge-slate-border: #cbd5e1;
    --cd-badge-slate-text: #475569;
    --cd-badge-slate-solid: #64748b;

    --cd-badge-dark-bg: #e5e7eb;
    --cd-badge-dark-border: #9ca3af;
    --cd-badge-dark-text: #374151;
    --cd-badge-dark-solid: #374151;
}

/* Base badge appearance. Semantic classes below only set the color variables. */
.cd-meta-badge,
.pill.cd-call-direction-badge,
.cd-lead-status-pill {
    --cd-badge-bg: var(--cd-badge-slate-bg);
    --cd-badge-border: var(--cd-badge-slate-border);
    --cd-badge-text: var(--cd-badge-slate-text);

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 22px !important;
    padding: 2px 8px !important;
    border: 1px solid var(--cd-badge-border) !important;
    border-radius: 6px !important;
    background: var(--cd-badge-bg) !important;
    color: var(--cd-badge-text) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Call direction badges. */
.cd-call-direction-badge-incoming {
    --cd-badge-bg: var(--cd-badge-blue-bg);
    --cd-badge-border: var(--cd-badge-blue-border);
    --cd-badge-text: var(--cd-badge-blue-text);
}

.cd-call-direction-badge-outgoing {
    --cd-badge-bg: var(--cd-badge-indigo-bg);
    --cd-badge-border: var(--cd-badge-indigo-border);
    --cd-badge-text: var(--cd-badge-indigo-text);
}

/* Call result badges. */
.cd-call-result-badge-ringing {
    --cd-badge-bg: var(--cd-badge-blue-bg);
    --cd-badge-border: var(--cd-badge-blue-border);
    --cd-badge-text: var(--cd-badge-blue-text);
}

.cd-call-result-badge-answered,
.cd-call-result-badge-completed {
    --cd-badge-bg: var(--cd-badge-green-bg);
    --cd-badge-border: var(--cd-badge-green-border);
    --cd-badge-text: var(--cd-badge-green-text);
}

.cd-call-result-badge-missed {
    --cd-badge-bg: var(--cd-badge-red-bg);
    --cd-badge-border: var(--cd-badge-red-border);
    --cd-badge-text: var(--cd-badge-red-text);
}

.cd-call-result-badge-busy,
.cd-call-result-badge-failed {
    --cd-badge-bg: var(--cd-badge-orange-bg);
    --cd-badge-border: var(--cd-badge-orange-border);
    --cd-badge-text: var(--cd-badge-orange-text);
}

.cd-call-result-badge-unknown {
    --cd-badge-bg: var(--cd-badge-slate-bg);
    --cd-badge-border: var(--cd-badge-slate-border);
    --cd-badge-text: var(--cd-badge-slate-text);
}

/* Task status badges. */
.cd-task-status-value-new {
    --cd-badge-bg: var(--cd-badge-blue-bg);
    --cd-badge-border: var(--cd-badge-blue-border);
    --cd-badge-text: var(--cd-badge-blue-text);
}

.cd-task-status-value-assigned {
    --cd-badge-bg: var(--cd-badge-slate-bg);
    --cd-badge-border: var(--cd-badge-slate-border);
    --cd-badge-text: var(--cd-badge-slate-text);
}

.cd-task-status-value-in_progress {
    --cd-badge-bg: var(--cd-badge-orange-bg);
    --cd-badge-border: var(--cd-badge-orange-border);
    --cd-badge-text: var(--cd-badge-orange-text);
}

.cd-task-status-value-called_back,
.cd-task-status-value-closed {
    --cd-badge-bg: var(--cd-badge-green-bg);
    --cd-badge-border: var(--cd-badge-green-border);
    --cd-badge-text: var(--cd-badge-green-text);
}

.cd-task-status-value-ignored {
    --cd-badge-bg: var(--cd-badge-slate-bg);
    --cd-badge-border: var(--cd-badge-slate-border);
    --cd-badge-text: var(--cd-badge-slate-text);
}

/* Task priority badges. */
.cd-task-priority-value-low {
    --cd-badge-bg: var(--cd-badge-blue-bg);
    --cd-badge-border: var(--cd-badge-blue-border);
    --cd-badge-text: var(--cd-badge-blue-text);
}

.cd-task-priority-value-normal {
    --cd-badge-bg: var(--cd-badge-green-bg);
    --cd-badge-border: var(--cd-badge-green-border);
    --cd-badge-text: var(--cd-badge-green-text);
}

.cd-task-priority-value-high {
    --cd-badge-bg: var(--cd-badge-red-bg);
    --cd-badge-border: var(--cd-badge-red-border);
    --cd-badge-text: var(--cd-badge-red-text);
}

/* Lead/customer status badges. */
.cd-lead-status-pill-new {
    --cd-badge-bg: var(--cd-badge-blue-bg);
    --cd-badge-border: var(--cd-badge-blue-border);
    --cd-badge-text: var(--cd-badge-blue-text);
}

.cd-lead-status-pill-contacted {
    --cd-badge-bg: var(--cd-badge-cyan-bg);
    --cd-badge-border: var(--cd-badge-cyan-border);
    --cd-badge-text: var(--cd-badge-cyan-text);
}

.cd-lead-status-pill-interested,
.cd-lead-status-pill-customer {
    --cd-badge-bg: var(--cd-badge-green-bg);
    --cd-badge-border: var(--cd-badge-green-border);
    --cd-badge-text: var(--cd-badge-green-text);
}

.cd-lead-status-pill-not_interested {
    --cd-badge-bg: var(--cd-badge-slate-bg);
    --cd-badge-border: var(--cd-badge-slate-border);
    --cd-badge-text: var(--cd-badge-slate-text);
}

.cd-lead-status-pill-closed {
    --cd-badge-bg: var(--cd-badge-dark-bg);
    --cd-badge-border: var(--cd-badge-dark-border);
    --cd-badge-text: var(--cd-badge-dark-text);
}

/* Lead status bar and legend dots use solid versions of the same semantic colors. */
.cd-lead-status-new {
    background: var(--cd-badge-blue-solid) !important;
}

.cd-lead-status-contacted {
    background: var(--cd-badge-cyan-solid) !important;
}

.cd-lead-status-interested {
    background: var(--cd-badge-green-solid) !important;
}

.cd-lead-status-customer {
    background: var(--cd-badge-green-solid) !important;
}

.cd-lead-status-not-interested,
.cd-lead-status-not_interested {
    background: var(--cd-badge-slate-solid) !important;
}

.cd-lead-status-closed {
    background: var(--cd-badge-dark-solid) !important;
}

/* Agent/user badges, kept in the same visual family. */
.cd-user-role-agent-badge {
    --cd-badge-bg: var(--cd-badge-blue-bg);
    --cd-badge-border: var(--cd-badge-blue-border);
    --cd-badge-text: var(--cd-badge-blue-text);
}

.cd-user-role-admin-badge {
    --cd-badge-bg: var(--cd-badge-indigo-bg);
    --cd-badge-border: var(--cd-badge-indigo-border);
    --cd-badge-text: var(--cd-badge-indigo-text);
}

.cd-user-status-active-badge {
    --cd-badge-bg: var(--cd-badge-green-bg);
    --cd-badge-border: var(--cd-badge-green-border);
    --cd-badge-text: var(--cd-badge-green-text);
}

.cd-user-status-inactive-badge {
    --cd-badge-bg: var(--cd-badge-slate-bg);
    --cd-badge-border: var(--cd-badge-slate-border);
    --cd-badge-text: var(--cd-badge-slate-text);
}


/* ==========================================================
   Customer Desk global badge design system v0.2 - chosen colors
   Square badges, no outline, centralized colors.
   ========================================================== */

:root {
    /* Task priority */
    --cd-task-priority-low-bg: #FFDA71;
    --cd-task-priority-low-text: #5C5A00;
    --cd-task-priority-low-solid: #FFC111;

    --cd-task-priority-normal-bg: #B3E5A1;
    --cd-task-priority-normal-text: #275317;
    --cd-task-priority-normal-solid: #8DD873;

    --cd-task-priority-high-bg: #FBD5D5;
    --cd-task-priority-high-text: #BC0000;
    --cd-task-priority-high-solid: #FF3F3F;

    /* Task status */
    --cd-task-status-new-bg: #F2F2F2;
    --cd-task-status-new-text: #595959;
    --cd-task-status-new-solid: #D3D3D3;

    --cd-task-status-assigned-bg: #CAEEFB;
    --cd-task-status-assigned-text: #163E64;
    --cd-task-status-assigned-solid: #A5E3F9;

    --cd-task-status-in-progress-bg: #FFCF8F;
    --cd-task-status-in-progress-text: #B06500;
    --cd-task-status-in-progress-solid: #FFCF8F;

    --cd-task-status-called-back-bg: #E7F7E1;
    --cd-task-status-called-back-text: #275317;
    --cd-task-status-called-back-solid: #9DDF85;

    --cd-task-status-done-bg: #B4E5A2;
    --cd-task-status-done-text: #275317;
    --cd-task-status-done-solid: #4FAB2F;

    --cd-task-status-ignored-bg: #FFAFC4;
    --cd-task-status-ignored-text: #A8002C;
    --cd-task-status-ignored-solid: #DE003A;

    /* Call direction */
    --cd-call-direction-incoming-bg: #F2ECDF;
    --cd-call-direction-incoming-text: #7D6633;

    --cd-call-direction-outgoing-bg: #FFB793;
    --cd-call-direction-outgoing-text: #963200;

    --cd-call-direction-other-bg: #D9D9D9;
    --cd-call-direction-other-text: #595959;

    /* Call result */
    --cd-call-result-answered-bg: #B4E5A2;
    --cd-call-result-answered-text: #275317;
    --cd-call-result-answered-solid: #4FAB2F;

    --cd-call-result-missed-bg: #FBD5D5;
    --cd-call-result-missed-text: #BC0000;
    --cd-call-result-missed-solid: #FF3F3F;

    --cd-call-result-not-answered-bg: #FFAFC4;
    --cd-call-result-not-answered-text: #A8002C;
    --cd-call-result-not-answered-solid: #DE003A;

    --cd-call-result-busy-bg: #FFCF8F;
    --cd-call-result-busy-text: #B06500;
    --cd-call-result-busy-solid: #FFCF8F;

    --cd-call-result-ringing-bg: #CAEEFB;
    --cd-call-result-ringing-text: #163E64;
    --cd-call-result-ringing-solid: #4FAB2F;

    --cd-call-result-unknown-bg: #F2F2F2;
    --cd-call-result-unknown-text: #595959;
    --cd-call-result-unknown-solid: #D3D3D3;

    /* Lead / customer status */
    --cd-lead-status-new-bg: #F2F2F2;
    --cd-lead-status-new-text: #595959;
    --cd-lead-status-new-solid: #D3D3D3;

    --cd-lead-status-contacted-bg: #CAEEFB;
    --cd-lead-status-contacted-text: #163E64;
    --cd-lead-status-contacted-solid: #A5E3F9;

    --cd-lead-status-interested-bg: #FFCF8F;
    --cd-lead-status-interested-text: #B06500;
    --cd-lead-status-interested-solid: #FFCF8F;

    --cd-lead-status-customer-bg: #B4E5A2;
    --cd-lead-status-customer-text: #275317;
    --cd-lead-status-customer-solid: #4FAB2F;

    --cd-lead-status-not-interested-bg: #F1E7FF;
    --cd-lead-status-not-interested-text: #5D00DA;
    --cd-lead-status-not-interested-solid: #44009E;

    --cd-lead-status-closed-bg: #CDA7FF;
    --cd-lead-status-closed-text: #5D00DA;
    --cd-lead-status-closed-solid: #44009E;
}

/* Final base badge shape: square, filled, no outline. */
.cd-meta-badge,
.pill.cd-call-direction-badge,
.cd-lead-status-pill {
    --cd-badge-bg: #F2F2F2;
    --cd-badge-text: #595959;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 22px !important;
    padding: 3px 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--cd-badge-bg) !important;
    color: var(--cd-badge-text) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Call direction badges */
.cd-call-direction-badge-incoming {
    --cd-badge-bg: var(--cd-call-direction-incoming-bg);
    --cd-badge-text: var(--cd-call-direction-incoming-text);
}

.cd-call-direction-badge-outgoing {
    --cd-badge-bg: var(--cd-call-direction-outgoing-bg);
    --cd-badge-text: var(--cd-call-direction-outgoing-text);
}

/* Used for future internal/other direction values. */
.cd-call-direction-badge-internal,
.cd-call-direction-badge-other,
.cd-call-direction-badge-unknown {
    --cd-badge-bg: var(--cd-call-direction-other-bg);
    --cd-badge-text: var(--cd-call-direction-other-text);
}

/* Call result badges */
.cd-call-result-badge-answered,
.cd-call-result-badge-completed {
    --cd-badge-bg: var(--cd-call-result-answered-bg);
    --cd-badge-text: var(--cd-call-result-answered-text);
}

.cd-call-result-badge-missed {
    --cd-badge-bg: var(--cd-call-result-missed-bg);
    --cd-badge-text: var(--cd-call-result-missed-text);
}

.cd-call-result-badge-not_answered {
    --cd-badge-bg: var(--cd-call-result-not-answered-bg);
    --cd-badge-text: var(--cd-call-result-not-answered-text);
}

.cd-call-result-badge-busy,
.cd-call-result-badge-failed {
    --cd-badge-bg: var(--cd-call-result-busy-bg);
    --cd-badge-text: var(--cd-call-result-busy-text);
}

.cd-call-result-badge-ringing,
.cd-call-result-badge-in_progress {
    --cd-badge-bg: var(--cd-call-result-ringing-bg);
    --cd-badge-text: var(--cd-call-result-ringing-text);
}

.cd-call-result-badge-unknown {
    --cd-badge-bg: var(--cd-call-result-unknown-bg);
    --cd-badge-text: var(--cd-call-result-unknown-text);
}

/* Task status badges */
.cd-task-status-value-new {
    --cd-badge-bg: var(--cd-task-status-new-bg);
    --cd-badge-text: var(--cd-task-status-new-text);
}

.cd-task-status-value-assigned {
    --cd-badge-bg: var(--cd-task-status-assigned-bg);
    --cd-badge-text: var(--cd-task-status-assigned-text);
}

.cd-task-status-value-in_progress {
    --cd-badge-bg: var(--cd-task-status-in-progress-bg);
    --cd-badge-text: var(--cd-task-status-in-progress-text);
}

.cd-task-status-value-called_back {
    --cd-badge-bg: var(--cd-task-status-called-back-bg);
    --cd-badge-text: var(--cd-task-status-called-back-text);
}

.cd-task-status-value-closed,
.cd-task-status-value-done {
    --cd-badge-bg: var(--cd-task-status-done-bg);
    --cd-badge-text: var(--cd-task-status-done-text);
}

.cd-task-status-value-ignored {
    --cd-badge-bg: var(--cd-task-status-ignored-bg);
    --cd-badge-text: var(--cd-task-status-ignored-text);
}

/* Task priority badges */
.cd-task-priority-value-low {
    --cd-badge-bg: var(--cd-task-priority-low-bg);
    --cd-badge-text: var(--cd-task-priority-low-text);
}

.cd-task-priority-value-normal {
    --cd-badge-bg: var(--cd-task-priority-normal-bg);
    --cd-badge-text: var(--cd-task-priority-normal-text);
}

.cd-task-priority-value-high {
    --cd-badge-bg: var(--cd-task-priority-high-bg);
    --cd-badge-text: var(--cd-task-priority-high-text);
}

/* Lead / customer status badges */
.cd-lead-status-pill-new {
    --cd-badge-bg: var(--cd-lead-status-new-bg);
    --cd-badge-text: var(--cd-lead-status-new-text);
}

.cd-lead-status-pill-contacted {
    --cd-badge-bg: var(--cd-lead-status-contacted-bg);
    --cd-badge-text: var(--cd-lead-status-contacted-text);
}

.cd-lead-status-pill-interested {
    --cd-badge-bg: var(--cd-lead-status-interested-bg);
    --cd-badge-text: var(--cd-lead-status-interested-text);
}

.cd-lead-status-pill-customer {
    --cd-badge-bg: var(--cd-lead-status-customer-bg);
    --cd-badge-text: var(--cd-lead-status-customer-text);
}

.cd-lead-status-pill-not_interested {
    --cd-badge-bg: var(--cd-lead-status-not-interested-bg);
    --cd-badge-text: var(--cd-lead-status-not-interested-text);
}

.cd-lead-status-pill-closed {
    --cd-badge-bg: var(--cd-lead-status-closed-bg);
    --cd-badge-text: var(--cd-lead-status-closed-text);
}

/* Lead status bar and legend colors. */
.cd-lead-status-bar {
    border-radius: 0 !important;
}

.cd-lead-status-segment {
    border-radius: 0 !important;
}

.cd-lead-status-dot {
    width: .45rem !important;
    height: .45rem !important;
    border-radius: 0 !important;
}

.cd-lead-status-new {
    background: var(--cd-lead-status-new-solid) !important;
}

.cd-lead-status-contacted {
    background: var(--cd-lead-status-contacted-solid) !important;
}

.cd-lead-status-interested {
    background: var(--cd-lead-status-interested-solid) !important;
}

.cd-lead-status-customer {
    background: var(--cd-lead-status-customer-solid) !important;
}

.cd-lead-status-not-interested,
.cd-lead-status-not_interested {
    background: var(--cd-lead-status-not-interested-solid) !important;
}

.cd-lead-status-closed {
    background: var(--cd-lead-status-closed-solid) !important;
}

/* Utility bar/legend colors for future task/call summary bars. */
.cd-task-priority-low,
.cd-task-priority-value-low.cd-status-segment,
.cd-task-priority-value-low.cd-status-dot {
    background: var(--cd-task-priority-low-solid) !important;
}

.cd-task-priority-normal,
.cd-task-priority-value-normal.cd-status-segment,
.cd-task-priority-value-normal.cd-status-dot {
    background: var(--cd-task-priority-normal-solid) !important;
}

.cd-task-priority-high,
.cd-task-priority-value-high.cd-status-segment,
.cd-task-priority-value-high.cd-status-dot {
    background: var(--cd-task-priority-high-solid) !important;
}

/* Keep any generic legend marker square if present elsewhere. */
.cd-status-dot,
.cd-legend-dot,
.cd-mini-dot {
    border-radius: 0 !important;
}

/* Lead / Customer Status color correction. */
:root {
    --cd-lead-status-new-bg: #F2F2F2;
    --cd-lead-status-new-text: #0F0F0F;
    --cd-lead-status-new-solid: #D3D3D3;

    --cd-lead-status-contacted-bg: #A5E3F9;
    --cd-lead-status-contacted-text: #0F0F0F;
    --cd-lead-status-contacted-solid: #A5E3F9;

    --cd-lead-status-interested-bg: #FFCF8F;
    --cd-lead-status-interested-text: #0F0F0F;
    --cd-lead-status-interested-solid: #FFCF8F;

    --cd-lead-status-customer-bg: #B4E5A2;
    --cd-lead-status-customer-text: #0F0F0F;
    --cd-lead-status-customer-solid: #4FAB2F;

    --cd-lead-status-not-interested-bg: #7209FF;
    --cd-lead-status-not-interested-text: #0F0F0F;
    --cd-lead-status-not-interested-solid: #7209FF;

    --cd-lead-status-closed-bg: #CDA7FF;
    --cd-lead-status-closed-text: #0F0F0F;
    --cd-lead-status-closed-solid: #44009E;
}

/* Lead / Customer Status correction: Not interested. */
:root {
    --cd-lead-status-not-interested-bg: #F1E7FF;
    --cd-lead-status-not-interested-text: #0F0F0F;
    --cd-lead-status-not-interested-solid: #7209FF;
}

/* ==========================================================
   Overview bars and legends: square markers + chosen colors.
   Applies to Calls overview and Tasks overview.
   ========================================================== */

/* Bars should be square, not rounded. */
.cd-call-overview-bar,
.cd-task-overview-bar,
.cd-lead-status-bar {
    border-radius: 0 !important;
}

.cd-call-overview-segment,
.cd-task-overview-segment,
.cd-lead-status-segment {
    border-radius: 0 !important;
}

/* Legend markers should be tiny squares, not dots/circles. */
.cd-task-overview-legend i,
.cd-lead-status-dot,
.cd-status-dot,
.cd-legend-dot,
.cd-mini-dot {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    border-radius: 0 !important;
    display: inline-block !important;
    flex: 0 0 8px !important;
}

/* TASK STATUS overview bar + legend */
.cd-task-status-segment-new {
    background: #D3D3D3 !important;
}

.cd-task-status-segment-assigned {
    background: #A5E3F9 !important;
}

.cd-task-status-segment-in-progress,
.cd-task-status-segment-in_progress {
    background: #FFCF8F !important;
}

.cd-task-status-segment-called-back,
.cd-task-status-segment-called_back {
    background: #9DDF85 !important;
}

.cd-task-status-segment-closed,
.cd-task-status-segment-done {
    background: #4FAB2F !important;
}

.cd-task-status-segment-ignored {
    background: #DE003A !important;
}

/* TASK PRIORITY overview bar + legend */
.cd-task-priority-segment-low {
    background: #FFC111 !important;
}

.cd-task-priority-segment-normal {
    background: #8DD873 !important;
}

.cd-task-priority-segment-high {
    background: #FF3F3F !important;
}

/* CALL RESULT overview bar + legend.
   Includes aliases so this works even if view-generated class names differ slightly. */
.cd-call-status-segment-answered,
.cd-call-status-segment-completed,
.cd-call-status-segment-success,
.cd-call-result-segment-answered,
.cd-call-result-segment-completed,
.cd-call-result-segment-success {
    background: #4FAB2F !important;
}

.cd-call-status-segment-missed,
.cd-call-status-segment-missed-not-answered,
.cd-call-status-segment-missed-not_answered,
.cd-call-status-segment-problem,
.cd-call-result-segment-missed,
.cd-call-result-segment-missed-not-answered,
.cd-call-result-segment-missed-not_answered,
.cd-call-result-segment-problem {
    background: #FF3F3F !important;
}

.cd-call-status-segment-not-answered,
.cd-call-status-segment-not_answered,
.cd-call-result-segment-not-answered,
.cd-call-result-segment-not_answered {
    background: #DE003A !important;
}

.cd-call-status-segment-busy,
.cd-call-status-segment-failed,
.cd-call-status-segment-busy-failed,
.cd-call-status-segment-busy_failed,
.cd-call-result-segment-busy,
.cd-call-result-segment-failed,
.cd-call-result-segment-busy-failed,
.cd-call-result-segment-busy_failed {
    background: #FFCF8F !important;
}

.cd-call-status-segment-ringing,
.cd-call-status-segment-in-progress,
.cd-call-status-segment-in_progress,
.cd-call-result-segment-ringing,
.cd-call-result-segment-in-progress,
.cd-call-result-segment-in_progress {
    background: #4FAB2F !important;
}

.cd-call-status-segment-unknown,
.cd-call-status-segment-empty,
.cd-call-result-segment-unknown,
.cd-call-result-segment-empty,
.cd-task-overview-empty {
    background: #D3D3D3 !important;
}

/* LEAD / CUSTOMER overview bar + legend square markers remain on chosen colors. */
.cd-lead-status-new {
    background: #D3D3D3 !important;
}

.cd-lead-status-contacted {
    background: #A5E3F9 !important;
}

.cd-lead-status-interested {
    background: #FFCF8F !important;
}

.cd-lead-status-customer {
    background: #4FAB2F !important;
}

.cd-lead-status-not-interested,
.cd-lead-status-not_interested {
    background: #7209FF !important;
}

.cd-lead-status-closed {
    background: #44009E !important;
}

/* ==========================================================
   Dashboard bars and legends: use central badge color system.
   Square bars, square legend markers, no rounded dots.
   ========================================================== */

/* Dashboard bars should be square, same as Calls/Tasks/Customers overview bars. */
.cd-dashboard-bar {
    border-radius: 0 !important;
}

.cd-dashboard-segment {
    border-radius: 0 !important;
}

/* Dashboard legend markers should be tiny squares, not circles. */
.cd-dashboard-legend i {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    border-radius: 0 !important;
    display: inline-block !important;
    flex: 0 0 8px !important;
}

/* Dashboard CALL RESULT colors */
.cd-dash-answered,
.cd-dash-completed,
.cd-dash-success {
    background: #4FAB2F !important;
}

.cd-dash-missed,
.cd-dash-missed-not-answered,
.cd-dash-missed_not_answered {
    background: #FF3F3F !important;
}

.cd-dash-not-answered,
.cd-dash-not_answered {
    background: #DE003A !important;
}

.cd-dash-busy,
.cd-dash-failed,
.cd-dash-busy-failed,
.cd-dash-busy_failed {
    background: #FFCF8F !important;
}

.cd-dash-ringing,
.cd-dash-in-progress,
.cd-dash-in_progress {
    background: #4FAB2F !important;
}

.cd-dash-unknown,
.cd-dash-empty {
    background: #D3D3D3 !important;
}

/* Dashboard TASK STATUS colors */
.cd-dash-new {
    background: #D3D3D3 !important;
}

.cd-dash-assigned {
    background: #A5E3F9 !important;
}

.cd-dash-called-back,
.cd-dash-called_back {
    background: #9DDF85 !important;
}

.cd-dash-closed,
.cd-dash-done {
    background: #4FAB2F !important;
}

.cd-dash-ignored {
    background: #DE003A !important;
}

/* Dashboard TASK PRIORITY colors */
.cd-dash-low {
    background: #FFC111 !important;
}

.cd-dash-normal {
    background: #8DD873 !important;
}

.cd-dash-high {
    background: #FF3F3F !important;
}

/* Dashboard LEAD / CUSTOMER STATUS colors */
.cd-dash-contacted {
    background: #A5E3F9 !important;
}

.cd-dash-interested {
    background: #FFCF8F !important;
}

.cd-dash-customer {
    background: #4FAB2F !important;
}

.cd-dash-not-interested,
.cd-dash-not_interested {
    background: #7209FF !important;
}

/* Dashboard USER overview colors */
.cd-dash-agent {
    background: #A5E3F9 !important;
}

.cd-dash-admin,
.cd-dash-company-admin,
.cd-dash-company_admin,
.cd-dash-skytel-admin,
.cd-dash-skytel_admin {
    background: #FFB793 !important;
}

.cd-dash-active {
    background: #4FAB2F !important;
}

.cd-dash-inactive {
    background: #D3D3D3 !important;
}


/* ==========================================================
   Dashboard exact color correction v0.3
   Matches actual segment.kind values generated in core/views.py.
   ========================================================== */

/* Square bars and legend markers. */
.cd-dashboard-bar,
.cd-dashboard-segment {
    border-radius: 0 !important;
}

.cd-dashboard-legend i {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    border-radius: 0 !important;
    display: inline-block !important;
    flex: 0 0 8px !important;
}

/* Dashboard Calls:
   success = Answered/Completed
   missed = Incoming Missed
   not-answered = Outgoing Not answered
   warning = Busy/Failed
   neutral = Unknown
*/
.cd-dash-success {
    background: #4FAB2F !important;
}

.cd-dash-missed {
    background: #FF3F3F !important;
}

.cd-dash-not-answered,
.cd-dash-not_answered {
    background: #DE003A !important;
}

.cd-dash-warning {
    background: #FFCF8F !important;
}

.cd-dash-neutral {
    background: #D3D3D3 !important;
}

/* Dashboard Task Status:
   generated kinds are status-new, status-assigned, status-progress, status-called.
*/
.cd-dash-status-new {
    background: #D3D3D3 !important;
}

.cd-dash-status-assigned {
    background: #A5E3F9 !important;
}

.cd-dash-status-progress {
    background: #FFCF8F !important;
}

.cd-dash-status-called {
    background: #9DDF85 !important;
}

/* Dashboard Task Priority:
   generated kinds are priority-high, priority-normal, priority-low.
*/
.cd-dash-priority-low {
    background: #FFC111 !important;
}

.cd-dash-priority-normal {
    background: #8DD873 !important;
}

.cd-dash-priority-high {
    background: #FF3F3F !important;
}

/* Dashboard Contacts:
   contact-0 New
   contact-1 Contacted
   contact-2 Interested
   contact-3 Not interested
   contact-4 Customer
   contact-5 Closed
*/
.cd-dash-contact-0 {
    background: #D3D3D3 !important;
}

.cd-dash-contact-1 {
    background: #A5E3F9 !important;
}

.cd-dash-contact-2 {
    background: #FFCF8F !important;
}

.cd-dash-contact-3 {
    background: #7209FF !important;
}

.cd-dash-contact-4 {
    background: #4FAB2F !important;
}

.cd-dash-contact-5 {
    background: #44009E !important;
}

/* Dashboard Users. Keep square and consistent. */
.cd-dash-role-admin {
    background: #FFB793 !important;
}

.cd-dash-role-agent {
    background: #A5E3F9 !important;
}

.cd-dash-status-active {
    background: #4FAB2F !important;
}

.cd-dash-status-inactive {
    background: #D3D3D3 !important;
}

/* Dashboard Users card: restore existing user role/status colors.
   User role/status colors were not part of the global badge color table. */
.cd-dash-role-admin {
    background: #334155 !important;
}

.cd-dash-role-agent {
    background: #2563eb !important;
}

.cd-dash-status-active {
    background: #22c55e !important;
}

.cd-dash-status-inactive {
    background: #ef4444 !important;
}

/* Work timeline All tab: force task status/priority badges to use the same chosen colors as Tasks tab. */
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-status .cd-task-status-value-new {
    --cd-badge-bg: #F2F2F2 !important;
    --cd-badge-text: #595959 !important;
    background: #F2F2F2 !important;
    color: #595959 !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-status .cd-task-status-value-assigned {
    --cd-badge-bg: #CAEEFB !important;
    --cd-badge-text: #163E64 !important;
    background: #CAEEFB !important;
    color: #163E64 !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-status .cd-task-status-value-in_progress {
    --cd-badge-bg: #FFCF8F !important;
    --cd-badge-text: #B06500 !important;
    background: #FFCF8F !important;
    color: #B06500 !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-status .cd-task-status-value-called_back {
    --cd-badge-bg: #E7F7E1 !important;
    --cd-badge-text: #275317 !important;
    background: #E7F7E1 !important;
    color: #275317 !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-status .cd-task-status-value-closed,
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-status .cd-task-status-value-done {
    --cd-badge-bg: #B4E5A2 !important;
    --cd-badge-text: #275317 !important;
    background: #B4E5A2 !important;
    color: #275317 !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-status .cd-task-status-value-ignored {
    --cd-badge-bg: #FFAFC4 !important;
    --cd-badge-text: #A8002C !important;
    background: #FFAFC4 !important;
    color: #A8002C !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-priority .cd-task-priority-value-low {
    --cd-badge-bg: #FFDA71 !important;
    --cd-badge-text: #5C5A00 !important;
    background: #FFDA71 !important;
    color: #5C5A00 !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-priority .cd-task-priority-value-normal {
    --cd-badge-bg: #B3E5A1 !important;
    --cd-badge-text: #275317 !important;
    background: #B3E5A1 !important;
    color: #275317 !important;
}

.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-priority .cd-task-priority-value-high {
    --cd-badge-bg: #FBD5D5 !important;
    --cd-badge-text: #BC0000 !important;
    background: #FBD5D5 !important;
    color: #BC0000 !important;
}

/* Keep All-tab badges square and borderless. */
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-status .cd-meta-badge,
.cd-work-timeline-card:has(.cd-work-timeline-tabs button[data-cd-filter-value="all"].is-active) .cd-work-all-priority .cd-meta-badge {
    border: 0 !important;
    border-radius: 0 !important;
}


/* SkyTel AI Voice calls-page presentation */
.cd-ai-voice-badge {
    display: inline-flex;
    align-items: center;
    width: max-content;
    margin-right: 6px;
    padding: 3px 7px;
    border: 0 !important;
    border-radius: 0 !important;
    background: #e7f5ec !important;
    color: #14532d !important;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.2;
    white-space: nowrap;
}

.cd-ai-call-panel {
    margin: 10px 0;
    padding: 12px 14px;
    border-left: 4px solid #166534;
    background: #f5faf7;
}

.cd-ai-call-panel-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.cd-ai-call-route {
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.cd-ai-summary-title {
    display: block;
    margin-bottom: 5px;
    color: #0f172a;
}

.cd-ai-summary-body {
    color: #334155;
    line-height: 1.55;
}

.cd-ai-transfer-line {
    margin-top: 9px;
    color: #334155;
    font-size: 13px;
}

.cd-ai-call-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 9px;
    color: #64748b;
    font-size: 12px;
}

.cd-ai-transcript {
    margin-top: 11px;
}

.cd-ai-transcript > summary,
.cd-call-expandable-row .cd-ai-transcript > summary {
    display: inline-flex !important;
    grid-template-columns: none !important;
    align-items: center;
    width: auto;
    min-height: 0;
    padding: 0 !important;
    color: #166534;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    list-style: none;
}

.cd-ai-transcript > summary::before {
    content: "▸";
    margin-right: 6px;
}

.cd-ai-transcript[open] > summary::before {
    content: "▾";
}

.cd-ai-transcript-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 9px;
}

.cd-ai-transcript-entry {
    display: grid;
    grid-template-columns: minmax(85px, 120px) minmax(0, 1fr);
    gap: 10px;
    padding: 8px 10px;
    background: #ffffff;
    border: 1px solid #dbe7df;
}

.cd-ai-transcript-speaker {
    color: #166534;
}

@media (max-width: 700px) {
    .cd-ai-transcript-entry {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}


/* Organization-first SkyTel staff administration layout */
.cd-org-list-header,
.cd-org-workspace-header {
    padding: 15px 18px;
}

.cd-org-list-header .cd-page-header-row,
.cd-org-workspace-header .cd-page-header-row {
    align-items: flex-start;
}

.cd-org-page-subtitle {
    max-width: 720px;
    font-size: 13px;
    line-height: 1.4;
}

.cd-org-list-search {
    flex: 0 1 560px;
}

.cd-org-search-row {
    justify-content: flex-end;
    max-width: none;
}

.cd-org-search-row input[type="search"] {
    width: min(390px, 46vw);
}

.cd-org-list-card {
    padding: 0;
    overflow: visible;
}

.cd-org-list-card > .cd-card-header-row {
    margin: 0;
    padding: 13px 16px 10px;
    border-bottom: 1px solid var(--cd-border-soft);
}

.cd-org-list-table {
    table-layout: fixed;
}

.cd-org-list-table th,
.cd-org-list-table td {
    width: auto !important;
    padding: 9px 11px;
    vertical-align: middle !important;
    text-align: left !important;
    white-space: normal !important;
}

.cd-org-list-table th:nth-child(1) {
    width: 25% !important;
}

.cd-org-list-table th:nth-child(2) {
    width: 24% !important;
}

.cd-org-list-table th:nth-child(3) {
    width: 18% !important;
}

.cd-org-list-table th:nth-child(4) {
    width: 15% !important;
}

.cd-org-list-table th:nth-child(5) {
    width: 18% !important;
}

.cd-org-name-link {
    color: #0f172a !important;
    font-size: 14px;
    font-weight: 800 !important;
    text-decoration: none;
}

.cd-org-name-link:hover {
    text-decoration: underline;
}

.cd-org-list-meta {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.25;
}

.cd-org-services-cell {
    line-height: 1.75;
}

.cd-org-product-badge,
.cd-org-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 7px;
    border: 1px solid transparent;
    border-radius: var(--cd-radius-badge) !important;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
}

.cd-org-product-badge + .cd-org-product-badge {
    margin-left: 3px;
}

.cd-org-entitlement-active,
.cd-org-status-active {
    border-color: #b7e4c7;
    background: #dcfce7;
    color: #166534;
}

.cd-org-entitlement-testing {
    border-color: #bae6fd;
    background: #e0f2fe;
    color: #075985;
}

.cd-org-entitlement-pending {
    border-color: #fde68a;
    background: #fef3c7;
    color: #92400e;
}

.cd-org-entitlement-suspended,
.cd-org-status-suspended {
    border-color: #fed7aa;
    background: #ffedd5;
    color: #9a3412;
}

.cd-org-entitlement-cancelled,
.cd-org-status-closed {
    border-color: #e2e8f0;
    background: #f1f5f9;
    color: #64748b;
}

.cd-org-actions-cell {
    white-space: nowrap !important;
}

.cd-org-actions-cell .btn {
    min-height: 31px;
    height: 31px;
    padding: 4px 9px;
    font-size: 12px;
}

.cd-org-actions-cell .btn + .btn {
    margin-left: 4px;
}

.cd-org-workspace-header {
    padding-bottom: 14px;
}

.cd-org-breadcrumb {
    margin: 0 0 3px;
    font-size: 12px;
}

.cd-org-breadcrumb a {
    color: #007fa8;
    font-weight: 700;
}

.cd-org-title {
    margin-bottom: 6px;
}

.cd-org-identity-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.cd-org-code {
    margin-right: 2px;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}

.cd-org-section-nav {
    padding: 0 12px;
}

.cd-org-section-nav p {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    overflow-x: auto;
    white-space: nowrap;
}

.cd-org-section-nav p > a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 8px;
    border-bottom: 2px solid transparent;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.cd-org-section-nav p > a:hover {
    border-bottom-color: #00a9e0;
    color: #0f172a;
}

.cd-org-section {
    scroll-margin-top: 12px;
}

.cd-org-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.cd-org-stat {
    display: block;
    min-height: 58px;
    padding: 10px 12px;
}

.cd-org-stat > div:first-child {
    margin-bottom: 4px;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.cd-org-stat > strong {
    display: block;
    overflow: hidden;
    color: #0f172a;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cd-org-warning-card {
    padding: 12px 15px;
    border-left: 4px solid #f59e0b;
}

.cd-org-warning-card .cd-compact-row {
    color: #92400e;
    font-size: 13px;
    font-weight: 600;
}

.cd-org-services-card,
.cd-org-company-card,
.cd-org-record-card,
.cd-org-pbx-card,
.cd-org-crm-card,
.cd-org-ai-card {
    padding: 14px 16px;
}

.cd-org-services-table,
.cd-org-company-table,
.cd-org-pbx-table,
.cd-org-crm-table {
    table-layout: fixed;
}

.cd-org-services-table th,
.cd-org-services-table td,
.cd-org-company-table th,
.cd-org-company-table td,
.cd-org-pbx-table th,
.cd-org-pbx-table td,
.cd-org-crm-table th,
.cd-org-crm-table td {
    width: auto !important;
    padding: 8px 10px;
    vertical-align: middle !important;
    text-align: left !important;
    white-space: normal !important;
}

.cd-org-services-table th:nth-child(1) {
    width: 24% !important;
}

.cd-org-services-table th:nth-child(2) {
    width: 18% !important;
}

.cd-org-services-table th:nth-child(3) {
    width: 42% !important;
}

.cd-org-services-table th:nth-child(4) {
    width: 16% !important;
}

.cd-org-company-table th {
    width: 17% !important;
    color: #475569;
    font-size: 12px;
}

.cd-org-company-table td {
    width: 33% !important;
    overflow-wrap: anywhere;
}

.cd-org-address-contact-grid {
    align-items: start;
    gap: 12px;
}

.cd-org-record-card .cd-compact-row {
    padding: 8px 0;
    font-size: 13px;
}

.cd-org-pbx-table th:nth-child(1) {
    width: 32% !important;
}

.cd-org-pbx-table th:nth-child(2) {
    width: 32% !important;
}

.cd-org-pbx-table th:nth-child(3),
.cd-org-pbx-table th:nth-child(4) {
    width: 18% !important;
}

.cd-org-crm-card .cd-page-header-row {
    align-items: flex-start;
}

.cd-org-crm-card .cd-page-header-row .muted {
    max-width: 640px;
    font-size: 13px;
}

.cd-org-crm-table th {
    width: 19% !important;
    color: #475569;
    font-size: 12px;
}

.cd-org-crm-table td {
    width: 31% !important;
}

.cd-org-ai-card p:last-child {
    margin-bottom: 0;
}

@media (max-width: 1050px) {
    .cd-org-list-table {
        table-layout: auto;
    }

    .cd-org-list-table th,
    .cd-org-list-table td {
        width: auto !important;
    }

    .cd-org-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .cd-org-list-header .cd-page-header-row,
    .cd-org-workspace-header .cd-page-header-row,
    .cd-org-crm-card .cd-page-header-row {
        align-items: stretch;
    }

    .cd-org-list-search {
        width: 100%;
    }

    .cd-org-search-row {
        align-items: stretch;
        width: 100%;
    }

    .cd-org-search-row input[type="search"] {
        width: 100%;
    }

    .cd-org-stats,
    .cd-org-address-contact-grid {
        grid-template-columns: 1fr;
    }

    .cd-org-actions-cell {
        white-space: normal !important;
    }

    .cd-org-actions-cell .btn {
        margin: 2px 2px 2px 0 !important;
    }

    .cd-org-company-table,
    .cd-org-crm-table {
        table-layout: auto;
    }
}

/* Organization launch menu and editing forms */
.cd-org-open-menu {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.cd-org-open-menu summary {
    list-style: none;
    cursor: pointer;
}

.cd-org-open-menu summary::-webkit-details-marker {
    display: none;
}

.cd-org-open-menu summary.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0;
}

.cd-org-open-menu-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1100;
    min-width: 170px;
    padding: 6px;
    border: 1px solid #dbe3ef;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
}

.cd-org-open-menu-link {
    display: block;
    padding: 8px 10px;
    border-radius: 3px;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.cd-org-open-menu-link:hover,
.cd-org-open-menu-link:focus {
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
}

.cd-org-actions-cell .cd-org-open-menu {
    margin-left: 4px;
}

.cd-org-list-card .table-responsive {
    overflow: visible;
}

.cd-org-header-open-menu .cd-org-open-menu-panel {
    min-width: 190px;
}

.cd-org-form-message p {
    margin: 0;
}

.cd-org-edit-card {
    margin-top: 14px;
    border: 1px solid #dbe3ef;
}

.cd-org-edit-company {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
}

.cd-org-edit-summary {
    list-style: none;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.cd-org-edit-summary::-webkit-details-marker {
    display: none;
}

.cd-org-edit-summary::after {
    content: "▾";
    display: inline-block;
    margin-left: 7px;
    color: #64748b;
    font-size: 11px;
    transition: transform 0.15s ease;
}

.cd-org-edit-card[open] > .cd-org-edit-summary::after {
    transform: rotate(180deg);
}

.cd-org-edit-form {
    margin-top: 16px;
}

.cd-org-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
}

.cd-org-form-field {
    min-width: 0;
}

.cd-org-form-field-wide {
    grid-column: 1 / -1;
}

.cd-org-form-field label {
    display: block;
    margin-bottom: 5px;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

.cd-org-form-field input,
.cd-org-form-field select,
.cd-org-form-field textarea {
    box-sizing: border-box;
    width: 100%;
}

.cd-org-form-field textarea {
    min-height: 92px;
    resize: vertical;
}

.cd-org-form-field .muted {
    margin-top: 4px;
    font-size: 11px;
}

.cd-org-form-field .error {
    margin-top: 4px;
    font-size: 12px;
}

.cd-org-form-field-readonly {
    padding: 9px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: #f8fafc;
}

.cd-org-form-field-readonly label {
    margin-bottom: 3px;
}

.cd-org-readonly-value {
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
}

.cd-org-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

@media (max-width: 900px) {
    .cd-org-list-card .table-responsive {
        overflow-x: auto;
    }

    .cd-org-form-grid {
        grid-template-columns: 1fr;
    }

    .cd-org-form-field-wide {
        grid-column: auto;
    }

    .cd-org-actions-cell .cd-org-open-menu-panel {
        position: static;
        min-width: 150px;
        margin-top: 5px;
        box-shadow: none;
    }
}

/* Organization workspace UI refinement */
.cd-org-list-card {
    overflow: visible !important;
}

.cd-org-list-card .table-responsive,
.cd-org-list-table,
.cd-org-list-table tbody,
.cd-org-list-table tr,
.cd-org-list-table td {
    overflow: visible;
}

.cd-org-actions-cell {
    position: relative;
    white-space: nowrap;
}

.cd-org-open-menu[open] {
    z-index: 2200;
}

.cd-org-open-menu[open] .cd-org-open-menu-panel {
    z-index: 2201;
}

.cd-org-edit-host {
    position: relative;
    overflow: visible;
}

.cd-org-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
    margin-bottom: 12px;
    padding-right: 190px;
}

.cd-org-card-heading h2 {
    margin: 0;
}

.cd-org-inline-editor {
    margin: 0;
    padding: 0;
    border: 0;
}

.cd-org-inline-editor.cd-org-edit-company {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.cd-org-inline-editor > summary {
    position: absolute;
    top: 14px;
    right: 16px;
    list-style: none;
    cursor: pointer;
}

.cd-org-inline-editor > summary::-webkit-details-marker {
    display: none;
}

.cd-org-inline-editor > summary::after {
    content: "▾";
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    transition: transform 0.15s ease;
}

.cd-org-inline-editor[open] > summary::after {
    transform: rotate(180deg);
}

.cd-org-editor-panel {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

.cd-org-editor-panel .cd-org-edit-form {
    margin-top: 0;
}

.cd-org-information-table td,
.cd-org-company-table td {
    vertical-align: top;
}

@media (max-width: 900px) {
    .cd-org-list-card {
        overflow: hidden !important;
    }

    .cd-org-list-card .table-responsive {
        overflow-x: auto;
    }

    .cd-org-card-heading {
        padding-right: 0;
    }

    .cd-org-inline-editor > summary {
        position: static;
        display: flex;
        width: fit-content;
        margin: 12px 0 0 auto;
    }

    .cd-org-editor-panel {
        margin-top: 12px;
    }
}