:root {
    --crm-primary: #3b82f6;
    --crm-primary-hover: #2563eb;

    --crm-secondary: #3e4b5d;

    --crm-bg: #f8fafc;
    --crm-card: #ffffff;

    --crm-text: #111827;
    --crm-text-muted: #6b7280;

    --crm-border: #e5e7eb;
}
html,
body {
    max-width: 100%; /* 100vw ki jagah 100% use karein */
    overflow-x: hidden !important;
    background-color: var(--crm-bg);
}

/* Globa;l layout fixed css start -------- */
.lead-page-flex-wrapper {
    display: flex;
    flex-direction: column;

    height: calc(100vh - 64px);
    overflow: hidden;
}

.lead-page-flex-wrapper .lm-header,
.lead-page-flex-wrapper .cl-footer {
    flex-shrink: 0;
}

.lead-page-flex-wrapper .container-xxl {
    flex-grow: 1;

    display: flex;
    flex-direction: column;
    overflow: hidden;

    padding-bottom: 0 !important;
    min-height: 0;
}

.lead-page-flex-wrapper .cf-card {
    flex-shrink: 0;

    transition: all 0.3s ease;
}

/* 5. Table Card (MAGIC ELEMENT - Ye Stretch Hoga) */
.lead-page-flex-wrapper .cl-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    margin-bottom: 0 !important;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
}

.lead-page-flex-wrapper .cl-table-wrapper {
    flex-grow: 1;
    overflow-y: auto;

    overflow-x: auto;
    height: 100%;
}

.lead-page-flex-wrapper .cl-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #e1e4e8;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
x
/* Global layout fixed css end -------- */

/* profile page css */
/* User Avatar */
.crm-avatar {
    width: 36px;
    height: 36px;
}
/* Name-based Initial Avatar */
.crm-initial-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #1e40af);
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 1px solid #e5e7eb;
}

/* Navbar smaller avatar */
.crm-avatar .crm-initial-avatar {
    width: 36px;
    height: 36px;
    font-size: 13px;
}

/* Dropdown Container */
.crm-user-dropdown {
    min-width: 240px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    padding: 6px 0;
}

/* Header */
.crm-user-header {
    padding: 6px 0;
}

.crm-user-img {
    width: 42px;
    height: 42px;
    border: 1px solid #e5e7eb;
}

.crm-user-name {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.crm-user-role {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}

/* Items */
.crm-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    padding: 10px 16px;
    color: #374151;
}

.crm-dropdown-item i {
    font-size: 18px;
    color: #6b7280;
}

.crm-dropdown-item:hover {
    background: #f5f7fb;
    color: #111827;
}

/* Logout */
.crm-logout-btn {
    width: 100%;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s ease;
}

.crm-logout-btn:hover {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

/* Global Action  */
a {
    color: var(--crm-primary);
}
a:hover {
    color: var(--crm-primary-hover);
}
.btn-outline-primary {
    color: var(--crm-primary);
    border-color: var(--crm-primary);
}

.btn-check:checked + .btn-outline-primary {
    background: var(--crm-primary);
    color: #fff;
    border-color: var(--crm-primary);
}
.btn-check + .btn:hover {
    background: var(--crm-primary-hover);
    color: #fff;
    border-color: var(--crm-primary);
}
.cl-actions {
    display: flex;
    gap: 6px;
}

.cl-action {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
    text-decoration: none;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.cl-edit {
    color: #2563eb;
    border-color: #bfdbfe;
}

.cl-edit:hover {
    background: #eff6ff;
}

.cl-delete {
    color: #dc2626;
    border-color: #fecaca;
}

.cl-delete:hover {
    background: #fef2f2;
}
.cl-map {
    color: #d97706; /* warning orange */
    border-color: #fde68a;
}
.cl-map:hover {
    background: #fffbeb;
}
/* Empty State */
.cl-empty {
    text-align: center;
    padding: 30px 0;
    color: #6b7280;
}
.crm-btn {
    background: var(--crm-primary);
    color: #fff;
    border: 1px solid var(--crm-primary);
    padding: 6px 16px;
    font-size: 13px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;

    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.15);
}
.crm-btn:hover {
    background: var(--crm-primary-hover);
    color: white;
}
.crm-btn-cancel {
    background: #cfcdcd;
    color: black;
    border: 1px solid var(--crm-border);
    padding: 6px 16px;
    font-size: 13px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.crm-btn-cancel:hover {
    background: #e3e3e3;
}
.crm-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;

    color: var(--crm-primary);
    background-color: rgba(59, 130, 246, 0.08);
    border: 1px dashed rgba(59, 130, 246, 0.35);

    transition: all 0.2s ease;
}

.crm-add-btn:hover {
    background-color: var(--crm-primary);
    color: #fff;
    border-color: var(--crm-primary);
}

.cf-filter-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0; /* 🔥 CRITICAL: Buttons kabhi sikud ke kharab nahi honge */
    margin-left: auto;
}
.cf-filter-actions .crm-btn,
.cf-filter-actions .crm-btn-cancel,
.cf-filter-actions .cf-btn-advanced {
    height: 26px !important;
    font-size: 12.5px;
    padding: 0 12px;
    border-radius: 4px;
    white-space: nowrap; /* Text 2 line me nahi jayega */
}
.cf-fieldset .select2-container .select2-selection__rendered {
    font-size: 12.5px !important;
    padding-left: 2px !important;
    padding-right: 15px !important; /* Arrow ke liye space */
}

/* --- Select2 Global - --- */

.select2-container--default .select2-selection--single {
    border: 1px solid #ced4da !important;
    height: 38px !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: inherit !important;
    transition: border-color 0.2s;
}
.select2-container--default .select2-selection {
    border-radius: inherit;
}
.select2-container--open.select2-container--below .select2-selection--single {
    border-color: #d9d9d9 !important;
    /* border-radius: 4px 4px 0 0 !important; */
    box-shadow: none !important;
}

.select2-container--open.select2-container--above .select2-selection--single {
    border-color: #d9d9d9 !important;
    border-radius: 0 0 4px 4px !important;
    box-shadow: none !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}
.select2-container--bootstrap-5 .select2-selection {
    border-radius: none;
}
.select2-dropdown {
    border: 1px solid #d9d9d9 !important;
    box-shadow: none !important;
    z-index: 11 !important;
    min-width: 180px !important;
}
.select2-dropdown--below {
    border-top: none !important;
    border-radius: 0 0 4px 4px !important;
}
.select2-dropdown--above {
    border-bottom: none !important;
    border-radius: 4px 4px 0 0 !important;
}

.select2-search--dropdown {
    padding: 4px 5px !important;
}

.select2-search--dropdown .select2-search__field {
    border: 1px solid #ced4da !important;
    border-radius: 0px !important;
    padding: 5px 10px 5px 32px !important;
    outline: none !important;
    box-shadow: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
}

.select2-results__option {
    padding: 8px 12px !important;
    margin: 1px 4px !important;
    border-radius: 2px !important;
    font-size: 14px;
}

.select2-results__option--highlighted[aria-selected] {
    background-color: #e8f0fe !important;
    color: #1f2937 !important;
}

.select2-results__options::-webkit-scrollbar {
    width: 6px !important;
}

.select2-results__options::-webkit-scrollbar-track {
    background: #f8f9fa !important;
    border-radius: 10px;
}

.select2-results__options::-webkit-scrollbar-thumb {
    background: #c1c1c1 !important;
    border-radius: 10px !important;
    border: 1px solid #f8f9fa;
}

.select2-results__options::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8 !important;
}
.select2-container {
    border-radius: inherit !important;
}

.select2-container--default .select2-selection--single {
    border-radius: inherit !important;
}

.select2-container--default.select2-container--focus
    .select2-selection--single {
    border-radius: inherit !important;
    /* border-color: inherit !important; */
    box-shadow: none !important;
    outline: none !important;
}

.select2-container--default.select2-container--open .select2-selection--single {
    border-radius: inherit !important;
    /* border-color: inherit !important; */
    box-shadow: none !important;
}

.select2-container *,
.select2-container *:focus,
.select2-container *:focus-visible {
    border-radius: inherit !important;
    outline: none !important;
}
.select2-container,
.select2-container * {
    outline: none !important;
    box-shadow: none !important;
}

.select2-container:focus,
.select2-container:focus-within,
.select2-container--focus,
.select2-container--open {
    outline: none !important;
    box-shadow: none !important;
}

.select2-container--default .select2-selection--single {
    box-shadow: none !important;
    outline: none !important;
}

.select2-container--default *:focus-visible,
.select2-container--default *:focus {
    outline: none !important;
    box-shadow: none;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: none;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: #ced4da !important;
    box-shadow: none !important;
    outline: none !important;
}
.select2-container--bootstrap-5
    .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5
    .select2-results__option[aria-selected="true"]:not(
        .select2-results__option--highlighted
    ) {
    background-color: transparent !important;
    color: #374151 !important;
}
.select2-container--default .select2-selection--multiple {
    border: 1px solid #d9dee3;
    border-radius: 0.375rem;
    min-height: 38px;
}
.cf-left-section
    .cf-fieldset
    .select2-container--default
    .select2-selection--single
    .select2-selection__arrow
    b {
    position: absolute;
    left: 16px;
    background-size: 13px !important;
}
/* Selected Items (Tags) Styling */
.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice {
    background-color: #e7e7ff;
    border: 1px solid #c7c7ff;
    border-radius: 4px;
    padding: 4px 8px;
    margin-top: 6px;
    color: #696cff;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice__remove {
    color: #ff3e1d !important;
    margin-left: 8px !important;
    margin-right: -10 !important;
    border: none;
    background: transparent !important;
    font-weight: bold !important;
    position: static !important;
    font-size: 21px;
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice__remove:hover {
    background-color: transparent;
    color: #c51d00;
}

.form-select:focus,
.form-control:focus {
    box-shadow: none;
    border-color: #ced4da !important;
}
/* Global Offcanvas header Styling  */
.custom-offcanvas-header {
    padding: 12px 16px;
    border-bottom: 2px solid #2563eb !important; /* blue line */
    align-items: center;
}

/* Heading */
.custom-offcanvas-title {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

/* Close Button */
.custom-offcanvas-close {
    background-color: transparent !important;
    opacity: 1 !important;
    box-shadow: none !important;
    background-size: 15px;
}
.custom-offcanvas-close {
    filter: invert(1) grayscale(100%) brightness(0);
}

/* Bootstrap hover / focus glow remove */
.custom-offcanvas-close:focus,
.custom-offcanvas-close:active {
    box-shadow: none !important;
    outline: none !important;
}
/* A container for our custom menu */
.custom-sidebar-menu .list-group-item {
    border: 0;
    border-left: 3px solid transparent;

    border-radius: 0;
}

/* Style for the active/selected item */

.stage-card {
    border: 1px dashed #ddd;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
}

.drag-handle {
    cursor: grab;
    font-size: 20px;
    color: #888;
    margin-right: 8px;
}

.stage-label {
    font-weight: 600;
    font-size: 14px;
    margin-right: 6px;
}

/* .form-select:focus,
.form-control:focus {
    box-shadow: none;
    border-color: #007bff;
} */

.material-icons-outlined {
    font-size: 18px;
    cursor: pointer;
    color: #666;
}

.sub-stage-label {
    font-size: 13px;
    color: #555;
    margin-right: 6px;
}

/* Champaign Setting Page */
.source-item {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
}

body .source-header {
    /* border-bottom: 1px solid #e9e6e6; */
    /* background-color: #e8e8e8 !important; */
}

.medium-item {
    border: 1px solid #e9ecef;
    border-radius: 6px;
    /* background-color: #ffffff; */
}

.add-medium-section {
    border-radius: 6px;
    /* padding: 15px; */
}

.source-header i {
    transition: transform 0.2s ease;
}

.source-header.expanded i {
    transform: rotate(90deg);
}

/* Info icon styling */
.bx-info-circle {
    color: #6c757d;
    font-size: 14px;
    margin-left: 5px;
    cursor: help;
}

/* Form switch styling */
.form-check-input:checked {
    background-color: var(--crm-primary);
    border-color: var(--crm-primary-hover);
}

/* Radio button styling */
.form-check-input[type="radio"]:checked {
    background-color: var(--crm-primary);
    border-color: var(--crm-primary-hover);
}

/* Edit and Delete button styling */
.edit-source-btn,
.edit-medium-btn {
    padding: 4px 8px;

    background-color: transparent;
}

.edit-source-btn:hover,
.edit-medium-btn:hover {
    /* background-color: #6c757d; */
    color: white;
}

.delete-source-btn,
.delete-medium-btn {
    padding: 4px 8px;
    border: 1px solid #dc3545;
    background-color: transparent;
    color: #dc3545;
}

.delete-source-btn:hover,
.delete-medium-btn:hover {
    background-color: #dc3545;
    color: white;
}

/* Prevent button clicks from expanding/collapsing */
.edit-source-btn,
.delete-source-btn,
.edit-medium-btn,
.delete-medium-btn {
    z-index: 10;
    position: relative;
}

.table-container {
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    padding: 1.5rem;
}

.table thead th {
    /* background-color: #f1f3f5; */
    color: #5e6266;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
    border-bottom-width: 1px;
}

.table th,
.table td {
    vertical-align: middle;
    font-size: 0.875rem;
    white-space: nowrap;
}

.table tbody tr:hover {
    /* background-color: #f8f9fa; */
}

.sort-icon {
    color: #adb5bd;
    margin-left: 0.5rem;
}

.sortable:hover {
    cursor: pointer;
    /* background-color: #e9ecef;5 */
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #0d6efd;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.9rem;
    margin-right: 0.75rem;
}

.user-info {
    display: flex;
    align-items: center;
}

.user-name {
    font-weight: 500;
    color: #212529;
}

.user-subtext {
    font-size: 0.8rem;
    color: #6c757d;
}

.form-check-input {
    width: 14px;
    height: 14px;
}

.load-more-btn-container {
    text-align: center;
    padding: 1rem 0;
    border-top: 1px solid #dee2e6;
}

.footer-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
}

/* Filter button  */
.filter-rule-row {
    display: grid;
    grid-template-columns: 40px 1.2fr 1.5fr auto;
    gap: 15px;
    align-items: center;
    margin-bottom: 1rem;
}

.logical-operator-prefix {
    font-weight: 500;
    color: #6c757d;
    font-size: 0.75rem;
    text-transform: uppercase;
    text-align: center;
    background-color: #e9ecef;
    border-radius: 50rem;
    padding: 0.2rem 0.5rem;
}

.field-condition-group .field-name {
    font-weight: bold;
    margin-right: 8px;
}

.condition-btn {
    background: none !important;
    border: none !important;
    color: #0d6efd !important;
    padding: 0 !important;
    font-weight: normal !important;
    box-shadow: none !important;
}

.condition-btn::after {
    font-size: 0.8em;
    margin-left: 0.4em;
}

.form-select,
.form-control {
    border-radius: inherit;
    border-color: #ced4da;
}

.offcanvas-header {
    border-bottom: 1px solid #dee2e6;
    border-top: none;
    padding: 1rem 1.5rem;
}

.offcanvas-body {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
}

.offcanvas-footer {
    border-top: 1px solid #dee2e6;
    padding: 1rem 1.5rem;
    /* background-color: #f8f9fa; */
}

#filter-rules-container {
    flex-grow: 1;
}

.delete-rule-btn {
    background: none;
    border: none;
    color: #6c757d;
    transition: color 0.2s;
}

.delete-rule-btn:hover {
    color: #dc3545;
}

/* Pill style for AND/OR radio */
.and-or-pills {
    border: 1px solid #dee2e6;
    border-radius: 50rem;
    padding: 2px;
    display: inline-flex;
}

.and-or-pills .form-check-input {
    display: none;
}

.and-or-pills .form-check-label {
    padding: 0.3rem 1rem;
    border-radius: 50rem;
    cursor: pointer;
    transition:
        background-color 0.2s,
        color 0.2s;
}

.and-or-pills .form-check-input:checked + .form-check-label {
    background-color: #0d6efd;
    color: white;
}

.save-filter-section {
    display: none;
}

/* button.remove-rule {
    border: 1px solid #fafafa;
    background-color: transparent;
    color: #e53131;
    padding: 7px 7px;
    border-radius: 4px;
    font-size: 20px;
    line-height: 16px;
}

button i :hover {
    color: #0d6efd;
} */

button.btn.btn-primary.btn-lg.shadow-sm.filter_offcanvas_btn {
    border-radius: 6px !important;
    margin-left: 5px;
    padding: 12px;
    text-align: center;
}

.filter_offcanvas_btn i {
    display: inline-block;
    font-size: 25px;
}

.sidebar-menu .list-group-item {
    border-radius: 8px;
    margin-bottom: 5px;
    border: none;
    transition:
        background-color 0.2s ease-in-out,
        color 0.2s ease-in-out;
    font-size: 0.9rem;
}

.sidebar-menu .list-group-item.active {
    /* background-color: #e7f1ff; */
    color: #0d6efd;
    font-weight: 600;
}

.sidebar-menu .list-group-item:not(.active):hover {
    /* background-color: #f1f3f5; */
}

.card {
    border: none;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 0;
}

.card-header-tabs .nav-link.active {
    border-color: #dee2e6 #dee2e6 #fff;
    font-weight: 600;
    color: #0d6efd;
}

dt {
    font-weight: 600 !important;
    color: #495057;
}

dd {
    color: #6c757d;
}

/* --- Timeline Styles --- */

/* Main container for the arrow stepper */

.arrow-stepper .nav-item {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #e9ecef;

    color: #6c757d;
    height: 32px;

    margin-right: 16px;
}

/* The link inside the step */
.arrow-stepper .nav-item .nav-link {
    color: inherit;
    font-weight: 600;
    background: none !important;
    border: none !important;
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrow-stepper .nav-item .nav-link small {
    font-size: 0.8rem;
}

/* Creates the arrow shape on the right */
/* .arrow-stepper .nav-item::after {
    content: "";
    position: absolute;
    top: 0;
    right: -16px;

    width: 0;
    height: 0;
    border-top: 16px solid transparent;

    border-bottom: 16px solid transparent;

    border-left: 16px solid #e9ecef;

    z-index: 2;
} */

/* Creates the cutout shape on the left to fit the arrow */
.arrow-stepper .nav-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 16px solid transparent;

    border-bottom: 16px solid transparent;

    border-left: 16px solid #ffffff;

    z-index: 1;
}

.arrow-stepper .nav-item:first-child::before {
    display: none;
}

.arrow-stepper .nav-item:last-child::after {
    display: none;
}

/* --- Step States --- */

.arrow-stepper .nav-item.active,
.arrow-stepper .nav-item.completed {
    background-color: #b7c9f1;

    color: black;
}

/* Make sure the arrow color matches the active/completed background */
.arrow-stepper .nav-item.active::after,
.arrow-stepper .nav-item.completed::after {
    border-left-color: #d3dff9;
}

/* Lead Detail Style */
.lead-summary-cards .card {
    box-shadow: none;

    border: 1px solid #e7e7e7;

    /* border-radius: 0.375rem; */
}

/* Card ke upar rangin border */
.top-border-blue {
    border-top: 2px solid #0d6efd;
}

.top-border-red {
    border-top: 2px solid #dc3545;
}

.top-border-green {
    border-top: 2px solid #198754;
}

/* Profile initial 'P' ka style */
.avatar {
    width: 40px;
    height: 40px;
}

.avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-weight: 500;
    font-size: 1.2rem;
}

.lead-score-top {
    position: relative;
}

.corner-arrow {
    position: absolute;
    bottom: -12px;

    right: 0;
    width: 0;
    height: 0;

    border-bottom: 45px solid #e7f2ff;

    border-left: 45px solid transparent;
    z-index: 5;
}

.corner-arrow i {
    position: absolute;
    right: 6px;

    bottom: -38px;

    color: #0d6efd;

    font-size: 1.2rem;
}

/* --- Arrow ka Style yahan khatm --- */

/* .lead-profile-card h5 {
    font-size: 1rem;
    font-weight: 600;
} */
/*
.lead-profile-card .small {
    font-size: 0.8rem;
} */
/*
.lead-profile-card .card-body {
    padding-bottom: 1.1rem;
} */

.lead-summary-cards .card {
    border-top-left-radius: 0%;
    border-top-right-radius: 0%;
}

.percent-icon {
    width: 38px;
    height: 38px;
    border: 2px solid #5a5a5a;

    border-radius: 49% !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: #5a5a5a;
    margin: 0 auto;
}

/* .sidebar-menu .list-group-item {
    border-radius: 8px;
    margin-bottom: 5px;
    border: none;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    font-size: 0.9rem;
} */

/* .sidebar-menu .list-group-item.active {
    color: #0d6efd;
    font-weight: 600;
} */

.sidebar-menu .list-group-item:not(.active):hover {
    /* background-color: #f1f3f5; */
}

.card {
    border: none;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 0;
}

.card-header-tabs .nav-link.active {
    border-color: #dee2e6 #dee2e6 #fff;
    font-weight: 600;
    color: #0d6efd;
}

dt {
    font-weight: 600 !important;
    color: #495057;
}

dd {
    color: #6c757d;
}

/* --- Timeline Styles --- */
.timeline-container {
    position: relative;
}

.timeline-container::before {
    content: "";
    position: absolute;
    left: 121px;
    top: 15px;
    bottom: 15px;
    width: 2px;
    background-color: var(--crm-primary-hover);
    z-index: 1;
}

.timeline-item-wrapper {
    padding: 1.25rem 0;
    border-bottom: 1px solid #e9ecef;
}

.timeline-item-wrapper:last-child {
    border-bottom: none;
}

.timeline-item {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.timeline-timestamp {
    flex-shrink: 0;
    width: 90px;
    text-align: right;
    color: #6c757d;
    font-size: 0.85rem;
}

.timeline-marker {
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--crm-primary);
    border: 2px solid var(--crm-primary-hover);
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.timeline-marker i {
    font-size: 1.1rem;
}

.timeline-content {
    flex-grow: 1;
}

.timeline-badge {
    font-weight: 600;
}

.sticky-icon-bar {
    position: fixed;
    top: 0%;
    right: 0%;
    z-index: 99;
    background-color: #fff;
    bottom: 0%;
    border-left: 1px solid rgb(234, 229, 229);
}
.followup-container {
    max-height: 400px;
    overflow: auto;
    border: 1px solid whitesmoke;
    padding: 2px 10px;
}
.timeline-scrolable {
    max-height: 400px;
    overflow: auto;
    border: 1px solid whitesmoke;
    padding: 2px 10px;
}

/* Main container for the arrow stepper */

.arrow-stepper .nav-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #e8e8e8;
    color: #6c757d;
    height: 32px;
    margin-right: 10px;
}
/* FIRST item */
.arrow-stepper .nav-item:first-child {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

/* LAST item */
.arrow-stepper .nav-item:last-child {
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    margin-right: 0;
}
/* The link inside the step */
.arrow-stepper .nav-item .nav-link {
    color: inherit;
    font-weight: 600;
    background: none !important;
    border: none !important;
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrow-stepper .nav-item .nav-link small {
    font-size: 0.8rem;
}

/* Creates the arrow shape on the right */
.arrow-stepper .nav-item::after {
    content: "";
    position: absolute;
    top: 0;
    right: -15px;

    width: 0;
    height: 0;
    border-top: 16px solid transparent;

    border-bottom: 16px solid transparent;

    border-left: 16px solid #e8e8e8;

    z-index: 2;
}

.arrow-stepper .nav-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 16px solid transparent;

    border-bottom: 16px solid transparent;

    border-left: 16px solid #ffffff;

    z-index: 1;
}

.arrow-stepper .nav-item:first-child::before {
    display: none;
}

.arrow-stepper .nav-item:last-child::after {
    display: none;
}

.arrow-stepper .nav-item.active::after,
.arrow-stepper .nav-item.completed::after {
    border-left-color: #b7c9f1;
}

/* Lead Detail Style */
.lead-summary-cards .card {
    box-shadow: none;

    border: 1px solid #e7e7e7;

    border-radius: inherit;
}

.top-border-blue {
    border-top: 2px solid #0d6efd;
}

.top-border-red {
    border-top: 2px solid #dc3545;
}

.top-border-green {
    border-top: 2px solid #198754;
}

/* Profile initial 'P'  */
.avatar {
    width: 40px;
    height: 40px;
}

.avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-weight: 500;
    font-size: 1.2rem;
}

.bg-label-primary {
    background-color: #e7f2ff !important;
    color: #0d6efd !important;
    /* margin-left: 12px; */
}

.lead-score-top {
    position: relative;
}

.corner-arrow {
    position: absolute;
    bottom: -12px;

    right: 0;
    width: 0;
    height: 0;

    border-bottom: 45px solid #e7f2ff;

    border-left: 45px solid transparent;
    z-index: 5;
}

.corner-arrow i {
    position: absolute;
    right: 6px;

    bottom: -38px;

    color: #0d6efd;
    /* Gehra neela icon */
    font-size: 1.2rem;
}

/* --- Arrowstyle end--- */

.list-unstyled strong {
    font-weight: 600;
    color: #333;
}

/* .lead-profile-card h5 {
    font-size: 1rem;
    font-weight: 600;
} */

/* .lead-profile-card .small {
    font-size: 0.8rem;
} */
/*
.lead-profile-card .card-body {
    padding-bottom: 1.1rem;
    border-radius: inherit;
} */

.lead-summary-cards .card {
    border-top-left-radius: 0%;
    border-top-right-radius: 0%;
}

.percent-icon {
    width: 38px;
    height: 38px;
    border: 2px solid #5a5a5a;

    border-radius: 49% !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: #5a5a5a;
    margin: 0 auto;
}
/* user dashboard styling  */
/* Tabs container */
.dashboard-tabs {
    border-bottom: 1px solid #e5e7eb;
}

.dashboard-tabs .nav-link {
    border: none !important;
    background: transparent !important;
    font-size: 14px;
    font-weight: 500;
    color: #9ca3af;
    padding: 10px 18px;
    margin-right: 8px;
    position: relative;
}

/* Inactive hover (very subtle) */
.dashboard-tabs .nav-link:hover {
    color: #6b7280;
}

/* ACTIVE TAB – white box + underline */
.dashboard-tabs .nav-link.active {
    color: #111827;
    background: #dbe9ff !important;

    border-radius: 4px 4px 0 0;
}

.dashboard-tabs .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;

    width: 100%;
    height: 3px;
    background: #2563eb;
}
/* user wise lead and  appluication count */
/* Card polish */
.user-wise-card {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #ffffff;
    border-radius: inherit;
}

/* Header */
.user-wise-header {
    padding: 8px 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
}
.user-wise-header h6 {
    font-weight: 600;
    color: black;
}

.chart-center-wrapper {
    /* width: 90%; */
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 12px;
}

/* Chart itself */
#chart-user-wise {
    width: 100%;
}
/* lead stage segration */
.lead-stage-card {
    border: 1px solid #e5e7eb;
    border-radius: inherit;
    background: #ffffff;
}

/* Header */
.lead-stage-header {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 12px 16px;
}

/* Title */
.lead-stage-header h6 {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

/* Help icon */
.lead-stage-header i {
    font-size: 16px;
    cursor: pointer;
}
/* lead sub stage segretion */

.lead-stage-card .lead-stage-chart {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.chart-bottom-wrapper {
    width: 100%;
}

#chart-lead-substage {
    width: 100%;
    height: 260px;
}
/* Productivity report */
/* Wrapper */
.quick-views-wrapper {
    display: flex;
    align-items: baseline;
    gap: 10px;
    /* border-bottom: 1px solid #e5e7eb; */
    padding-bottom: 6px;
}

/* Label */
.quick-views-label {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
}

/* Arrows */
.quick-nav-arrow {
    font-size: 18px;
    color: var(--crm-primary);
    cursor: pointer;
    user-select: none;
}

.quick-nav-arrow.disabled {
    color: #9ca3af;
}

/* More icon */
.quick-nav-more {
    font-size: 18px;
    color: #9ca3af;
    cursor: pointer;
    margin-left: auto;
}

/* Tabs list */
.quick-views-tabs {
    display: flex;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Tab buttons = text links */
.quick-views-tabs .nav-link {
    background: none !important;
    border: none !important;
    padding: 0px 0;

    font-size: 13px;
    font-weight: 500;
    color: #374151;

    position: relative;
}
/* Activity  Feed ----------------- */

/* Active tab */
.quick-views-tabs .nav-link.active {
    color: var(--crm-primary);
}

/* Active underline */
.quick-views-tabs .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background-color: var(--crm-primary);
}
/* ================================
   CRM LEAD SUMMARY (SCOPED)
================================ */

/* Wrapper */
.crm-lead-summary .table-responsive {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #ffffff;
    overflow: auto;
}

/* Table reset */
.crm-lead-summary .table {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

/* ================= HEADER ================= */
.crm-lead-summary .table thead th {
    background-color: #e5e7eb !important;
    color: #1f2937; /* dark grey */
    font-size: 13px;
    font-weight: 600;
    padding: 14px 12px;
    white-space: nowrap;
    vertical-align: middle;
    border-bottom: 1px solid #d1d5db;
    text-align: center;
}

.crm-lead-summary .table thead th:first-child {
    text-align: left;
}

/* ================= BODY ================= */
.crm-lead-summary .table tbody td {
    font-size: 13px;
    color: #374151;
    padding: 12px 12px;
    vertical-align: middle;
    border-top: 1px solid #eef2f7;
    text-align: center;
}

/* First column (Owner) */
.crm-lead-summary .table tbody td:first-child {
    text-align: left;
}

/* Owner name */
.crm-lead-summary .table tbody td:first-child strong,
.crm-lead-summary .table tbody td:first-child .fw-semibold {
    font-weight: 600;
    color: #111827;
}

/* Owner email */
.crm-lead-summary .table tbody td:first-child small {
    display: block;
    font-size: 11px;
    color: #6b7280;
    margin-top: 2px;
}

/* ================= BLUE NUMBERS ================= */
.crm-lead-summary .table tbody td a,
.crm-lead-summary .table tbody td .text-primary,
.crm-lead-summary .table tbody td span.text-primary {
    color: var(--crm-primary) !important;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

/* ================= ROW HOVER ================= */
.crm-lead-summary .table-hover tbody tr:hover {
    background-color: #f8fafc;
}

/* ================= INFO ICON ================= */
.crm-lead-summary .info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 1px solid #9ca3af;
    border-radius: 50%;
    font-size: 10px;
    color: #6b7280;
    margin-left: 4px;
    cursor: help;
}

/* ================= SORT ICON ================= */
.crm-lead-summary .sort-icon {
    display: inline-flex;
    flex-direction: column;
    margin-left: 6px;
    opacity: 0.35;
}

.crm-lead-summary .sortable:hover .sort-icon {
    opacity: 0.8;
}

.crm-lead-summary .sort-icon.asc .sort-asc,
.crm-lead-summary .sort-icon.desc .sort-desc {
    color: var(--crm-primary);
}

/* ================= STICKY FIRST COLUMN ================= */
.crm-lead-summary .table-responsive .table th:first-child,
.crm-lead-summary .table-responsive .table td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #ffffff;
    border-right: 1px solid #e5e7eb;
}
/* Lead Manager  */
.lm-header {
    height: 48px;
    background-color: #ffffff;
    border-bottom: 1px solid #e6e6e6;
    border-top: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ld-header {
    position: sticky;
    top: 64px;
    z-index: 6;
}
/* Center content */
.lm-header-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 18px;
}
.lm-back {
    width: 29px;
    height: 29px;
    border: 1px solid #e5e7eb; /* light gray border */
    border-radius: inherit;
    background: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;

    right: 66px;
    top: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Arrow icon */
.lm-back-icon {
    font-size: 20px;
    color: #6b7280;
}

/* Hover effect */
.lm-back:hover {
    border-color: #2563eb;
    background-color: #f9fafb;
}

.lm-back:hover .lm-back-icon {
    color: #2563eb;
}
/* Title */
.lm-title {
    font-size: 18px;
    font-weight: 700;
    color: #000000;
    line-height: 1;
}

/* Play icon */
.lm-play {
    font-size: 18px;
    color: var(--crm-primary);
    line-height: 1;
    cursor: pointer;
}
/* Search */
/* .lm-search {
    position: relative;
    display: flex;
    align-items: center;
    right: 18px;
} */

/* Icon */
.lm-search-icon {
    font-size: 18px;
    color: var(--crm-secondary);
    cursor: pointer;
    z-index: 3;
}

.lm-search-input {
    width: 0;
    opacity: 0;
    pointer-events: none;

    font-size: 13px;
    color: var(--crm-text);

    padding: 8px 12px 8px 34px;
    background: var(--crm-bg);
    border: none;
    border-radius: 20px;
    outline: none;
    transition:
        width 0.25s ease,
        opacity 0.2s ease;
}

.lm-search.active .lm-search-input {
    width: 200px;
    opacity: 1;
    pointer-events: auto;
    border: 1px solid var(--crm-border);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.lm-search.active .lm-search-icon {
    position: absolute;
    left: 10px;
    color: var(--crm-secondary);
}
/* ===== Filters Bar Container ===== */
/* Card Container */
.cf-card {
    background: #fbfbfb;
    border: 1px solid #d1d5db8a;
    border-radius: inherit;
    box-shadow: -1px 5px 6px rgb(0 0 0 / 4%);
    width: 100%;
    margin-bottom: 10px;
    max-height: 500px;
    opacity: 1;
    overflow: hidden;
    margin-bottom: 10px;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.cf-card.collapsed {
    max-height: 0 !important;
    opacity: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0 !important;
    pointer-events: none;
}
.cf-body {
    padding: 6px 10px;
}

/* Main Flex Container */
.cf-container {
    display: flex;
    align-items: center;
    flex-wrap: nowrap !important;
    gap: 8px;
    width: 100%;
    overflow: visible;
}

/* --- LEFT SECTION (Inputs & Icons) --- */
.cf-left-section {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    flex-wrap: nowrap !important;
    gap: 8px;
    min-width: 0;
}

/* Icon Wrapper */
.cf-icon-wrapper {
    flex-shrink: 0;
    margin-right: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 34px;
}
.cf-main-icon {
    font-size: 32px;
    color: var(--crm-primary);
}
.cf-gear-bg {
    position: absolute;
    bottom: 10px;
    right: -1px;
    background: #fff;
    border-radius: 50%;
    width: 17px;
    height: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cf-sub-icon {
    font-size: 15px;
    color: var(--crm-primary);
}

/* Fieldset (The Box) */
.cf-fieldset {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 0 6px;
    margin: 0;
    height: 26px;
    display: flex;
    align-items: center;
    position: relative;
    background-color: #fff;

    /* 🔥 THE ELASTIC TRICK: */
    flex: 1 1 0%;
    min-width: 85px !important;
    max-width: 200px;
    transition: all 0.2s ease;
}
.cf-fieldset:hover,
.cf-fieldset:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}
/* Legend (Label on Border) - FIX FOR "CUTTING" */
.cf-legend {
    position: absolute;
    top: -7px;
    left: 6px;
    padding: 0 2px;
    background-color: #fff;
    font-size: 9px;
    color: #363636;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    z-index: 5;
    width: auto;
    max-width: calc(100% - 10px);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Input Fields */
.cf-input-group {
    width: 100%;
    display: flex;
    align-items: center;
}
.cf-input,
.cf-select {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 9.5px;
    color: #374151;
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cf-input-icon {
    flex-shrink: 0;
    color: #8592a3;
    font-size: 15px;
    margin-left: 4px;
}

/* --- RIGHT SECTION (Buttons) --- */
.cf-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Lead Button */
.cf-btn-lead {
    background-color: #696cff;
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.cf-btn-lead:hover {
    background-color: #5f64eb;
}

/* Advanced Filter Link */
.cf-btn-advanced {
    background: none;
    border: none;
    color: var(--crm-primary);
    font-size: 14px;
    font-weight: 600;
    display: flex;
    height: 38px;
    border: 1px dashed #93c5fd !important;
    border-radius: 6px;
    align-items: center;
    cursor: pointer;
    padding: 0 14px;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.cf-btn-advanced:hover {
    background: #dbeafe !important;
    border-color: #3b82f6 !important;
}

/* Dropdown Container */
.cf-dropdown {
    position: relative;
    display: inline-block;
}

/* Select2 Fixes */
.cf-fieldset .select2-container {
    width: 100% !important;
}
.cf-fieldset .select2-container .select2-selection--single {
    border: none !important;
    height: 22px !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
}
.cf-fieldset .select2-container .select2-selection__rendered {
    padding-left: 0 !important;
    color: #000000 !important;
    font-size: 11px !important;
}
.cf-fieldset .select2-container .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
}
/* Lead table  */
/* --- Custom Leads Table Styles  --- */

/* 1. Main Card Container */
.cl-card {
    background: #fff;
    border: 1px solid #d9dee3;
    border-radius: inherit;
    box-shadow: 0 2px 6px rgba(159, 81, 81, 0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

/* 2. Table Wrapper


.cl-table-wrapper{
width: 100%;
overflow-x: auto;
overflow-y: hidden;
}
/* 3. Table Styling */
.cl-table {
    width: 100%;
    border-collapse: collapse;
    /* min-width: 1200px; */
}
.cl-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: #e1e4e8;
}
/* Header */
.cl-table thead tr {
    background-color: #e1e4e8;
    border-bottom: 1px solid #d9dee3;
}

.cl-table th {
    padding: 12px 15px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--crm-text);
    white-space: nowrap;
}

/* Sort Icon */
.cl-sort-icon {
    font-size: 10px;
    color: #a1acb8;
    margin-left: 5px;
}

/* Body Rows */
.cl-table tbody tr {
    border-bottom: 1px solid #ebeef0;
}
.cl-table tbody tr:last-child {
    border-bottom: none;
}

.cl-table td {
    padding: 8px 10px;
    font-size: 13px;
    color: var(--crm-secondary);
    vertical-align: middle;
    white-space: nowrap;
}

.cl-table tbody tr:hover {
    background-color: #f9f9f9;
}

/* Checkbox */
.cl-checkbox {
    cursor: pointer;
    width: 1.25em;
    height: 1.25em;
    accent-color: #696cff;
}
/* Sticky checkbox column (left) */
.cl-table th:first-child,
.cl-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 4;
    background-color: #ffffff;
}

.cl-table thead th:first-child {
    z-index: 5;
    background-color: #e1e4e8;
}

/* --- Yajra DataTable overrides (keeps CRM table look) --- */
.yajra-dataTable-Wrapper {
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}
.dataTables_scrollHead thead th:first-child {
    z-index: 5;
    background-color: #e1e4e8 !important;
}
.dataTables_scrollHead th:first-child {
    position: sticky !important;
    left: 0;
    z-index: 5;
    background: #fff;
}

/* Body ID */
.dataTables_scrollBody td:first-child {
    position: sticky;
    left: 0;
    z-index: 4;
    background: #fff !important;
}
.dataTables_scrollBody tbody tr td:nth-child(2) {
    color: #0d6efd;
    font-weight: 500;
}
.dataTables_scrollHeadInner,
.dataTables_scrollHead {
    padding-right: 0px !important;
}
#users-table tbody tr td:nth-child(2) {
    color: #697a8d;
    font-weight: 500;
}
#users-table tbody tr td:nth-child(3) {
    color: #0d6efd;
    font-weight: 500;
}
/* Border shadow for separation */
.dataTables_scrollBody td:first-child,
.dataTables_scrollHead th:first-child {
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
}
.dataTables_wrapper table.cl-table {
    margin: 0 !important;
    border-collapse: collapse;
}
.dataTables_wrapper .dataTables_scrollHead table.cl-table,
.dataTables_wrapper .dataTables_scrollBody table.cl-table {
    margin: 0 !important;
}
.dataTables_wrapper .dataTables_scrollBody {
    max-height: 420px;
    overflow-y: auto !important;
}
/* Fix extra white space on the right of the header / last column */
.dataTables_wrapper .dataTables_scrollHead,
.dataTables_wrapper .dataTables_scrollBody {
    width: 100% !important;
}

table.dataTable.cl-table.no-footer {
    border-bottom: none;
}
table.dataTable.cl-table thead th,
table.dataTable.cl-table tbody td {
    background-color: transparent;
}

/* 4. Footer  */
.cl-footer {
    padding: 8px;
    text-align: center;
    background-color: #f5f5f9;
}

.cl-btn-load {
    background-color: #fff;
    border: 1px solid #d9dee3;
    color: #697a8d;
    padding: 6px 20px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
}

.cl-btn-load:hover {
    background-color: #e9ecef;
    color: #566a7f;
}
/* ---------Lead detail page styling ------------- */
/* --Lead Profile card  */
/* Card */
.lead-profile-card {
    border: 1px solid #e5e7eb;
    border-top: 2px solid #2563eb;
    background: #fff;
    border-radius: inherit;
    height: 100%;
}

/* Body */
.lead-card-body {
    padding: 12px;
}

/* Top section */
.lead-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* User info */
.lead-user {
    display: flex;
    align-items: fl;
}

.lead-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10%;
    background: #e0e7ff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    border: 2px solid #4787f5;
    position: relative;
    top: 6px;
}

.lead-avatar-text {
    font-weight: 600;
    color: #2563eb;
}

.lead-basic h5 {
    margin: 0;
    font-size: 19px;
    text-transform: uppercase;
    font-weight: 700;
    color: black;
}

.stage-detail {
    font-size: 13px;
    font-weight: 600;
    color: black;
    display: flex;
    align-items: center;
    gap: 3px;
}
.stage-detail span {
    color: #497ed9;
    cursor: pointer;
    font-weight: 400;
}
.stage-detail i {
    color: #497ed9;
    cursor: pointer;
}
/* Scan */
.lead-scan {
    text-align: center;
    color: #000000;
}

.lead-scan i {
    font-size: 22px;
}

.lead-scan small {
    display: block;
    font-size: 10px;
    color: black;
}

/* Details */
.lead-details p {
    margin: 0 0 6px;
    font-size: 13px;
    color: black;
}
.lead-details i {
    color: #ef4444;
    font-size: 16px;
    margin-left: 6px;
    vertical-align: middle;
    cursor: pointer;
}
.lead-mobile {
    display: flex;
    align-items: center;
    gap: 6px;
}
/* ------Lead Status---- */
/* Card */
.lead-stats-card {
    border: 1px solid #e5e7eb;
    border-top: 2px solid #16a34a; /* green */
    background: #fff;
    border-radius: 0;
}

/* Body */
.lead-stats-body {
    padding: 14px 16px;
}

/* Grid layout */
.lead-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Column */
.lead-stats-col small {
    font-size: 13px;
    color: #111827;
}

.lead-stats-list {
    margin: 5px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: #111827;
}

.lead-stats-list li {
    margin-bottom: 4px;
}

/* Text */
.lead-stats-text {
    margin-top: 3px;
    font-size: 13px;
    color: #111827;
    text-transform: uppercase;
}
/* ----Left sidebar */
/* --- Custom Sidebar Styles  --- */
.cs-sidebar-wrapper {
    width: 100%;
    background-color: #fff;
    border-right: 1px solid #e0e0e0;
    padding: 0;
    height: 100%;
}

.cs-sidebar {
    display: flex;
    flex-direction: column;
}

/* Base Item Style */
.cs-item {
    position: relative;
    align-items: center;
    padding: 14px 20px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    color: #4b4b4b;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fff;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

/* --- THE BLUE STRIP (Hidden by default) --- */
.cs-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--crm-primary);
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Icon Style */
.cs-item .cs-icon {
    font-size: 18px;
    margin-right: 12px;
    color: #757575;
    transition: color 0.2s ease;
}

/* --- 1. HOVER STATE (Sirf Light Gray Background) --- */
.cs-item:hover {
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.04) 0%,
        rgba(255, 255, 255, 0) 100%
    );
    color: #212121;
}

.cs-item:hover .cs-icon {
    color: #555;
}

/* --- 2. ACTIVE STATE (Blue Strip + Gray Background) --- */
.cs-item.active {
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.06) 0%,
        rgba(255, 255, 255, 0) 100%
    );
    color: #212121;
    font-weight: 600;
}

/* Active hone par Blue Strip dikhao */
.cs-item.active::before {
    opacity: 1;
}

/* Active hone par Icon Blue */
.cs-item.active .cs-icon {
    color: black;
}

/* Remove default focus outline */
.cs-item:focus {
    outline: none;
}
/* Lead Details View styling  */
/* ===== Lead Details View ===== */

.lead-details-view {
    border: 1px solid #e5e7eb;
    background: #fff;
}

/* Header */
.ldv-header {
    border-bottom: 1px solid #e5e7eb;
    padding: 12px 16px 0;
}

.ldv-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 8px;
    border-bottom: 2px solid #2563eb;
}

.ldv-title {
    font-size: 14px;
    font-weight: 600;
    color: #2563eb;
}

.ldv-edit i {
    font-size: 14px;
    color: #6b7280;
    transition: color 0.2s ease;
}

.ldv-edit:hover i {
    color: #2563eb;
}

/* Body */
.ldv-body {
    padding: 16px;
}

/* List */
.ldv-list {
    margin: 0;
}

/* Row */
.ldv-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    padding: 6px 0;
}

/* Label */
.ldv-row dt {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

/* Value */
.ldv-row dd {
    margin: 0;
    font-size: 13px;
    color: #374151;
}

/* Info icon */
.ldv-info {
    font-size: 13px;
    margin-left: 4px;
    color: #9ca3af;
}
/* --- Custom Follow-Up Section (Meritto CRM Style) --- */

/* 1. Main Card Wrapper */
.cfu-wrapper {
    background: #fff;
    /* border: 1px solid #d9dee3; */
    width: 100%;
    border-radius: inherit;
    /* margin-bottom: 20px; */
    /* font-family: "Segoe UI", sans-serif; */
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02); */
}

/* 2. Header (Compact Height) */
.cfu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 15px;
    border-bottom: 1px solid #ebeef0;
    background-color: #fff;
    border-radius: 4px 4px 0 0;
}

/* Title (Black & Bold) */
.cfu-title {
    margin: 0;
    font-size: 17px;

    color: #2b2b2b;
    /* text-transform: uppercase; */
    letter-spacing: 0.5px;
}

/* 3. Actions (Right Side) */
.cfu-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 4. Dropdown Button (Premium Look) */
.cfu-btn {
    background-color: #fff;
    border: 1px solid #d9dee3;
    color: #566a7f;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 80px;
    height: 32px;
}

.cfu-btn:hover {
    background-color: #f8f9fa;
    border-color: #b4bdc6;
    color: #333;
}

.cfu-btn:focus {
    border-color: #696cff;
    outline: none;
}

/* 5. Flatpickr Date Input Styling */
.cfu-date-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.cfu-date-input {
    background-color: #fff !important;
    border: 1px solid #d9dee3;
    color: #566a7f;
    padding: 6px 10px 6px 30px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 4px;
    width: 140px;
    height: 32px;
    outline: none;
    cursor: pointer;
}

.cfu-date-input:focus {
    border-color: #696cff;
}

.cfu-calendar-icon {
    position: absolute;
    left: 10px;
    color: #a1acb8;
    font-size: 15px;
    pointer-events: none;
    z-index: 1;
}

/* Body Area */
.cfu-body {
    padding: 15px;
    min-height: 150px;
}
/* --- Custom Push Lead Design (Fixed & Functional) --- */

/* 1. Main Wrapper */
.cpl-wrapper {
    background: #fff;
    /* border: 1px solid #d9dee3; */
    /* border-radius: 6px; */
    width: 100%;
    /* margin-bottom: 20px; */
    /* font-family: "Segoe UI", sans-serif; */
    /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02); */
}

/* 2. Header */
.cpl-header {
    padding: 5px 20px;
    border-bottom: 1px solid #ebeef0;
    background-color: #fff;
}
.cpl-title {
    margin: 0;
    font-size: 17px;
    /* font-weight: 700; */
    color: #2b2b2b;
}

/* 3. Navigation  */
.cpl-navbar {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #ebeef0;
    background-color: #fff;
    gap: 10px;
    flex-wrap: wrap;
}

/* Tab Button Styling */
.cpl-wrapper .nav-link.cpl-nav-item {
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 3px;
    color: #566a7f;
    background-color: #f3f4f6;
    border: 1px solid transparent;
    transition: all 0.2s;
    cursor: pointer;
    margin: 0;
}

.cpl-wrapper .nav-link.cpl-nav-item:hover {
    background-color: #e5e7eb;
    color: #333;
}

/* Active State (Overrides Bootstrap active) */
.cpl-wrapper .nav-link.cpl-nav-item.active {
    background-color: #ebf1ff !important;
    color: #2563eb !important;
    border: 1px solid #c7d2fe;
    font-weight: 600;
}

/* Disabled State */
.cpl-wrapper .disabled-link {
    opacity: 0.6;
    cursor: not-allowed !important;
    pointer-events: none;
    background-color: #f3f4f6;
}

/* Log Button (Right Aligned) */
.cpl-wrapper .log-btn {
    margin-left: auto;
    background: transparent !important;
    border: 1px solid #d9dee3 !important;
    color: #566a7f !important;
}

/* 4. Body Content */
.cpl-body {
    padding: 25px;
}

/* Section Title */
.cpl-section-title {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #566a7f;
    margin-bottom: 25px;
}

/* 5. Inputs & Selects (Overrides .form-control & .form-select) */
.cpl-wrapper .form-control,
.cpl-wrapper .form-select {
    display: block;
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #697a8d;
    background-color: #fff;
    border: 1px solid #d9dee3;
    border-radius: 4px;
    box-shadow: none; /* Removes Bootstrap blue shadow */
}

.cpl-wrapper .form-control:focus,
.cpl-wrapper .form-select:focus {
    border-color: #696cff;
    box-shadow: 0 0 0 2px rgba(105, 108, 255, 0.1); /* Custom subtle shadow */
}

/* Labels */
.cpl-label {
    font-size: 13px;
    font-weight: 600;
    color: #566a7f;
    margin-bottom: 6px;
    display: block;
}

/* Checkboxes */
.cpl-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 5px;
}
.cpl-wrapper .form-check-input {
    cursor: pointer;
    border-color: #d9dee3;
}
.cpl-wrapper .form-check-input:checked {
    background-color: var(--crm-primary) !important;
    border-color: var(--crm-primary-hover) !important;
}
.cpl-wrapper .form-check-label {
    font-size: 14px;
    color: #566a7f;
    cursor: pointer;
}

/* Buttons */
.cpl-action-center {
    display: flex;
    justify-content: center;
    margin-top: 25px;
}

/* Info Box */
.cpl-info-box {
    background-color: #f8f9fa;
    border: 1px solid #ebeef0;
    border-radius: 6px;
    padding: 15px;
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 13px;
    color: #566a7f;
}

/* Logs */
.cpl-logs-container {
    border: 1px solid #ebeef0;
    background: #fafafa;
    border-radius: 4px;
    min-height: 100px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/* ===== CALL LOGS ===== */

#callLogsContainer {
    padding: 12px 16px;
}

#callLogsContainer .call-log-item {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    font-size: 13px;
}

#callLogsContainer .call-log-item:last-child {
    border-bottom: none;
}

/* TYPE */
#callLogsContainer .call-log-type {
    font-size: 14px;
    color: #222;
    margin-bottom: 6px;
}

#callLogsContainer .call-status {
    font-weight: 600;
}

#callLogsContainer .call-status.answered {
    color: #0f7b3b;
}

/* META */
#callLogsContainer .call-log-meta {
    color: #777;
    line-height: 1.6;
}

#callLogsContainer .call-log-meta span {
    font-weight: 600;
    color: #000;
}

/* RECORDING */
#callLogsContainer .call-recording {
    display: inline-block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #0f7b3b;
    text-decoration: none;
}

#callLogsContainer .call-recording:hover {
    text-decoration: underline;
}

/* FOOTER */
#callLogsContainer .call-log-footer {
    margin-top: 4px;
    color: #777;
}

#callLogsContainer .call-log-footer span {
    font-weight: 600;
    color: #000;
}
/* ---------Lead detail page styling  end---------------- ------------- */
/* ---------------------Setting -page Styling start ----------------- */
.crm-settings-layout {
    min-height: calc(100vh - 120px);
    /* header height adjust if needed */
    align-items: stretch; /* 👈 IMPORTANT */
}

.crm-settings-layout > [class^="col-"] {
    display: flex;
    flex-direction: column;
    margin-top: 0;
}
.crm-setting-leftSidebarSticy {
    position: sticky;
    top: 115px;
    height: calc(100vh - 112px);
    overflow-y: auto;
    /* margin-top: 12px; */
    margin-left: 3px;
    background-color: #fff;
    border-right: 1px solid #e0e0e0;
}
/*  Lead stage Styling */
/* Header container */
.cs-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 14px 12px;
    background: #fff;
    border-bottom: 1px solid #eef0f4;
}

/* Title area */
.cs-card-title h6 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: black;
}

.cs-card-title small {
    display: block;
    margin-top: 2px;

    color: #8a8a8a;
}

/* Circular collapse button */
.cs-collapse-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;

    border: 1px solid #d6e4ff;
    background: transparent;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    padding: 0;
}

/* Hover (Sneat-like subtle) */
.cs-collapse-btn:hover {
    background-color: #f3f6ff;
}

/* Icon */
.cs-collapse-btn i {
    font-size: 16px;
    color: #4d7adb;
    transition: transform 0.25s ease;
}

/* Rotate when collapsed */
.cs-collapse-btn[aria-expanded="false"] .rotate-icon {
    transform: rotate(180deg);
}
/* --- Main Card Container --- */
.stage-card {
    background: #fff;
    border: 1px dashed #d9dee3; /* Dashed Border matching image */
    border-radius: 6px;
    margin-bottom: 12px;
    padding: 0;
    transition: all 0.2s ease;
}

.stage-card-inner {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    width: 100%;
}

/* --- Stage Text --- */
.stage-label-group {
    position: relative;
    right: 28px;
    min-width: 80px;
    line-height: 1.2;
    padding: 3px 12px;
    background-color: #f7f9fa;
}

/* --- Input Field (Grey Box) --- */
.input-wrapper {
    position: relative;
    width: 240px; /* Fixed width matching image */
}
.select-wrapper {
    width: 100px;
}
.custom-stage-input {
    background-color: #f5f5f9 !important; /* Grey Background */
    border: none !important;
    border-radius: inherit;
    padding: 8px 35px 8px 12px; /* Right padding for icon */
    font-size: 14px;
    color: #697a8d;
    font-weight: 500;
}

/* Edit Pencil Icon */
.input-icon {
    position: absolute;
    right: -23px;
    top: 50%;
    transform: translateY(-50%);
    color: #697a8d;
    cursor: pointer;
    font-size: 16px;
    /* z-index: 10; */
}

.input-icon:hover {
    color: #307ae3;
}
.controls-section {
    margin-left: 63px;
    gap: 75px;
}
/* --- Minimal Dropdowns (Underline Only) --- */
.custom-minimal-select {
    border: none !important;
    border-bottom: 1px solid #d9dee3 !important;
    border-radius: 0 !important;
    padding: 5px 25px 5px 0 !important;
    font-size: 14px;
    color: #566a7f;
    background-color: transparent !important;
    cursor: pointer;
    box-shadow: none !important;
}

.custom-minimal-select:focus {
    border-bottom-color: #696cff !important;
}

/* --- Buttons (Round Chevron) --- */
.btn-icon {
    background: #f5f5f9;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #697a8d;
    transition: all 0.2s;
    padding: 0;
}

.btn-icon:hover {
    background: #e1e4e8;
    color: #333;
}
.crm-setting-header {
    height: 71px;
    position: sticky;
    top: 8px;
    z-index: 6;
    border: none !important;
    padding-top: 12px;
    /* margin-top: 12px; */
    padding-bottom: 12px;
}
.crm-setting-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0; /* same baseline */
    width: 100%;
    height: 1.1px; /* single clean line */
    background: linear-gradient(
        to right,
        #307ae3 30%,
        /* blue part */ #ebebeb 30% /* rest grey */
    );
}
/* Configuration page styling -------------------- */
.pagination .page-link {
    border-radius: 0 !important;
    color: #374151;
    border: 1px solid #e5e7eb;
    margin: 0;
    font-size: 13px;
    padding: 6px 12px;
}

.pagination .page-item.active .page-link {
    background-color: var(--crm-primary); /* Adjust to your primary color */
    border-color: var(--crm-primary-hover);
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    background-color: #f9fafb;
    color: #9ca3af;
}
/* Champign detail page styling  */
.main-container {
    padding: 1.5rem;
}

.header {
    margin-bottom: 1.5rem;
}

.header h4 {
    font-weight: 400;
    font-size: 1.2rem;
    color: #343a40;
    display: flex;
    align-items: center;
}

.header h4 .fa-chart-simple {
    color: #6c757d;
}

.header .campaign-count {
    font-size: 0.9rem;
    color: #888;
    font-weight: 400;
    margin-left: 0.5rem;
}

.sync-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sync-status {
    color: #6c757d;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
}

.sync-icon-green {
    color: #28a745;
    font-size: 1rem;
}

.btn-action-dropdown {
    border: 1px solid #d0d7de;
    background-color: #f8f9fa;
    color: #495057;
}

.btn-action-dropdown:hover {
    background-color: #e9ecef;
}

.btn-filter-dropdown {
    border: 1px solid #a8c7fa;
    /* Light blue border */
    background-color: #fff;
    color: #6c757d;
    padding: 0.25rem 0.5rem;
}

.btn-filter-dropdown:hover {
    background-color: #f8f9fa;
}

/* Stat Cards Styling - Final Version */
.stat-card {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 0;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    height: 95px;
    border-bottom-width: 4px;
}

.stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #6c757d;
    font-size: 0.7rem;
    font-weight: 500;
}

.stat-header .fa-circle-info {
    opacity: 0.6;
}

.stat-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.stat-number {
    font-size: 1.3rem;
    font-weight: 500;
    color: #343a40;
    line-height: 1.1;
    margin-top: 0.2rem;
}

.stat-icon-wrapper {
    align-self: flex-end;
    height: 28px;
}

.stat-icon {
    font-size: 1.4rem;
    opacity: 0.6;
}

/* Card Border & Icon Colors */
.border-bottom-primary {
    border-bottom-color: #0dcaf0;
}

.icon-primary-lead {
    color: #0dcaf0;
}

.border-bottom-secondary {
    border-bottom-color: #6f42c1;
}

.icon-secondary-lead {
    color: #6f42c1;
}

.border-bottom-tertiary {
    border-bottom-color: #fd7e14;
}

.icon-tertiary-lead {
    color: #fd7e14;
}

.border-bottom-total {
    border-bottom-color: #d63384;
}

.icon-total {
    color: #d63384;
}

.border-bottom-verified {
    border-bottom-color: #198754;
}

.icon-verified {
    color: #198754;
}

.border-bottom-unverified {
    border-bottom-color: #dc3545;
}

.icon-unverified {
    color: #dc3545;
}

.border-bottom-paid {
    border-bottom-color: #0d6efd;
}

.icon-paid {
    color: #0d6efd;
}

.border-bottom-enrolled {
    border-bottom-color: #6610f2;
}

.icon-enrolled {
    color: #6610f2;
}

/* Table Styling */
.table-container {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 0px;
    margin-top: 1.5rem;
    padding: 0px;
}

.custom-table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 0px;
    color: #000;
}

.custom-table thead {
    background-color: #f8f9fc;
    padding: 12px 0px;
}

.custom-table thead th {
    font-weight: 600;
    font-size: 0.75rem;
    /* Reduced font size */
    border-bottom: 1px solid #dee2e6;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    vertical-align: middle;
    color: #343a40;
    padding: 0.75rem;
}

.custom-table tbody tr {
    border-bottom: 1px solid #e9ecef;
}

.custom-table tbody tr:last-child {
    border-bottom: 0;
}

.custom-table tbody td {
    vertical-align: middle;
    font-size: 0.85rem;
    color: black;
    border: 0;
    padding: 0.75rem;
}

.custom-table .fa-sort {
    color: #ced4da;
    margin-left: 8px;
    cursor: pointer;
    font-size: 0.8em;
}

.custom-table th:nth-child(n + 4),
.custom-table td:nth-child(n + 4) {
    text-align: right;
}

.custom-table td:nth-child(n + 4) {
    color: #0d6efd;
}
/* ----------------------Champign dashboard styling---------------------------------- */
/* ===============================
   MAIN TABLE
================================ */
.traffic-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    background: #fff;
}

/* HEADER */
.traffic-table thead th {
    background: #f8f9fa;
    color: #6c757d;
    font-weight: 600;
    padding: 8px 16px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
}

.traffic-table thead .lead-header {
    text-align: center;
}

/* SUB HEADER */
.traffic-table thead .sub-header a {
    color: #6c757d;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.traffic-table thead .sub-header i {
    font-size: 12px;
}

/* BODY ROW */
.traffic-table tbody tr {
    background: #fff;
}

.traffic-table tbody tr:not(.table-light):hover {
    background: #f9fafb;
}

/* CELL */
.traffic-table td {
    padding: 8px 16px;
    border-bottom: 1px solid #eef0f3;
    vertical-align: middle;
}

/* CHANNEL NAME */
.channel-link {
    color: #0d6efd;
    font-weight: 500;
    text-decoration: none;
    text-transform: capitalize;
}

.channel-link:hover {
    cursor: pointer;
}

/* COUNT */
.lead-count {
    color: #0d6efd;
    font-weight: 500;
    text-decoration: none;
}

.lead-count:hover {
    text-decoration: underline;
}

/* COLLAPSE ICON */
.collapse-trigger {
    cursor: pointer;
    color: #9ca3af;
    font-size: 18px;
    transition: transform 0.2s ease;
}

.collapse.show + .collapse-trigger,
.collapse-trigger:hover {
    color: #374151;
}

/* ===============================
   NESTED TABLE (SOURCE BREAKDOWN)
================================ */
.table-nested-sub {
    width: 100%;
    border-collapse: collapse;
    background: #fafafa;
}

.table-nested-sub td {
    padding: 10px 16px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 13px;
    color: #374151;
}

.table-nested-sub tr:last-child td {
    border-bottom: none;
}

/* INDENT LOOK */
.table-nested-sub td:first-child {
    padding-left: 40px;
    color: #6b7280;
}

.table-light {
    background: #fafbff !important;
}

.table-light td {
    font-weight: 600;
    color: #111827;
}
.traffic-table thead th:first-child {
    /* border-right: 1px solid #e5e7eb; */
}

.traffic-table thead tr:first-child th.lead-header {
    border-top: 1px solid #e5e7eb;
}

.traffic-table tbody td:first-child {
    border-right: 1px solid #eef0f3;
}
/* Traffic Channel divider */
.traffic-table thead th:first-child,
.traffic-table tbody td:first-child {
    /* border-right: 1px solid #e5e7eb; */
}

/* Nested table alignment */
.table-nested-sub {
    width: 100%;
    border-collapse: collapse;
}

.table-nested-sub td:first-child {
    padding-left: 40px; /* indent under traffic channel */
    color: #6b7280;
    border-right: 1px solid #eef0f3;
}
/* Followup calender ui  */
.followup-calender .calender-body {
    padding: 0 !important;
}

#followupCalendar {
    margin-top: 0 !important;
    border-radius: 0;
    overflow: hidden;
    border: none !important;
    width: 100% !important;
}
.fc .fc-daygrid-day-frame {
    min-height: 45px !important;
    height: 45px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 2px 0 !important;
}

/* 2. Overlapping Fix */
.fc .fc-daygrid-day-top {
    flex-direction: row !important;
    justify-content: center !important;
    width: 100%;
}

.fc .fc-daygrid-day-number {
    font-size: 11px !important;
    font-weight: 600;
    padding: 2px !important;
    color: #475569;
    text-decoration: none !important;
}

/* Today's Date Highlight */
.fc .fc-day-today .fc-daygrid-day-number {
    background-color: #269ffc !important;
    color: white !important;
    border-radius: 4px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 3. Counts (Events) Styling */
.fc-daygrid-event {
    background-color: #269ffc !important;
    border: none !important;
    border-radius: 4px !important;
    color: white !important;
    font-size: 9px !important;
    font-weight: bold !important;
    padding: 0px 5px !important;
    margin: 0 auto !important;
    min-width: 18px;
    text-align: center;
}

.fc-event-title {
    padding: 0 !important;
    line-height: 1.2;
}

/* 4. Table Header */
.fc .fc-col-header-cell {
    background: #f8fafc;
    padding: 6px 0 !important;
    border-bottom: 1px solid #eee !important;
}

.fc .fc-col-header-cell-cushion {
    font-size: 10px !important;
    font-weight: 700;
    color: #000000 !important;
    text-transform: uppercase;
    text-decoration: none !important;
}

/* 5. Toolbar Layout */
.fc-header-toolbar {
    padding: 10px 15px !important;
    background: #fff;
    margin-bottom: 0 !important;
    border-bottom: 1px solid #eef2f7;
}

.fc-toolbar-title {
    font-size: 14px !important;
    font-weight: 700;
    color: #334155;
}

.fc .fc-button-primary {
    background: #fff !important;
    border: 1px solid #d1d5db !important;
    color: #475569 !important;
    border-radius: 3px !important;
    font-size: 11px !important;
    padding: 2px 8px !important;
    margin-left: 10px !important;
}

.fc .fc-today-button {
    background: #269ffc !important;
    color: #fff !important;
    border: none !important;
    border-radius: 3px !important;
    text-transform: capitalize !important;
}

.fc .fc-daygrid-body-natural .fc-daygrid-day-events {
    margin-block: 1px !important;
}

.fc .fc-view-harness {
    margin: 0 !important;
    padding: 0 !important;
    min-block-size: 0 !important;
}

.fc .fc-toolbar .fc-toolbar-chunk {
    gap: 5px;
}

.fc-scrollgrid {
    border: none !important;
}
#pushLogsContainer {
    display: block !important;
}