.text-right {
    text-align: right;
}

.download-pdf-icon {
        float: right;
           }
    .e-tab .e-tab-header .e-tab-text-wrap {
    border-bottom: 2px solid var(--kp-black); /* Change color as needed */
    padding-bottom: 10px;
}

.e-tab .e-tab-header .e-tab-text-wrap .e-tab-icon {
    display: none;
}

    .e-tab .e-content .e-item {
    color: var(--kp-yellow-dark);
    font-size: 14px;
    padding: 10px;
    text-align: justify;
    }

    .e-image-home {
        background-image: url(/home.png);
        height: 50px;
        width: 50px;
    }

    .e-toolbar .e-tbar-btn {
        background: var(--kp-gray-bs-50);
    }

/* Toolbar base styles */
.toptoolbar .e-toolbar {
    display: flex;
    align-items: center;
    background: var(--kp-white);
    border: 1px solid var(--kp-gray-20);
    border-radius: 8px;
    padding: 8px 12px;
}
.toptoolbar .e-toolbar-items {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
}
.toptoolbar .e-toolbar-item {
    width: auto !important;
    min-width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}
.toptoolbar .e-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}
.toptoolbar .e-toolbar-right {
    margin-left: auto;
    flex: 0 0 auto;
}

/* SfSplitButton fix - prevent stretching */
.toptoolbar .e-split-btn-wrapper,
.toolbar-custom .e-split-btn-wrapper {
    display: inline-flex !important;
    width: auto !important;
    min-width: auto !important;
    max-width: fit-content !important;
}
.toptoolbar .e-split-btn,
.toolbar-custom .e-split-btn {
    width: auto !important;
    min-width: auto !important;
    display: inline-flex !important;
}
.toptoolbar .e-split-btn .e-btn,
.toolbar-custom .e-split-btn .e-btn {
    width: auto !important;
    min-width: auto !important;
    flex: 0 0 auto !important;
}
/* Force the split button container to shrink */
.e-split-btn-wrapper {
    flex: 0 0 auto !important;
    width: fit-content !important;
}
.e-split-btn {
    width: fit-content !important;
}
.toptoolbar .e-split-btn .e-dropdown-btn {
    width: auto !important;
    min-width: auto !important;
    padding: 8px 10px !important;
    color: var(--kp-gray-70) !important;
}
.toptoolbar .e-split-btn .e-dropdown-btn .e-btn-icon,
.toptoolbar .e-split-btn .e-dropdown-btn .e-icons {
    color: var(--kp-gray-70) !important;
}

/* ============ DESKTOP/MOBILE VIEW TOGGLE ============ */
.desktop-view { display: block; }
.mobile-view { display: none; }

/* ============ MOBILE CARD VIEW STYLES ============ */
.mobile-search-box {
    padding: 10px;
    background: var(--kp-gray-bs-50);
    border-radius: 8px;
    margin-bottom: 15px;
}
.mobile-search-box .input-group-text {
    background: white;
    border-right: none;
}
.mobile-search-box .form-control {
    border-left: none;
    font-size: 16px;
}

.mobile-loading, .mobile-no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--kp-gray-60);
}
.mobile-loading p, .mobile-no-data p { margin-top: 15px; }

.mobile-cards-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 5px;
}

.project-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 12px;
    border-left: 4px solid var(--kp-yellow);
}

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

.card-status {
    flex-shrink: 0;
}

.status-badge-mobile {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.card-reg-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--kp-gray-30);
    margin-bottom: 10px;
    gap: 10px;
}

.reg-number {
    font-weight: 700;
    color: var(--kp-gray-70);
    font-size: 15px;
    white-space: nowrap;
}

.project-type-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    word-break: break-word;
}

.card-content { padding: 5px 0; }

.card-row {
    display: flex;
    padding: 4px 0;
    font-size: 13px;
    align-items: flex-start;
}

.card-label {
    color: var(--kp-gray-60);
    min-width: 100px;
    max-width: 100px;
    font-weight: 500;
    flex-shrink: 0;
}

.card-value {
    color: var(--kp-gray-70);
    flex: 1;
    word-break: break-word;
    text-align: right;
}

.dates-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;
    padding: 8px 0;
}

.date-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
}

.date-item .card-label {
    font-size: 11px;
    min-width: unset;
    max-width: unset;
}

.date-item .card-value {
    font-size: 13px;
    white-space: nowrap;
}

.card-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--kp-gray-30);
}

.action-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    font-size: 16px;
    text-decoration: none;
}

.action-btn i { font-size: 16px; }

.action-btn-info { background: var(--kp-info-cyan); color: white; }
.action-btn-status { background: var(--kp-success-bright); color: white; }
.action-btn-edit { background: var(--kp-blue-primary); color: white; }
.action-btn-delete { background: var(--kp-danger-bright); color: white; }
.action-btn-email { background: var(--kp-success-bright); color: white; }
.action-btn-spam { background: var(--kp-warning-bright); color: var(--kp-gray-70); }
.action-btn-more { background: var(--kp-gray-bs-600); color: white; }

.mobile-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10px;
    margin-top: 15px;
    background: var(--kp-gray-bs-50);
    border-radius: 8px;
}

.page-btn {
    background: var(--kp-yellow);
    color: var(--kp-gray-70);
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}
.page-btn:disabled {
    background: var(--kp-gray-20);
    color: var(--kp-gray-45);
    cursor: not-allowed;
}

.page-info {
    font-size: 14px;
    color: var(--kp-gray-60);
    font-weight: 500;
}

/* ============ MOBILE BREAKPOINT ============ */
@media screen and (max-width: 1024px) {
    .desktop-view { 
        display: none !important; 
        visibility: hidden !important; 
        height: 0 !important; 
        overflow: hidden !important; 
    }
    .mobile-view { 
        display: block !important; 
        visibility: visible !important; 
    }
    
    .container-fluid { padding: 0 8px !important; }
    .leadbrand { margin: 10px 0 !important; }
    .form-control { font-size: 16px !important; }
    
    .responsive-dialog-small { width: 95% !important; max-width: 95% !important; }
    .responsive-dialog-medium { width: 95% !important; max-width: 95% !important; }
    .responsive-dialog-large { width: 95% !important; max-width: 95% !important; }
    
    /* Fix toolbar positioning - IMPORTANT */
    .toptoolbar {
        margin-bottom: 10px;
        position: relative;
        z-index: 100;
    }
    .toptoolbar .e-toolbar,
    .toolbar-custom {
        display: flex !important;
        flex-wrap: nowrap !important;
        height: auto !important;
        min-height: 50px;
        padding: 8px 10px !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    .toptoolbar .e-toolbar-items,
    .toolbar-custom .e-toolbar-items {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .toptoolbar .e-toolbar-left,
    .toolbar-custom .e-toolbar-left {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .toptoolbar .e-toolbar-right,
    .toolbar-custom .e-toolbar-right {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        margin-left: auto !important;
    }
    .toptoolbar .e-toolbar-item {
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    
    /* Hide separator on mobile */
    .toptoolbar .e-toolbar-item.e-separator,
    .toolbar-custom .e-separator {
        display: none !important;
    }
    
    /* Consistent toolbar buttons on mobile */
    .toolbar-btn {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    
    .toolbar-btn span {
        display: inline !important;
    }
    
    .toolbar-btn i {
        font-size: 13px !important;
    }
    
    /* SfSplitButton on mobile */
    .lead-split-btn .e-split-btn,
    .toptoolbar .e-split-btn {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    
    /* Filter popup responsiveness */
    .e-split-btn-wrapper .e-dropdown-popup {
        max-width: 95vw !important;
        left: 5px !important;
        right: 5px !important;
    }
    .e-split-btn-wrapper .e-dropdown-popup .e-card {
        max-width: 100%;
    }
    .e-split-btn-wrapper .e-dropdown-popup .row {
        margin: 0;
    }
    .e-split-btn-wrapper .e-dropdown-popup .col-md-4,
    .e-split-btn-wrapper .e-dropdown-popup .col-md-6 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 5px 10px;
    }
}

/* Tablet - 2 column grid */
@media screen and (min-width: 601px) and (max-width: 1024px) {
    .mobile-cards-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .mobile-search-box {
        max-width: 500px;
        margin: 0 auto 20px auto;
    }
    .mobile-pagination {
        max-width: 500px;
        margin: 20px auto 0 auto;
    }
}

/* Very small screens - compact toolbar buttons */
@media screen and (max-width: 400px) {
    .toolbar-custom {
        padding: 6px 8px !important;
    }
    
    /* Hide text on very small screens, show only icons */
    .toolbar-btn span {
        display: none !important;
    }
    
    .toolbar-btn {
        padding: 8px 12px !important;
    }
    
    .toolbar-btn i {
        font-size: 14px !important;
    }
    
    /* SfSplitButton compact */
    .lead-split-btn .e-split-btn,
    .toptoolbar .e-split-btn {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
}

/* Small phones - stack toolbar items */
@media screen and (max-width: 480px) {
    .toptoolbar .e-toolbar-items {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
    }
    .toptoolbar .e-toolbar-left,
    .toptoolbar .e-toolbar-right {
        flex: 0 0 auto;
    }
    .toptoolbar .e-split-btn,
    .toptoolbar .e-dropdown-btn,
    .lead-split-btn .e-split-btn,
    .lead-split-btn .e-dropdown-btn {
        padding: 6px 10px !important;
        font-size: 13px !important;
    }
}

/* Touch device improvements */
@media (hover: none) and (pointer: coarse) {
    .action-btn { min-width: 44px; min-height: 44px; }
    .page-btn { min-height: 44px; }
}

/* ============ LEAD DETAILS DIALOG STYLES ============ */
.lead-details-dialog {
    max-width: 95vw;
}
.dialog-header-content {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--kp-gray-70);
}
.dialog-header-content i {
    font-size: 22px;
    color: var(--kp-gray-70);
}
.lead-details-container {
    padding: 15px;
}

/* PDF Download Button */
.pdf-download-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
}
.btn-pdf-download {
    background: var(--kp-danger-bright);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
}
.btn-pdf-download:hover {
    background: var(--kp-danger-hover);
}
.btn-pdf-download i {
    font-size: 16px;
}

/* Section Styles */
.details-section {
    background: var(--kp-gray-bs-50);
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    border: 1px solid var(--kp-gray-bs-100);
}
.section-header {
    background: linear-gradient(135deg, var(--kp-gray-bs-900) 0%, var(--kp-gray-bs-700) 100%);
    color: white;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 14px;
}
.section-header i {
    font-size: 16px;
    opacity: 0.9;
}
.section-content {
    padding: 15px;
    background: white;
}

/* Detail Row */
.detail-row {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid var(--kp-gray-30);
    align-items: flex-start;
}
.detail-row:last-child {
    border-bottom: none;
}
.detail-label {
    color: var(--kp-gray-60);
    font-weight: 500;
    min-width: 130px;
    max-width: 130px;
    font-size: 13px;
    flex-shrink: 0;
}
.detail-value {
    color: var(--kp-gray-70);
    font-size: 14px;
    flex: 1;
    word-break: break-word;
}
.detail-value a {
    color: var(--kp-blue-primary);
    text-decoration: none;
}
.detail-value a:hover {
    text-decoration: underline;
}

/* Email and Phone with copy button */
.email-value, .phone-value {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.btn-copy {
    background: var(--kp-gray-bs-100);
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: var(--kp-gray-60);
    transition: all 0.2s;
}
.btn-copy:hover {
    background: var(--kp-blue-primary);
    color: white;
}

/* Close Button */
.btn-close-dialog {
    background: var(--kp-gray-bs-600) !important;
    color: white !important;
    border: none !important;
    padding: 10px 24px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
}
.btn-close-dialog:hover {
    background: var(--kp-gray-bs-700) !important;
}

/* Dialog footer */
.lead-details-dialog .e-footer-content {
    padding: 15px 20px !important;
    border-top: 1px solid var(--kp-gray-30);
    display: flex;
    justify-content: flex-end;
}

/* Mobile Dialog Styles */
@media screen and (max-width: 768px) {
    .lead-details-dialog {
        width: 95% !important;
        max-width: 95% !important;
        margin: 10px auto !important;
    }
    .dialog-header-content {
        font-size: 16px;
    }
    .dialog-header-content i {
        font-size: 18px;
    }
    .lead-details-container {
        padding: 10px;
    }
    .section-header {
        padding: 10px 12px;
        font-size: 13px;
    }
    .section-content {
        padding: 10px 12px;
    }
    .detail-row {
        flex-direction: column;
        gap: 4px;
        padding: 8px 0;
    }
    .detail-label {
        min-width: unset;
        max-width: unset;
        font-size: 12px;
        color: var(--kp-gray-55);
    }
    .detail-value {
        font-size: 14px;
        font-weight: 500;
    }
    .pdf-download-row {
        justify-content: center;
    }
    .btn-pdf-download {
        width: 100%;
        justify-content: center;
    }
}

/* ============ CONFIRMATION DIALOGS (Delete, Spam, Email) ============ */
.confirm-dialog {
    max-width: 95vw;
}
.confirm-dialog-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--kp-gray-70);
}
.confirm-dialog-header i {
    font-size: 18px;
}

/* Delete dialog header icon */
.delete-dialog .confirm-dialog-header i {
    color: var(--kp-danger-bright);
}
/* Spam dialog header icon */
.spam-dialog .confirm-dialog-header i {
    color: var(--kp-warning-bright);
}
/* Email dialog header icon */
.email-dialog .confirm-dialog-header i {
    color: var(--kp-success-bright);
}

.confirm-dialog-content {
    text-align: center;
    padding: 10px 0;
}

.confirm-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
}
.confirm-icon i {
    font-size: 32px;
}

/* Delete icon styling */
.delete-icon {
    background: var(--kp-danger-tint);
}
.delete-icon i {
    color: var(--kp-danger-bright);
}

/* Spam icon styling */
.spam-icon {
    background: var(--kp-warning-tint);
}
.spam-icon i {
    color: var(--kp-warning-bright);
}

/* Email icon styling */
.email-icon {
    background: var(--kp-success-tint);
}
.email-icon i {
    color: var(--kp-success-bright);
}

.confirm-message {
    font-size: 16px;
    font-weight: 600;
    color: var(--kp-gray-70);
    margin-bottom: 8px;
}

.confirm-submessage {
    font-size: 13px;
    color: var(--kp-gray-60);
    margin: 0;
}

/* Dialog footer buttons */
.confirm-dialog .e-footer-content {
    padding: 15px 20px !important;
    border-top: 1px solid var(--kp-gray-30);
    display: flex;
    justify-content: center;
    gap: 12px;
}

.btn-dialog-cancel {
    background: var(--kp-gray-bs-600) !important;
    color: white !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    min-width: 100px !important;
}
.btn-dialog-cancel:hover {
    background: var(--kp-gray-bs-700) !important;
}

.btn-dialog-delete {
    background: var(--kp-danger-bright) !important;
    color: white !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    min-width: 100px !important;
}
.btn-dialog-delete:hover {
    background: var(--kp-danger-hover) !important;
}

.btn-dialog-spam {
    background: var(--kp-warning-bright) !important;
    color: var(--kp-gray-70) !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    min-width: 100px !important;
}
.btn-dialog-spam:hover {
    background: var(--kp-yellow-dark) !important;
}

.btn-dialog-email {
    background: var(--kp-success-bright) !important;
    color: white !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    min-width: 100px !important;
}
.btn-dialog-email:hover {
    background: var(--kp-olive) !important;
}

/* ============ MAP LINK STYLES ============ */
.btn-map-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--kp-blue-google);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    margin-left: auto;
    transition: all 0.2s ease;
}

.btn-map-link:hover {
    background: var(--kp-info-bright);
    transform: scale(1.02);
}

.btn-map-link i {
    font-size: 14px;
}

.clickable-zip {
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-radius: 4px;
    margin: -4px;
    padding: 4px !important;
}

.clickable-zip:hover {
    background-color: var(--kp-info-tint);
}

.zip-link {
    color: var(--kp-blue-google) !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.zip-link:hover {
    text-decoration: underline;
}

.zip-icon {
    font-size: 11px;
    opacity: 0.7;
}

/* Zip link in desktop grid */
.zip-link-grid {
    color: var(--kp-blue-google);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.zip-link-grid:hover {
    background: var(--kp-info-tint);
    text-decoration: none;
    color: var(--kp-info-bright);
}

.zip-link-grid i {
    font-size: 10px;
    opacity: 0.7;
}

/* Zip link in mobile card */
.zip-link-card {
    color: var(--kp-blue-google);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.zip-link-card:hover {
    color: var(--kp-info-bright);
    text-decoration: underline;
}

.zip-link-card i {
    font-size: 14px;
}

.section-header {
    display: flex;
    align-items: center;
}

/* Mobile - hide map link text */
@media screen and (max-width: 768px) {
    .btn-map-link .map-link-text {
        display: none;
    }
    
    .btn-map-link {
        padding: 6px 10px;
        border-radius: 50%;
    }
}

/* Mobile styles for confirmation dialogs */
@media screen and (max-width: 768px) {
    .confirm-dialog {
        width: 90% !important;
        max-width: 90% !important;
        margin: 0 auto !important;
    }
    .confirm-icon {
        width: 60px;
        height: 60px;
    }
    .confirm-icon i {
        font-size: 26px;
    }
    .confirm-message {
        font-size: 15px;
    }
    .confirm-submessage {
        font-size: 12px;
    }
    .confirm-dialog .e-footer-content {
        flex-direction: column;
        gap: 10px;
    }
    .btn-dialog-cancel,
    .btn-dialog-delete,
    .btn-dialog-spam,
    .btn-dialog-email {
        width: 100% !important;
        padding: 12px 20px !important;
    }
}

/* ============ CONSISTENT TOOLBAR BUTTON STYLES ============ */
.toolbar-custom {
    background: var(--kp-white) !important;
    border: 1px solid var(--kp-gray-20) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
}

.toolbar-custom .e-toolbar-items {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
}

.toolbar-custom .e-toolbar-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.toolbar-custom .e-toolbar-right {
    margin-left: auto !important;
}

.toolbar-custom .e-separator {
    display: none !important;
}

/* Fix toolbar item width - prevent stretching */
.toolbar-custom .e-toolbar-item {
    width: auto !important;
    min-width: auto !important;
    flex: 0 0 auto !important;
}

.toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    background: var(--kp-gray-bs-50);
    color: var(--kp-gray-70);
    border: 1px solid var(--kp-gray-bs-200);
}

.toolbar-btn:hover {
    background: var(--kp-gray-bs-100);
    border-color: var(--kp-gray-bs-300);
}

.toolbar-btn i {
    font-size: 14px;
}

/* All toolbar buttons same style - Gray */
.toolbar-btn-primary,
.toolbar-btn-secondary {
    background: var(--kp-gray-bs-50);
    color: var(--kp-gray-70);
    border: 1px solid var(--kp-gray-bs-200);
}

.toolbar-btn-primary:hover,
.toolbar-btn-secondary:hover {
    background: var(--kp-gray-bs-100);
    border-color: var(--kp-gray-bs-300);
}

/* ============ SPLIT BUTTON FIX ============ */
/* Container to control width */
.split-btn-container {
    display: inline-block;
    width: auto;
}

.lead-split-btn,
.lead-split-btn.e-split-btn-wrapper,
.split-btn-container .e-split-btn-wrapper {
    display: inline-flex !important;
    width: auto !important;
    min-width: unset !important;
}

/* Style the Lead split button parts */
.lead-split-btn .e-split-btn,
.split-btn-container .e-split-btn {
    background: var(--kp-gray-bs-50) !important;
    color: var(--kp-gray-70) !important;
    border: 1px solid var(--kp-gray-bs-200) !important;
    border-right: none !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 6px 0 0 6px !important;
    width: auto !important;
}

.lead-split-btn .e-split-btn:hover,
.split-btn-container .e-split-btn:hover {
    background: var(--kp-gray-bs-100) !important;
}

.lead-split-btn .e-dropdown-btn,
.split-btn-container .e-dropdown-btn {
    background: var(--kp-gray-bs-50) !important;
    border: 1px solid var(--kp-gray-bs-200) !important;
    padding: 8px 10px !important;
    border-radius: 0 6px 6px 0 !important;
    width: auto !important;
    color: var(--kp-gray-70) !important;
}

.lead-split-btn .e-dropdown-btn .e-btn-icon,
.lead-split-btn .e-dropdown-btn .e-icons,
.split-btn-container .e-dropdown-btn .e-btn-icon,
.split-btn-container .e-dropdown-btn .e-icons {
    color: var(--kp-gray-70) !important;
}

.lead-split-btn .e-dropdown-btn:hover,
.split-btn-container .e-dropdown-btn:hover {
    background: var(--kp-gray-bs-100) !important;
}

/* Prevent stretching on all levels */
.toptoolbar .e-toolbar-item,
.toolbar-custom .e-toolbar-item {
    width: auto !important;
    min-width: auto !important;
    max-width: fit-content !important;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}

.e-split-btn-wrapper,
.lead-split-btn,
.toptoolbar .e-split-btn-wrapper,
.toolbar-custom .e-split-btn-wrapper {
    display: inline-flex !important;
    width: fit-content !important;
    min-width: unset !important;
    max-width: fit-content !important;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}

/* Target the inner table/flex structure of SfSplitButton */
.e-split-btn-wrapper > *,
.e-split-btn-wrapper table,
.e-split-btn-wrapper tr,
.e-split-btn-wrapper td {
    width: auto !important;
    min-width: unset !important;
}

/* Fix button content width */
.e-split-btn-wrapper .e-btn-content,
.e-split-btn .e-btn-content,
.toptoolbar .e-btn-content {
    width: auto !important;
    min-width: unset !important;
    flex: 0 0 auto !important;
}

/* Split button main part */
.e-split-btn-wrapper .e-split-btn,
.toptoolbar .e-split-btn,
.toolbar-custom .e-split-btn {
    background: var(--kp-gray-bs-50) !important;
    color: var(--kp-gray-70) !important;
    border: 1px solid var(--kp-gray-bs-200) !important;
    border-right: none !important;
    font-weight: 500 !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    border-radius: 6px 0 0 6px !important;
    width: auto !important;
    min-width: unset !important;
    flex: 0 0 auto !important;
}

.e-split-btn-wrapper .e-split-btn:hover,
.toptoolbar .e-split-btn:hover {
    background: var(--kp-gray-bs-100) !important;
}

/* Split button dropdown arrow */
.e-split-btn-wrapper .e-dropdown-btn,
.toptoolbar .e-split-btn-wrapper .e-dropdown-btn,
.toolbar-custom .e-split-btn-wrapper .e-dropdown-btn {
    background: var(--kp-gray-bs-50) !important;
    border: 1px solid var(--kp-gray-bs-200) !important;
    padding: 8px 10px !important;
    border-radius: 0 6px 6px 0 !important;
    width: auto !important;
    min-width: unset !important;
    flex: 0 0 auto !important;
    color: var(--kp-gray-70) !important;
}

/* Ensure dropdown arrow icon is black */
.e-split-btn-wrapper .e-dropdown-btn .e-btn-icon,
.e-split-btn-wrapper .e-dropdown-btn .e-icons,
.e-split-btn-wrapper .e-dropdown-btn .e-caret,
.toptoolbar .e-dropdown-btn .e-btn-icon,
.toptoolbar .e-dropdown-btn .e-icons,
.toptoolbar .e-dropdown-btn .e-caret {
    color: var(--kp-gray-70) !important;
}

.e-split-btn-wrapper .e-dropdown-btn:hover,
.toptoolbar .e-split-btn-wrapper .e-dropdown-btn:hover {
    background: var(--kp-gray-bs-100) !important;
}

/* Dropdown menu styling */
.toolbar-btn-primary + .e-dropdown-popup,
.e-split-btn-wrapper .e-dropdown-popup {
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    border: 1px solid var(--kp-gray-20) !important;
    overflow: hidden;
}

.e-dropdown-popup .e-item {
    padding: 10px 16px !important;
    font-size: 14px !important;
}

.e-dropdown-popup .e-item:hover {
    background: var(--kp-gray-bs-50) !important;
}

.e-dropdown-popup .e-item .e-menu-icon {
    margin-right: 10px;
    color: var(--kp-gray-60);
}

/* Lead grid: the Actions menu's "Edit" hosts a real <a> so RSMs can
   Ctrl+click / middle-click several leads open into tabs. MudMenuItem
   navigates in C# and never renders an anchor, so the browser has nothing
   to act on -- hence the nested link. Stretched across the item (negative
   margins cancel MudBlazor's dense 4px vertical padding and 16px right
   gutter) so the whole row is the link target, not just the word "Edit".
   Metrics read from MudBlazor.min.css: .mud-list-item-dense = 4px top/bottom,
   .mud-list-item-gutters = 16px left/right. */
.lead-menu-link {
    display: block;
    color: inherit;
    text-decoration: none;
    margin: -4px -16px -4px 0;
    padding: 4px 16px 4px 0;
}

.lead-menu-link:hover,
.lead-menu-link:focus-visible {
    color: inherit;
    text-decoration: none;
}