:root {
    /* Base Colors */
    --ls-bg-main: #f0f2f5;
    --ls-bg-content: #ffffff;
    --ls-bg-light: #f8f9fa;          /* Light gray background areas */
    --ls-bg-muted: #e9ecef;          /* Muted gray (badges, hovers, etc.) */
    --ls-bg-hover: #f5faff;          /* Table row hover */
    --ls-bg-overlay: rgba(0, 0, 0, 0.5); /* Modal overlay */

    /* Brand & Accent */
    --ls-primary: #b70406;      /* Primary accent color */
    --ls-primary-dark: #2c3e50;      /* Sidebar and button backgrounds */
    --ls-primary-hover: #34495e;     /* Hover state for dark buttons/nav */
    --ls-warning-bg: #fff3cd;        /* Highlight for search snippets */
    --ls-warning-text: #664d03;

    /* Text Colors */
    --ls-text-primary: #343a40;
    --ls-text-secondary: #2b2d2e;
    --ls-text-inverse: #ffffff;
    --ls-text-disabled: #adb5bd;

    /* Borders & Dividers */
    --ls-border-color: #e3e6f0;
    --ls-border-light: #f0f2f5;
    --ls-border-dark: #3b4c5d;

    /* Header & Sidebar */
    --ls-header-bg: #fafafa;
    --ls-sidebar-bg: #2c3e50;
    --ls-sidebar-border: #3b4c5d;
    --ls-sidebar-text: #bdc3c7;
    --ls-sidebar-hover-bg: #34495e;
    --ls-sidebar-active-bg: var(--ls-primary);
    --ls-sidebar-active-text: #ffffff;

    /* Buttons */
    --ls-btn-bg: #ffffff;
    --ls-btn-border: #c8d0d8;
    --ls-btn-text: var(--ls-text-primary);
    --ls-btn-primary-bg: var(--ls-primary-dark);
    --ls-btn-primary-text: #ffffff;
    --ls-btn-primary-border: var(--ls-primary-dark);
    --ls-btn-secondary-bg: var(--ls-bg-muted);
    --ls-btn-secondary-border: var(--ls-bg-muted);
    --ls-btn-secondary-text: var(--ls-text-primary);

    /* Dropdowns & Menus */
    --ls-dropdown-bg: var(--ls-bg-content);
    --ls-dropdown-border: var(--ls-border-color);
    --ls-dropdown-hover-bg: var(--ls-bg-muted);
    --ls-dropdown-active-bg: var(--ls-primary);
    --ls-dropdown-active-text: #ffffff;

    /* Tables */
    --ls-table-header-bg: var(--ls-header-bg);
    --ls-table-row-hover-bg: var(--ls-bg-hover);

    /* Modals */
    --ls-modal-bg: #ffffff;
    --ls-modal-border: var(--ls-border-color);
    --ls-modal-shadow: 0 4px 12px rgba(0,0,0,0.1);

    /* Debug Console */
    --ls-debug-bg: #1e1e1e;
    --ls-debug-header-bg: #333333;
    --ls-debug-btn-bg: #555555;
    --ls-debug-btn-hover-bg: #666666;
    --ls-debug-text: #d4d4d4;

    /* Fonts */
    --ls-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ls-font-mono: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;

    /* Misc */
    --ls-radius-small: 3px;
    --ls-radius: 4px;
    --ls-radius-large: 8px;
    --ls-transition-fast: 0.2s ease-in-out;
    --ls-transition-default: 0.3s ease-in-out;
}



.leadstage-app-scope {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.leadstage-app-scope.loaded {
    opacity: 1;
}

.leadstage-app-scope :root {
    --ls-bg-main: #f0f2f5;
    --ls-bg-content: #ffffff;
    --ls-primary: #0d6efd; /* A more vibrant blue from mockups */
    --ls-text-primary: #343a40;
    --ls-text-secondary: #6c757d;
    --ls-border-color: #e3e6f0;
    --ls-header-bg: #fafafa;
    --ls-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.leadstage-app-scope * {
    box-sizing: border-box;
}

.leadstage-app-scope body {
    margin: 0;
    font-family: var(--ls-font-family);
    background-color: var(--ls-bg-main);
    color: var(--ls-text-primary);
    font-size: 14px;
}

.leadstage-app-scope .app-shell {
    display: flex;
    height: 100vh;
}

.leadstage-app-scope .main-sidebar {
    width: 220px;
    background-color: #2c3e50; /* Dark sidebar from target */
    color: #fff;
    flex-shrink: 0;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
}

.leadstage-app-scope .main-sidebar .logo {
    padding: 0 20px 20px 20px;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    border-bottom: 1px solid #3b4c5d;
    margin-bottom: 10px;
}
.leadstage-app-scope .main-sidebar .logo span {
    padding: 4px 8px;
    border-radius: 4px;
}

.leadstage-app-scope .nav-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: #bdc3c7;
    text-decoration: none;
    gap: 10px;
    cursor: pointer;
}
.leadstage-app-scope .nav-item:hover {
    background-color: #34495e;
}
.leadstage-app-scope .nav-item.active {
    background-color: var(--ls-primary);
    color: #fff;
    font-weight: 500;
}
.leadstage-app-scope .nav-item .icon { font-size: 20px; }

.leadstage-app-scope .main-sidebar nav {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.leadstage-app-scope .nav-bottom-items {
    margin-top: auto;
}

.leadstage-app-scope .nav-separator {
    height: 1px;
    background-color: var(--ls-sidebar-border);
    margin: 10px 20px;
}

/* Submenu Navigation */
.leadstage-app-scope .nav-item.has-submenu {
    /* justify-content: space-between; was causing the alignment issue */
}

.leadstage-app-scope .nav-item .submenu-arrow {
    font-size: 12px;
    transition: transform var(--ls-transition-fast);
    margin-left: auto;
}

.leadstage-app-scope .nav-item.open .submenu-arrow {
    transform: rotate(180deg);
}

.leadstage-app-scope .submenu {
    background-color: #212f3d; /* slightly darker than sidebar hover */
    padding: 5px 0;
}

.leadstage-app-scope .submenu-item {
    display: flex;
    align-items: center;
    padding: 10px 20px 10px 40px; /* Increased left padding for indentation */
    color: var(--ls-sidebar-text);
    text-decoration: none;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    border-left: 3px solid transparent;
    border-radius: 0;
}
.leadstage-app-scope .submenu-item:hover {
    color: #fff;
    background-color: var(--ls-sidebar-hover-bg);
}

.leadstage-app-scope .submenu-item.active {
    color: var(--ls-sidebar-active-text);
    background-color: transparent;
    font-weight: 500;
    border-left-color: var(--ls-primary);
}

.leadstage-app-scope .submenu-item .icon {
    font-size: 16px;
}

.leadstage-app-scope .app-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.leadstage-app-scope .top-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 66px;
    border-bottom: 1px solid var(--ls-border-color);
    padding: 0 24px;
    flex-shrink: 0;
    background-color: #2c3e50;
}

.leadstage-app-scope .main-content {
    flex-grow: 1;
    padding: 24px;
    overflow-y: auto;
}

.leadstage-app-scope #leadstage-app-container {
    background: var(--ls-bg-content);
    border-radius: 8px;
    padding: 24px;
    border: 1px solid var(--ls-border-color);
}

.leadstage-app-scope .app-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.leadstage-app-scope .app-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    flex-grow: 1;
}

.leadstage-app-scope .header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 16px;
}
.leadstage-app-scope .filter-management-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.leadstage-app-scope .status-badge-filters {
    background-color: var(--ls-bg-muted);
    color: var(--ls-text-secondary);
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

#filter-sets-dropdown {
    min-width: 220px;
}
#filter-sets-dropdown .filter-set-item {
    color: var(--ls-text-primary);
    padding: 10px 15px;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
}
#filter-sets-dropdown .filter-set-item:hover {
    background-color: var(--ls-bg-muted);
}
#filter-sets-dropdown .delete-filter-set {
    color: var(--ls-text-secondary);
    visibility: hidden;
}
#filter-sets-dropdown .filter-set-item:hover .delete-filter-set {
    visibility: visible;
}
#filter-sets-dropdown .delete-filter-set:hover {
    color: var(--ls-primary);
}
#filter-sets-dropdown .no-saved-filters {
    padding: 10px 15px;
    color: var(--ls-text-secondary);
    font-style: italic;
}

.leadstage-app-scope .btn {
    padding: 0 16px;
    height: 38px;
    border: 1px solid var(--ls-btn-border);
    background-color: var(--ls-btn-bg);
    color: var(--ls-text-primary);
    cursor: pointer;
    border-radius: 4px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.leadstage-app-scope .btn-primary {
    background-color: #2c3e50;
    color: #fff;
    border-color: #2c3e50;
}

.leadstage-app-scope .btn.btn-danger-outline {
    background-color: transparent;
    border-color: var(--ls-primary);
    color: var(--ls-primary);
    font-weight: 600;
}
.leadstage-app-scope .btn.btn-danger-outline:hover {
    background-color: var(--ls-primary);
    color: var(--ls-text-inverse);
}
.leadstage-app-scope .btn:hover { opacity: 0.9; }

.leadstage-app-scope .btn.btn-split {
    padding: 0;
    gap: 0;
    border: 1px solid var(--ls-btn-border);
    background-color: var(--ls-btn-bg);
}

.leadstage-app-scope .btn.btn-split:hover {
    opacity: 1;
}

.leadstage-app-scope .btn.btn-split > span:first-child {
    padding: 0 16px;
    color: var(--ls-btn-text);
    font-weight: 500;
    transition: background-color var(--ls-transition-fast);
    display: flex;
    align-items: center;
    height: 100%;
}

.leadstage-app-scope .btn.btn-split > .icon-part {
    background-color: var(--ls-primary);
    color: var(--ls-text-inverse);
    padding: 0 12px;
    transition: background-color var(--ls-transition-fast);
    display: flex;
    align-items: center;
    height: 100%;
}

.leadstage-app-scope .btn.btn-split:hover > span:first-child {
    background-color: var(--ls-bg-muted);
}
.leadstage-app-scope .btn.btn-split:hover > .icon-part {
    background-color: #9e0305;
}

.leadstage-app-scope .tabs {
    display: flex;
    border-bottom: 2px solid var(--ls-border-color);
}
.leadstage-app-scope .tab-item {
    background: none;
    border: none;
    padding: 12px 0;
    margin-right: 24px;
    cursor: pointer;
    font-size: 16px;
    color: var(--ls-text-secondary);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}
.leadstage-app-scope .tab-item.active {
    color: var(--ls-text-primary);
    font-weight: 600;
    border-bottom-color: var(--ls-primary);
}
.leadstage-app-scope .count-badge {
    background-color: #fbd600;
    color: var(--ls-text-secondary);
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
    font-weight: 500;
}

.leadstage-app-scope .action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
}
.leadstage-app-scope .action-bar-left, .leadstage-app-scope .action-bar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.leadstage-app-scope #leadstage-pagination-top,
.leadstage-app-scope #leadstage-pagination-bottom {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* This container will hold the page numbers */
.leadstage-app-scope #leadstage-pagination-bottom .page-numbers {
    display: flex;
    align-items: center;
    background-color: var(--ls-bg-content);
    border: 1px solid var(--ls-border-color);
    border-radius: var(--ls-radius);
    overflow: hidden;
    height: 38px;
}

/* General button styles for prev/next arrows AND the ellipsis button */
.leadstage-app-scope #leadstage-pagination-top button,
.leadstage-app-scope #leadstage-pagination-bottom > button {
    border: 1px solid var(--ls-border-color);
    background-color: #fff;
    width: 38px;
    height: 38px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    color: var(--ls-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-weight: 500;
}
.leadstage-app-scope #leadstage-pagination-top button:disabled,
.leadstage-app-scope #leadstage-pagination-bottom > button:disabled {
    opacity: 0.6;
    cursor: default;
    background-color: var(--ls-bg-light);
}

/* Styles for the page number buttons specifically, which are INSIDE the .page-numbers container */
.leadstage-app-scope #leadstage-pagination-bottom .page-numbers button {
    border: none;
    background-color: transparent;
    width: 38px;
    height: 100%; /* Fill the container height */
    cursor: pointer;
    border-radius: 0;
    font-size: 14px;
    color: var(--ls-text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-weight: 500;
    border-right: 1px solid var(--ls-border-light);
}
.leadstage-app-scope #leadstage-pagination-bottom .page-numbers button:last-child {
    border-right: none;
}

.leadstage-app-scope #leadstage-pagination-bottom .page-numbers button:hover {
    background-color: var(--ls-bg-muted);
}

.leadstage-app-scope #leadstage-pagination-bottom .page-numbers button.active {
    background-color: var(--ls-primary);
    color: var(--ls-text-inverse);
    font-weight: 700;
}

.leadstage-app-scope .app-content-footer {
    padding-top: 16px;
    display: flex;
    justify-content: flex-start;
}

.leadstage-app-scope .action-icon {
    width: 38px;
    height: 38px;
    border: 1px solid var(--ls-border-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ls-text-secondary);
    background-color: var(--ls-btn-bg);
    transition: background-color var(--ls-transition-fast), color var(--ls-transition-fast);
}

.leadstage-app-scope .action-icon:hover {
    background-color: var(--ls-bg-muted);
    color: var(--ls-text-primary);
}

.leadstage-app-scope .action-icon i,
.leadstage-app-scope #leadstage-pagination button i {
    font-size: 16px;
}

.leadstage-app-scope #leadstage-results-container,
.leadstage-app-scope #list-content-area {
    position: relative;
    min-height: 400px;
    border: 1px solid var(--ls-border-color);
    border-radius: 4px;
    overflow-x: auto;
}

.leadstage-app-scope .skeleton-row td {
    line-height: 24px; /* Match the final content height (driven by 24px icons) */
}

.leadstage-app-scope .skeleton-row td .skeleton-content {
    height: 1em; /* Use em to inherit the line-height, making it 24px */
    background-color: var(--ls-bg-muted);
    border-radius: var(--ls-radius-small);
    background-image: linear-gradient(
        90deg,
        var(--ls-bg-muted) 0px,
        #f5f5f5 40px,
        var(--ls-bg-muted) 80px
    );
    background-size: 600px;
    animation: ls-shimmer 1.5s infinite linear;
}

.leadstage-app-scope .skeleton-row .company-cell-skeleton {
    display: flex;
    align-items: center;
    gap: 10px;
}
.leadstage-app-scope .skeleton-row .company-cell-skeleton .skeleton-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-color: var(--ls-bg-muted);
    border-radius: 2px;
    background-image: linear-gradient(
        90deg,
        var(--ls-bg-muted) 0px,
        #f5f5f5 40px,
        var(--ls-bg-muted) 80px
    );
    background-size: 600px;
    animation: ls-shimmer 1.5s infinite linear;
}
.leadstage-app-scope .skeleton-row .company-cell-skeleton .skeleton-text {
    width: 80%;
    height: 1em; /* Match the line-height for consistent height */
}

@keyframes ls-shimmer {
    0% {
        background-position: -300px 0;
    }
    100% {
        background-position: 300px 0;
    }
}

.leadstage-app-scope .leadstage-results-table {
    width: 100%;
    border-collapse: collapse;
}
.leadstage-app-scope .leadstage-results-table th, .leadstage-app-scope .leadstage-results-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--ls-border-color);
    white-space: nowrap;
    color: var(--ls-text-primary);
}
.leadstage-app-scope .leadstage-results-table th {
    background-color: var(--ls-header-bg);
    font-weight: 600;
    color: var(--ls-text-secondary);
    font-size: 12px;
    text-transform: uppercase;
}
.leadstage-app-scope .leadstage-results-table tr:last-child td { border-bottom: none; }
.leadstage-app-scope .leadstage-results-table tr:hover { background-color: #f5faff; }

.leadstage-app-scope .leadstage-results-table td a {
    color: var(--ls-primary);
    text-decoration: none;
    font-weight: 500;
}
.leadstage-app-scope .leadstage-results-table td a:hover { text-decoration: underline; }

.leadstage-app-scope .leadstage-results-table td.description-cell {
    max-width: 350px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ls-text-secondary);
}

.leadstage-app-scope .leadstage-results-table td:last-child,
.leadstage-app-scope .leadstage-results-table th:last-child {
    text-align: center;
}

.leadstage-app-scope .leadstage-results-table td:last-child img {
    vertical-align: middle;
}

.leadstage-app-scope .company-cell { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.leadstage-app-scope .company-cell img { border: 1px solid #eee; border-radius: 2px; }

.leadstage-app-scope .company-cell a.company-name-link {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
}

.leadstage-app-scope .contact-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}
.leadstage-app-scope .contact-cell i {
    color: var(--ls-text-secondary);
    width: 24px; /* to align with company favicons */
    text-align: center;
}
.leadstage-app-scope .company-cell a.company-name-link:hover {
    color: var(--ls-primary);
    text-decoration: underline;
}

.leadstage-app-scope input[type="checkbox"] {
    width: 16px; height: 16px;
}


/* Lists View Styles */

.leadstage-app-scope .list-content-area-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px; /* Match min-height of containers */
    text-align: center;
    color: var(--ls-text-secondary);
}

.leadstage-app-scope .list-content-area-placeholder .icon {
    font-size: 48px;
    margin-bottom: 16px;
}


/* Modal Styles */
.leadstage-app-scope .ls-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.leadstage-app-scope .ls-modal-content {
    background: #fff;
    padding: 24px;
    border-radius: 8px;
    width: 100%;
    max-width: 450px;
}

.leadstage-app-scope .ls-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ls-border-color);
}
.leadstage-app-scope .ls-modal-header h3 {
    margin: 0;
    font-size: 18px;
}
.leadstage-app-scope .ls-modal-close {
    background: none; border: none; cursor: pointer;
    color: var(--ls-text-secondary);
}

.leadstage-app-scope .ls-modal-body .form-group {
    margin-bottom: 16px;
}
.leadstage-app-scope .ls-modal-body label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}
.leadstage-app-scope .ls-modal-body input[type="text"],
.leadstage-app-scope .ls-modal-body select {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--ls-border-color);
    border-radius: 4px;
    font-size: 14px;
}

.leadstage-app-scope .ls-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--ls-border-color);
    margin-top: 24px;
}
.leadstage-app-scope .ls-modal-footer .btn-secondary {
    background-color: #e9ecef;
    border-color: #e9ecef;
    color: var(--ls-text-primary);
}

/* Unified Filter Modal */
.leadstage-app-scope .ls-modal-unified-filter {
    max-width: 1024px;
    width: 90%;
    height: 85vh;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.leadstage-app-scope .ls-modal-unified-filter .ls-modal-header {
    padding: 16px 24px;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--ls-border-color);
    margin-bottom: 0;
}

.leadstage-app-scope .ls-modal-unified-filter .ls-modal-header h3 {
    margin: 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.leadstage-app-scope .ls-modal-unified-filter .filter-modal-container {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
}

.leadstage-app-scope .ls-modal-unified-filter .filter-categories {
    width: 220px;
    flex-shrink: 0;
    background-color: #f8f9fa;
    border-right: 1px solid var(--ls-border-color);
    padding: 16px 0;
    overflow-y: auto;
}

.leadstage-app-scope .ls-modal-unified-filter .filter-categories ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.leadstage-app-scope .ls-modal-unified-filter .filter-categories li {
    padding: 12px 20px;
    cursor: pointer;
    font-weight: 500;
    color: var(--ls-text-primary);
    border-left: 3px solid transparent;
    transition: background-color 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    gap: 12px;
}
.leadstage-app-scope .ls-modal-unified-filter .filter-categories li .icon {
    font-size: 20px;
}

.leadstage-app-scope .ls-modal-unified-filter .filter-categories li:hover {
    background-color: #e9ecef;
}

.leadstage-app-scope .ls-modal-unified-filter .filter-categories li.active {
    font-weight: 600;
    border-left-color: var(--ls-primary);
    background-color: #fff;
    color: var(--ls-primary);
}

.leadstage-app-scope .ls-modal-unified-filter .filter-categories li.disabled {
    color: var(--ls-text-secondary);
    cursor: not-allowed;
    opacity: 0.7;
}

.leadstage-app-scope .ls-modal-unified-filter .filter-categories li.disabled:hover {
    background-color: #f8f9fa; /* No hover effect */
}

.leadstage-app-scope .triggers-list-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 20px;
    margin-top: 16px;
}

.leadstage-app-scope .trigger-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.leadstage-app-scope .trigger-item label {
    font-weight: normal;
    margin: 0;
}

.leadstage-app-scope .trigger-item input[type="checkbox"] {
    margin: 0;
}


.leadstage-app-scope .filter-panels-container {
    flex-grow: 1;
    position: relative;
    background: #fff;
}

.leadstage-app-scope .filter-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s;
    overflow-y: auto;
    display: none; /* Use display none to prevent interaction */
}

.leadstage-app-scope .filter-panel.active {
    opacity: 1;
    visibility: visible;
    display: flex; /* To make content fill height */
}

.leadstage-app-scope .filter-panel-content {
    width: 100%;
    padding: 24px;
}

.leadstage-app-scope .filter-panel-content .form-group {
    margin-bottom: 24px;
}
.leadstage-app-scope .filter-panel-content .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 14px;
    color: var(--ls-text-primary);
}
.leadstage-app-scope .filter-panel-content .form-group input[type="text"],
.leadstage-app-scope .filter-panel-content .form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ls-border-color);
    border-radius: 4px;
    font-size: 14px;
}
.leadstage-app-scope .filter-panel-content .form-group input[type="text"]:focus,
.leadstage-app-scope .filter-panel-content .form-group select:focus {
    outline: none;
    border-color: var(--ls-primary);
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

.leadstage-app-scope .form-group-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.leadstage-app-scope .form-group-checkbox label {
    font-weight: 500;
    margin-bottom: 0;
}
.leadstage-app-scope .form-group-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.leadstage-app-scope .filter-panel-content .form-group .form-group-description {
    font-size: 12px;
    color: var(--ls-text-secondary);
    margin-top: 8px;
    line-height: 1.5;
}

.leadstage-app-scope .filter-panel-content .form-group .form-group-description code {
    background-color: #e9ecef;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 11px;
}

/* This allows for the main/sidebar layout within a panel */
.leadstage-app-scope .filter-panel-content.filter-panel-body {
    padding: 0;
    display: flex;
    flex-grow: 1;
}

.leadstage-app-scope .ls-modal-unified-filter .ls-modal-footer {
    padding: 16px 24px;
    background: #f8f9fa;
    justify-content: space-between;
    align-items: center;
    margin-top: 0;
    flex-shrink: 0;
    display: flex;
    border-top: 1px solid var(--ls-border-color);
}

.leadstage-app-scope .selected-filters-preview {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    overflow-y: auto;
    max-height: 50px; /* approx 2 rows of tags */
}

.leadstage-app-scope .footer-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    padding-left: 16px;
}

.leadstage-app-scope .selected-filters-preview .filter-tag {
    font-size: 12px;
    padding: 4px 10px;
}
.leadstage-app-scope .selected-filters-preview .filter-tag .remove-filter-temp {
    cursor: pointer;
    font-weight: bold;
    color: var(--ls-text-secondary);
}

/* Active Filter Tags on Main Page */
.leadstage-app-scope #active-filters-container {
    padding: 0 0 16px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.leadstage-app-scope .filter-tag {
    background-color: #fbd600;
    color: var(--ls-text-primary);
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.leadstage-app-scope .filter-tag .remove-filter {
    cursor: pointer;
    font-weight: bold;
    color: var(--ls-text-secondary);
}
.leadstage-app-scope .filter-tag .remove-filter:hover {
    color: var(--ls-text-primary);
}


/* Styles for panels inside the unified filter modal */
.leadstage-app-scope .filter-panel-body {
    flex-grow: 1;
    display: flex;
    overflow: hidden;
    padding: 0;
}
.leadstage-app-scope .filter-panel-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 24px;
    border-right: 1px solid var(--ls-border-color);
}
.leadstage-app-scope .filter-panel-search-bar input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--ls-border-color);
    border-radius: 4px;
    margin-bottom: 16px;
}

.leadstage-app-scope .industry-list-container,
.leadstage-app-scope .country-list-container,
.leadstage-app-scope .technology-list-container,
.leadstage-app-scope .position-list-container {
    overflow-y: auto;
    flex-grow: 1;
}

.leadstage-app-scope .industry-item,
.leadstage-app-scope .country-item,
.leadstage-app-scope .technology-item,
.leadstage-app-scope .position-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f0f2f5;
}

.leadstage-app-scope .industry-item:last-child,
.leadstage-app-scope .country-item:last-child,
.leadstage-app-scope .technology-item:last-child,
.leadstage-app-scope .position-item:last-child {
    border-bottom: none;
}

.leadstage-app-scope .industry-item .industry-name,
.leadstage-app-scope .country-item .country-name,
.leadstage-app-scope .technology-item .technology-name,
.leadstage-app-scope .position-item .position-name {
    font-weight: 500;
}
.leadstage-app-scope .country-item .country-name {
    flex-grow: 1;
}
.leadstage-app-scope .industry-item .industry-details,
.leadstage-app-scope .country-item .country-details,
.leadstage-app-scope .technology-item .technology-details,
.leadstage-app-scope .position-item .position-details {
    display: flex;
    align-items: center;
    gap: 16px;
}
.leadstage-app-scope .industry-item .industry-count,
.leadstage-app-scope .technology-item .technology-count,
.leadstage-app-scope .position-item .position-count,
.leadstage-app-scope .country-item .country-count {
    background-color: #e9ecef;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
    color: var(--ls-text-secondary);
}

.leadstage-app-scope .country-item .country-name-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.leadstage-app-scope .country-item .country-expander {
    color: var(--ls-text-secondary);
    width: 1em;
    display: inline-block;
    font-weight: bold;
}

.leadstage-app-scope .industry-item .industry-actions,
.leadstage-app-scope .country-item .country-actions,
.leadstage-app-scope .technology-item .technology-actions,
.leadstage-app-scope .position-item .position-actions {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--ls-border-color);
    cursor: pointer;
    background: #fff;
    font-size: 18px;
    line-height: 1;
}
.leadstage-app-scope .industry-item .industry-actions button,
.leadstage-app-scope .country-item .country-actions button,
.leadstage-app-scope .technology-item .technology-actions button,
.leadstage-app-scope .position-item .position-actions button {
    width: 100%;
    height: 100%;
    border: none;
    color: #2c3e50;
    background: transparent;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
}

.leadstage-app-scope .industry-item .industry-actions:hover,
.leadstage-app-scope .country-item .country-actions:hover,
.leadstage-app-scope .technology-item .technology-actions:hover,
.leadstage-app-scope .position-item .position-actions:hover {
    background-color: #f8f9fa;
    border-color: #b9c2ca;
}

.leadstage-app-scope .filter-panel-sidebar {
    width: 300px;
    flex-shrink: 0;
    background-color: #f8f9fa;
    padding: 16px;
    overflow-y: auto;
}
.leadstage-app-scope .filter-panel-sidebar h4 {
    margin: 0 0 16px 0;
}
.leadstage-app-scope #selected-industries-list .placeholder,
.leadstage-app-scope #selected-countries-list .placeholder,
.leadstage-app-scope #selected-technologies-list .placeholder {
    color: var(--ls-text-secondary);
    font-size: 13px;
}
.leadstage-app-scope #selected-industries-list .selected-item,
.leadstage-app-scope #selected-countries-list .selected-item,
.leadstage-app-scope #selected-technologies-list .selected-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    margin-bottom: 8px;
    font-size: 13px;
}
.leadstage-app-scope #selected-industries-list .remove-selected-item,
.leadstage-app-scope #selected-countries-list .remove-selected-item,
.leadstage-app-scope #selected-technologies-list .remove-selected-item {
    cursor: pointer;
    font-weight: bold;
}

.leadstage-app-scope .filter-panel-main .filter-section-header {
    margin-bottom: 16px;
}
.leadstage-app-scope .filter-panel-main .filter-section-header h4 {
    margin: 0 0 4px 0;
    font-size: 15px;
}
.leadstage-app-scope .filter-panel-main .filter-section-header p {
    margin: 0;
    font-size: 13px;
    color: var(--ls-text-secondary);
}
.leadstage-app-scope .filter-panel-main .filter-section-header.with-divider {
    border-top: 1px solid var(--ls-border-color);
    padding-top: 16px;
    margin-top: 16px;
}
.leadstage-app-scope .radius-search-inputs {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}
.leadstage-app-scope .radius-search-inputs .form-group {
    flex: 1;
    margin-bottom: 0;
}
.leadstage-app-scope .filter-panel-sidebar .sidebar-header-with-margin {
    margin-top: 24px;
}
.leadstage-app-scope #selected-radius .selected-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    margin-bottom: 8px;
    font-size: 13px;
}
.leadstage-app-scope #selected-radius .remove-selected-item {
    cursor: pointer;
    font-weight: bold;
}

/* Website Content Modal */
.leadstage-app-scope .website-content-results {
    max-height: 60vh;
    overflow-y: auto;
}
.leadstage-app-scope .website-content-item {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ls-border-color);
}
.leadstage-app-scope .website-content-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.leadstage-app-scope .website-content-url {
    font-weight: 500;
    margin-bottom: 8px;
}
.leadstage-app-scope .website-content-url a {
    color: var(--ls-text-primary);
    text-decoration: none;
}
.leadstage-app-scope .website-content-url a:hover {
    text-decoration: underline;
}
.leadstage-app-scope .website-content-snippet {
    color: var(--ls-text-secondary);
    line-height: 1.6;
}
.leadstage-app-scope .website-content-snippet em {
    font-style: normal;
    background-color: #fff3cd;
    color: #664d03;
    padding: 1px 3px;
    border-radius: 2px;
}


/* Company Detail Modal */
.leadstage-app-scope .ls-modal-content.ls-modal-large.ls-modal-company-detail {
    max-width: 960px;
    width: 90%;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 85vh;
}

.leadstage-app-scope .ls-modal-company-detail .ls-modal-header {
    align-items: center;
    padding: 16px 24px;
    flex-shrink: 0;
}
.leadstage-app-scope .company-detail-header-main {
    display: flex;
    align-items: center;
    gap: 12px;
}
.leadstage-app-scope .company-detail-header-main h3 {
    font-size: 20px;
    font-weight: 600;
}
.leadstage-app-scope .company-detail-favicon {
    border: 1px solid var(--ls-border-color);
    border-radius: 4px;
}

.leadstage-app-scope .detail-tabs-wrapper {
    padding: 0 24px;
    background: #fff;
    flex-shrink: 0;
}

.leadstage-app-scope .ls-modal-company-detail .ls-modal-body {
    padding: 24px;
    background-color: #f8f9fa;
    overflow-y: auto;
    flex-grow: 1;
}

.leadstage-app-scope .company-detail-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.leadstage-app-scope .company-detail-main-content,
.leadstage-app-scope .company-detail-sidebar {
    background: #fff;
    padding: 20px;
    border: 1px solid var(--ls-border-color);
    border-radius: 6px;
}
.leadstage-app-scope .company-detail-main-content {
    min-width: 0; /* Prevents long non-breaking content from pushing grid boundaries */
}
.leadstage-app-scope .company-detail-main-content h4,
.leadstage-app-scope .company-detail-sidebar h4 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 16px;
    border-bottom: 1px solid var(--ls-border-color);
    padding-bottom: 8px;
}

.leadstage-app-scope .detail-tabs {
    display: flex;
    padding: 0 24px;
    border-bottom: 1px solid var(--ls-border-color);
    background-color: #fff;
}

.leadstage-app-scope .detail-tab-item {
    background: none;
    border: none;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--ls-text-secondary);
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}
.leadstage-app-scope .detail-tab-item.active {
    color: var(--ls-primary);
    border-bottom-color: var(--ls-primary);
}

.leadstage-app-scope .detail-tab-panel {
    display: none;
}
.leadstage-app-scope .detail-tab-panel.active {
    display: block;
}

.leadstage-app-scope .company-detail-contacts-table {
    width: 100%;
    border-collapse: collapse;
}
.leadstage-app-scope .company-detail-contacts-table th, 
.leadstage-app-scope .company-detail-contacts-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--ls-border-color);
    font-size: 13px;
}
.leadstage-app-scope .company-detail-contacts-table th {
    font-weight: 600;
    background-color: #f8f9fa;
}
.leadstage-app-scope .company-detail-contacts-table tr:last-child td {
    border-bottom: none;
}

.leadstage-app-scope .revenue-chart-container {
    padding: 24px;
    min-height: 300px;
}

.leadstage-app-scope .detail-tabs {
    display: flex;
    padding: 0 24px;
    border-bottom: 1px solid var(--ls-border-color);
    background-color: #fff;
}

.leadstage-app-scope .detail-tab-item {
    background: none;
    border: none;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--ls-text-secondary);
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}
.leadstage-app-scope .detail-tab-item.active {
    color: var(--ls-primary);
    border-bottom-color: var(--ls-primary);
}

.leadstage-app-scope .detail-tab-panel {
    display: none;
}
.leadstage-app-scope .detail-tab-panel.active {
    display: block;
}

.leadstage-app-scope .company-detail-contacts-table {
    width: 100%;
    border-collapse: collapse;
}
.leadstage-app-scope .company-detail-contacts-table th, 
.leadstage-app-scope .company-detail-contacts-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--ls-border-color);
    font-size: 13px;
}
.leadstage-app-scope .company-detail-contacts-table th {
    font-weight: 600;
    background-color: #f8f9fa;
}
.leadstage-app-scope .company-detail-contacts-table tr:last-child td {
    border-bottom: none;
}

.leadstage-app-scope .revenue-chart-container {
    padding: 24px;
    min-height: 300px;
}

.leadstage-app-scope .company-detail-main-content p {
    line-height: 1.6;
    color: var(--ls-text-secondary);
}

.leadstage-app-scope .detail-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.leadstage-app-scope .detail-item {
    font-size: 14px;
}
.leadstage-app-scope .detail-item strong {
    color: var(--ls-text-primary);
    width: 90px;
    display: inline-block;
}

.leadstage-app-scope .detail-item a {
    color: var(--ls-primary);
    text-decoration: none;
}
.leadstage-app-scope .detail-item a:hover {
    text-decoration: underline;
}

.leadstage-app-scope #company-detail-address p {
    margin: 0;
    line-height: 1.5;
}

.leadstage-app-scope .ls-modal-company-detail .btn-secondary {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

/* Debug Console */
.leadstage-app-scope #ls-debug-console {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 300px;
    background-color: #1e1e1e;
    color: #d4d4d4;
    border-top: 2px solid var(--ls-primary);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 13px;
    transition: height 0.2s ease-in-out;
}

.leadstage-app-scope #ls-debug-console.minimized {
    height: 40px;
}

.leadstage-app-scope .ls-debug-header {
    background-color: #333;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    cursor: pointer;
}

.leadstage-app-scope .ls-debug-header h4 {
    margin: 0;
    color: #fff;
    font-weight: 600;
    flex-grow: 1;
}

.leadstage-app-scope .ls-debug-header button {
    background: #555;
    color: #fff;
    border: 1px solid #777;
    border-radius: 3px;
    padding: 2px 10px;
    cursor: pointer;
}
.leadstage-app-scope .ls-debug-header button:hover {
    background: #666;
}

.leadstage-app-scope .ls-debug-content-wrapper {
    flex-grow: 1;
    overflow: hidden;
    display: flex;
}
.leadstage-app-scope .ls-debug-content {
    flex-grow: 1;
    overflow: auto;
    padding: 8px;
}
.leadstage-app-scope .ls-debug-content pre {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#orgacookie-container{
display:none;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    text-transform: capitalize;
}
.status-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.status-badge.active {
    background-color: #d1e7dd;
    color: #0f5132;
    border: 1px solid #a3cfbb;
}
.status-badge.active::before {
    background-color: #198754;
}
.status-badge.inactive {
    background-color: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
}
.status-badge.inactive::before {
    background-color: #dc3545;
}

.country-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--ls-bg-light);
    border: 1px solid var(--ls-border-color);
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 13px;
    margin-top: 8px;
}
.country-badge img {
    width: 20px;
    height: auto;
    vertical-align: middle;
}

.leadstage-app-scope #company-detail-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px 24px;
    align-items: start;
}

.leadstage-app-scope #company-detail-main-contacts,
.leadstage-app-scope #company-detail-social-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.leadstage-app-scope .contact-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--ls-bg-light);
    border: 1px solid var(--ls-border-color);
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 13px;
    text-decoration: none;
    color: var(--ls-text-primary);
    transition: background-color var(--ls-transition-fast), color var(--ls-transition-fast);
}

.leadstage-app-scope .contact-badge:hover {
    background-color: var(--ls-bg-muted);
    color: var(--ls-primary);
}

.leadstage-app-scope .contact-badge .icon-wrapper {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-size: 16px;
    color: var(--ls-text-secondary);
}

.leadstage-app-scope .contact-badge .link-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leadstage-app-scope #company-detail-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.leadstage-app-scope .social-link-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--ls-text-primary);
    text-decoration: none;
}
.leadstage-app-scope .social-link-item:hover {
    color: var(--ls-primary);
}
.leadstage-app-scope .social-link-item .icon-wrapper {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-size: 18px;
    color: var(--ls-text-secondary);
}
.leadstage-app-scope .social-link-item .link-text {
    color: var(--ls-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.leadstage-app-scope .social-link-item:hover .link-text {
    text-decoration: underline;
}

/* Signal/Trigger Styles */
.leadstage-app-scope .triggers-list-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 10px 20px;
    margin-top: 16px;
}

.leadstage-app-scope .trigger-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.leadstage-app-scope .trigger-item label {
    font-weight: normal;
    margin: 0;
}

.leadstage-app-scope .trigger-item input[type="checkbox"] {
    margin: 0;
}

.signal-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--ls-border-light);
}
.signal-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.signal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.signal-title {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
}
.signal-title .icon {
    font-size: 16px;
    color: var(--ls-primary);
}
.signal-date {
    font-size: 13px;
    color: var(--ls-text-secondary);
}
.signal-details {
    font-size: 14px;
    color: var(--ls-text-secondary);
    padding-left: 26px; /* Align with icon */
    line-height: 1.6;
}
.signal-details p {
    margin: 0;
}
.signal-details strong {
    color: var(--ls-text-primary);
}
.signal-details a {
    color: var(--ls-primary);
    text-decoration: none;
}
.signal-details a:hover {
    text-decoration: underline;
}


.logo img {
    width: 171px;
}

/* Dropdown for sorting */
.leadstage-app-scope .dropdown-container {
    position: relative;
    display: inline-block;
}

.leadstage-app-scope .dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 5px;
    background-color: var(--ls-bg-content);
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
    z-index: 10;
    border-radius: 4px;
    border: 1px solid var(--ls-border-color);
    padding: 5px 0;
    text-align: left;
}

.leadstage-app-scope .dropdown-menu a.sort-option {
    color: var(--ls-text-primary);
    padding: 10px 15px;
    text-decoration: none;
    display: block;
    font-size: 14px;
    white-space: nowrap;
}

.leadstage-app-scope .dropdown-menu a.sort-option:hover {
    background-color: #e9ecef;
}

.leadstage-app-scope .dropdown-menu a.sort-option.active {
    background-color: var(--ls-primary);
    color: #fff;
    font-weight: 500;
}

/* Custom Select for Export Modal */
.leadstage-app-scope .ls-custom-select {
    position: relative;
    width: 100%;
    font-size: 14px;
}
.leadstage-app-scope .ls-custom-select select {
    display: none; /* Hide original select */
}
.leadstage-app-scope .select-selected {
    background-color: #fff;
    border: 1px solid var(--ls-border-color);
    border-radius: 4px;
    padding: 10px 12px;
    cursor: pointer;
    position: relative;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.leadstage-app-scope .select-selected:after {
    position: absolute;
    content: "";
    top: 50%;
    right: 15px;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-color: var(--ls-text-secondary) transparent transparent transparent;
    transform: translateY(-50%);
    margin-top: -1px;
}
.leadstage-app-scope .select-selected.select-arrow-active:after {
    border-color: transparent transparent var(--ls-text-secondary) transparent;
    margin-top: -6px;
}
.leadstage-app-scope .select-items {
    position: absolute;
    background-color: #fff;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000; /* Higher than modal content */
    border: 1px solid var(--ls-border-color);
    border-radius: 4px;
    margin-top: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    max-height: 200px;
    overflow-y: auto;
}
.leadstage-app-scope .select-items div {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f2f5;
    display: flex;
    align-items: center;
    gap: 10px;
}
.leadstage-app-scope .select-items div:last-child {
    border-bottom: none;
}
.leadstage-app-scope .select-items div:hover, .leadstage-app-scope .same-as-selected {
    background-color: #e9ecef;
}
.leadstage-app-scope .select-hide {
    display: none;
}

/* Dashboard Styles */
.leadstage-app-scope .dashboard-header {
    background-color: var(--ls-primary);
    color: var(--ls-text-inverse);
    padding: 32px;
    border-radius: 12px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.leadstage-app-scope .dashboard-header h1 {
    font-size: 32px;
    margin: 0 0 8px 0;
    color: #FFFFFF;
}

.leadstage-app-scope .dashboard-header p {
    font-size: 16px;
    margin: 0;
    opacity: 0.9;
}

.leadstage-app-scope .enrolling-widget {
    background-color: var(--ls-bg-light);
    border: 1px solid var(--ls-border-color);
    border-radius: var(--ls-radius-large);
    padding: 24px;
    margin-bottom: 24px;
}

.leadstage-app-scope .enrolling-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.leadstage-app-scope .enrolling-header h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
}

.leadstage-app-scope .enrolling-header p {
    margin: 0;
    color: var(--ls-text-secondary);
    max-width: 600px;
}

.leadstage-app-scope .enrolling-header .close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--ls-text-secondary);
}

.leadstage-app-scope .enrolling-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.leadstage-app-scope .enrolling-step {
    background-color: var(--ls-bg-content);
    border: 1px solid var(--ls-border-color);
    border-radius: var(--ls-radius);
    padding: 20px;
    text-align: left;
}
.leadstage-app-scope .enrolling-step .step-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.leadstage-app-scope .enrolling-step .step-icon {
    font-size: 20px;
    color: var(--ls-primary);
}
.leadstage-app-scope .enrolling-step .step-status {
    font-size: 20px;
    color: #28a745; /* green checkmark */
}
.leadstage-app-scope .enrolling-step h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
}
.leadstage-app-scope .enrolling-step p {
    font-size: 13px;
    color: var(--ls-text-secondary);
    line-height: 1.5;
    margin: 0 0 16px 0;
    min-height: 40px;
}
.leadstage-app-scope .enrolling-step .btn {
    width: 100%;
    border-color: var(--ls-primary);
    color: var(--ls-primary);
    font-weight: 600;
}
.leadstage-app-scope .enrolling-step .btn:hover {
    background-color: var(--ls-primary);
    color: var(--ls-text-inverse);
}
.leadstage-app-scope .enrolling-step .btn:disabled,
.leadstage-app-scope .enrolling-step .btn[disabled] {
    border-color: var(--ls-text-disabled);
    color: var(--ls-text-disabled);
    background-color: var(--ls-bg-content);
    cursor: not-allowed;
    opacity: 0.7;
}
.leadstage-app-scope .enrolling-step .btn:disabled:hover,
.leadstage-app-scope .enrolling-step .btn[disabled]:hover {
    border-color: var(--ls-text-disabled);
    color: var(--ls-text-disabled);
    background-color: var(--ls-bg-content);
}


.leadstage-app-scope .dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

.leadstage-app-scope .stat-card {
    background-color: var(--ls-bg-content);
    border: 1px solid var(--ls-border-color);
    border-radius: var(--ls-radius-large);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.leadstage-app-scope .stat-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 20px;
    flex-shrink: 0;
    background-color: #e9ecef;
    color: var(--ls-text-secondary);
}
.leadstage-app-scope .stat-card-body p,
.leadstage-app-scope .stat-card-body span {
    margin: 0;
    line-height: 1.2;
}
.leadstage-app-scope .stat-card-title {
    font-size: 14px;
    color: var(--ls-text-secondary);
    font-weight: 500;
    margin-bottom: 4px;
}
.leadstage-app-scope .stat-card-value {
    font-size: 28px;
    font-weight: 700;
    display: inline-block;
    margin-right: 8px;
}
.leadstage-app-scope .stat-card-unit {
    display: inline-block;
    color: var(--ls-text-secondary);
}

/* Campaigns View */
#campaigns-view .app-header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 24px;
}
#campaigns-view .app-header > div {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

#campaigns-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 24px;
}

.campaign-card, .create-campaign-card {
    background-color: var(--ls-bg-content);
    border: 1px solid var(--ls-border-color);
    border-radius: var(--ls-radius-large);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: box-shadow var(--ls-transition-fast);
}
.campaign-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.campaign-card.selected {
    border-color: var(--ls-primary);
    box-shadow: 0 0 0 2px rgba(183, 4, 6, 0.25);
}

.campaign-card-header h3 {
    font-size: 20px;
    margin: 0;
    color: var(--ls-text-primary);
}
.campaign-card-header .campaign-date {
    font-size: 13px;
    color: var(--ls-text-secondary);
    margin-top: 4px;
}

.campaign-card-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
}

.campaign-stats .stat-item {
    font-size: 14px;
}
.campaign-stats .stat-item strong {
    font-size: 24px;
    font-weight: 700;
    margin-right: 8px;
}

.campaign-card-footer {
    display: flex;
    gap: 10px;
    border-top: 1px solid var(--ls-border-light);
    padding-top: 16px;
    margin-top: auto;
}
.campaign-card-footer .btn {
    flex-grow: 1;
}
.campaign-card-footer .btn-secondary{
    background-color: var(--ls-bg-content);
}
.campaign-card-footer .btn-secondary:hover{
    background-color: var(--ls-bg-muted);
}
.campaign-card-footer .btn.btn-select {
    background-color: var(--ls-primary-dark);
    color: #fff;
    border-color: var(--ls-primary-dark);
}

.create-campaign-card {
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 250px;
    cursor: pointer;
}
.create-campaign-card .create-icon {
    font-size: 32px;
    color: var(--ls-primary);
    margin-bottom: 12px;
}
.create-campaign-card h3 {
    font-size: 18px;
    margin: 0 0 8px 0;
}
.create-campaign-card p {
    color: var(--ls-text-secondary);
    max-width: 250px;
    margin: 0 auto 16px auto;
}
.create-campaign-card .btn-primary {
    background-color: var(--ls-primary);
    border-color: var(--ls-primary);
}
.create-campaign-card:hover {
    border-color: #d1d6de;
}

/* Alerts & Automation View */
.alerts-tab-panel {
    padding-top: 24px;
}
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 24px;
}
.settings-card {
    background-color: var(--ls-bg-light);
    border: 1px solid var(--ls-border-color);
    border-radius: var(--ls-radius-large);
    padding: 24px;
}
.settings-card h4 {
    margin: 0 0 8px 0;
    font-size: 18px;
}
.settings-card p {
    margin: 0 0 24px 0;
    color: var(--ls-text-secondary);
    line-height: 1.5;
    min-height: 42px;
}
.settings-card .form-group {
    margin-bottom: 16px;
}
.settings-card label {
    font-weight: 500;
}
.settings-card select {
    width: 100%;
    max-width: 300px;
    padding: 10px;
    border: 1px solid var(--ls-border-color);
    border-radius: 4px;
    font-size: 14px;
}

#alert-signal-toggles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.toggle-switch-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.toggle-switch-item label {
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}
.toggle-switch-item label i {
    color: var(--ls-text-secondary);
    width: 20px;
    text-align: center;
}

/* Basic Toggle Switch CSS */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
}
input:checked + .slider {
  background-color: var(--ls-primary);
}
input:focus + .slider {
  box-shadow: 0 0 1px var(--ls-primary);
}
input:checked + .slider:before {
  transform: translateX(20px);
}
.slider.round {
  border-radius: 24px;
}
.slider.round:before {
  border-radius: 50%;
}
.settings-footer {
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid var(--ls-border-color);
    display: flex;
    justify-content: flex-end;
}

.signal-company {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-left: 26px; /* Align with signal details icon */
}
.signal-company img {
    border: 1px solid #eee;
    border-radius: 2px;
}
.signal-item.new-signal {
    border-left: 3px solid var(--ls-primary);
    padding-left: 13px; /* 16px - 3px */
}

#pagewrap {
    min-width: 100%;
}