/* Chart size controls */

        #statusChart, #industryChart, #channelDistributionChart {

            height: 100% !important;

            width: 100% !important;

            margin: 0 auto;

        }

        

                    .chart-container {

            height: 450px !important;

            position: relative;

            margin: 0 auto;

            width: 100% !important;

            display: flex;

            justify-content: center;

            align-items: center;

            padding: 20px;

        }



        /* Chart aspect ratio control */

        .chart-container > canvas {

            max-width: 100% !important;

            max-height: 100% !important;

        }



        /* Chart title and legend styles */

        .chart-container h4 {

            font-size: 20px !important;

            font-weight: bold !important;

            margin-bottom: 20px !important;

            color: var(--text-dark) !important;

        }



        /* Make charts bigger */

        #statusChart, #industryChart, #channelDistributionChart {

            min-height: 400px !important;

        }



        /* Legend styles */

        .chartjs-legend {

            font-size: 14px !important;

            font-weight: 600 !important;

            padding: 15px !important;

        }



        /* Tooltip styles */

        .chartjs-tooltip {

            font-size: 14px !important;

            font-weight: 600 !important;

            padding: 12px !important;

            background: rgba(255, 255, 255, 0.98) !important;

            box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;

            border-radius: 6px !important;

        }

        

        /* Group comparison styles */

        .color-dot {

            width: 12px;

            height: 12px;

            border-radius: 50%;

            display: inline-block;

        }

        

        /* Comparison chart styles */

        #channelComparisonChart {

            height: 100% !important;

            width: 100% !important;

            margin: 0;

        }

        

        /* Chart wrapper styles */

        .chart-wrapper {

            height: 100% !important;

            width: 100% !important;

            margin: 0;

            display: flex;

            justify-content: center;

            align-items: center;

        }

        

        .badge {

            font-size: 0.75rem;

            padding: 0.25em 0.5em;

        }

        

        .text-muted {

            font-size: 0.75rem;

            opacity: 0.7;

        }

        

        :root {

            --primary-color: #2e3192;

            --primary-light: #4e51c9;

            --secondary-color: #6a1b9a;

            --secondary-light: #9c27b0;

            --accent-color: #36b9cc;

            --accent-light: #4dd0e1;

            --accent-dark: #0097a7;

            --vincodo-gradient: linear-gradient(135deg, #36b9cc 0%, #00838f 100%);

            --vincodo-gradient-light: linear-gradient(135deg, #4dd0e1 0%, #00acc1 100%);

            --text-dark: #2d3748;

            --text-light: #718096;

            --bg-light: #f8f9fa;

            --bg-gray: #edf2f7;

            --white: #ffffff;

            --pending: #4e73df;

            --opportunity: #1cc88a;

            --no-opportunity: #e74a3b;

            --closed: #858796;

            --chart-bg: rgba(54, 185, 204, 0.8);

            --chart-border: rgba(54, 185, 204, 1);

            --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

            --shadow-md: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);

            --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);

            --transition: all 0.3s cubic-bezier(.25,.8,.25,1);

            

            /* Enhanced Sales Pipeline Colors */

            --pipeline-lead: #6c757d;

            --pipeline-qualified: #17a2b8;

            --pipeline-proposal: #ffc107;

            --pipeline-negotiation: #fd7e14;

            --pipeline-closed-won: #28a745;

            --pipeline-closed-lost: #dc3545;

            

            /* Deal Value Colors */

            --deal-small: #6c757d;

            --deal-medium: #17a2b8;

            --deal-large: #28a745;

            --deal-enterprise: #6f42c1;

            --column-width: 330px;

            --row-height: 80px;

        }

        

        body {

            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

            padding: 20px;

            background-color: var(--bg-light);

            color: var(--text-dark);

            position: relative;

            /* REMOVED user-select: none; */

            /* -webkit-user-select: none; */

            /* -moz-user-select: none; */

            /* -ms-user-select: none; */

            /* user-select: none; */

        }

        

        /* Subtle background gradient */

        body::before {

            content: '';

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: linear-gradient(135deg, rgba(54, 185, 204, 0.05) 0%, rgba(0, 131, 143, 0.1) 100%);

            z-index: -1;

        }

        

        h1.mb-4 {

            color: var(--accent-dark);

            font-weight: 600;

            position: relative;

            padding-bottom: 10px;

        }

        

        h1.mb-4:after {

            content: '';

            position: absolute;

            bottom: 0;

            left: 0;

            width: 100px;

            height: 4px;

            background: var(--vincodo-gradient);

            border-radius: 2px;

        }

        

        .dashboard-container {

            background-color: var(--white);

            border-radius: 12px;

            padding: 25px;

            box-shadow: var(--shadow-md);

            margin-bottom: 24px;

            transition: var(--transition);

            border-top: 4px solid transparent;

            background-image: linear-gradient(to right, white, white), var(--vincodo-gradient);

            background-origin: border-box;

            background-clip: padding-box, border-box;

            min-height: 500px;

        }

        

        .dashboard-container:hover {

            box-shadow: var(--shadow-lg);

        }

        

        .dashboard-container h4 {

            color: var(--accent-dark);

            font-weight: 600;

            margin-bottom: 15px;

        }

        

        .alert-primary {

            background: var(--vincodo-gradient-light);

            color: white;

            border: none;

            box-shadow: var(--shadow-sm);

        }

        

        .alert-primary h3 {

            font-weight: 600;

        }

        

        .badge.bg-primary {

            background-color: rgba(255, 255, 255, 0.3) !important;

            font-size: 16px;

            font-weight: normal;

        }

        

        .stats-card {

            background-color: var(--white);

            border-radius: 10px;

            padding: 20px;

            box-shadow: var(--shadow-sm);

            text-align: center;

            height: 100%;

            transition: var(--transition);

            display: flex;

            flex-direction: column;

            justify-content: center;

            align-items: center;

            position: relative;

            overflow: hidden;

        }

        

        .stats-card::after {

            content: '';

            position: absolute;

            bottom: 0;

            left: 0;

            right: 0;

            height: 4px;

            background: var(--vincodo-gradient);

            opacity: 0;

            transition: var(--transition);

        }

        

        .stats-card:hover {

            transform: translateY(-5px);

            box-shadow: var(--shadow-md);

        }

        

        .stats-card:hover::after {

            opacity: 1;

        }

        

        .stats-card h3 {

            font-size: 14px;

            color: var(--text-light);

            margin-bottom: 10px;

            font-weight: 600;

            text-transform: uppercase;

            letter-spacing: 1px;

        }

        

        .stats-card .value {

            font-size: 32px;

            font-weight: bold;

            color: var(--text-dark);

            margin: 10px 0;

            text-shadow: 0 1px 2px rgba(0,0,0,0.1);

        }

        

        .btn-primary {

            background: var(--vincodo-gradient);

            border: none;

            box-shadow: var(--shadow-sm);

            transition: var(--transition);

        }

        

        /* === ACTIVITY TIMELINE STYLES === */

        .activity-timeline {

            position: relative;

            padding-left: 30px;

            max-height: 500px;

            overflow-y: auto;

        }

        

        .activity-timeline::before {

            content: '';

            position: absolute;

            left: 15px;

            top: 0;

            bottom: 0;

            width: 2px;

            background: var(--accent-color);

        }

        

        .activity-item {

            position: relative;

            background: white;

            border: 1px solid #e9ecef;

            border-radius: 8px;

            margin-bottom: 15px;

            padding: 15px;

            box-shadow: var(--shadow-sm);

            transition: var(--transition);

        }

        

        .activity-item:hover {

            box-shadow: var(--shadow-md);

            transform: translateY(-1px);

        }

        

        .activity-item::before {

            content: '';

            position: absolute;

            left: -37px;

            top: 15px;

            width: 12px;

            height: 12px;

            border-radius: 50%;

            background: var(--accent-color);

            border: 3px solid white;

            box-shadow: 0 0 0 2px var(--accent-color);

        }

        

        .activity-item.activity-email::before {

            background: #28a745;

            box-shadow: 0 0 0 2px #28a745;

        }

        

        .activity-item.activity-call::before {

            background: #007bff;

            box-shadow: 0 0 0 2px #007bff;

        }

        

        .activity-item.activity-meeting::before {

            background: #ffc107;

            box-shadow: 0 0 0 2px #ffc107;

        }

        

        .activity-item.activity-note::before {

            background: #6f42c1;

            box-shadow: 0 0 0 2px #6f42c1;

        }

        

        .activity-item.activity-status::before {

            background: #17a2b8;

            box-shadow: 0 0 0 2px #17a2b8;

        }

        

        .activity-header {

            display: flex;

            justify-content: space-between;

            align-items: center;

            margin-bottom: 10px;

        }

        

        .activity-type {

            display: flex;

            align-items: center;

            font-weight: 600;

            color: var(--text-dark);

        }

        

        .activity-type i {

            margin-right: 8px;

            font-size: 16px;

        }

        

        .activity-time {

            font-size: 12px;

            color: var(--text-light);

            background: var(--bg-gray);

            padding: 4px 8px;

            border-radius: 4px;

        }

        

        .activity-content {

            color: var(--text-dark);

            line-height: 1.5;

        }

        

        .activity-meta {

            margin-top: 10px;

            padding-top: 10px;

            border-top: 1px solid #e9ecef;

            font-size: 12px;

            color: var(--text-light);

        }

        

        .activity-outcome {

            display: inline-block;

            background: var(--bg-light);

            padding: 4px 8px;

            border-radius: 4px;

            margin-top: 5px;

            font-size: 12px;

            font-weight: 500;

        }

        

        .activity-outcome.positive {

            background: #d4edda;

            color: #155724;

        }

        

        .activity-outcome.neutral {

            background: #fff3cd;

            color: #856404;

        }

        

        .activity-outcome.negative {

            background: #f8d7da;

            color: #721c24;

        }

        

        .timeline-header {

            display: flex;

            justify-content: space-between;

            align-items: center;

            margin-bottom: 20px;

            padding-bottom: 10px;

            border-bottom: 2px solid var(--accent-color);

        }

        

        .activity-actions {

            display: flex;

            align-items: center;

            gap: 10px;

        }

        

        .delete-activity-btn {

            padding: 2px 6px;

            font-size: 10px;

            border-radius: 4px;

            opacity: 0;

            transition: opacity 0.3s ease;

        }

        

        .activity-item:hover .delete-activity-btn {

            opacity: 1;

        }

        

        .btn-xs {

            font-size: 10px;

            padding: 2px 6px;

            line-height: 1;

        }

        

        /* === QUICK ACTIONS STYLING === */

        .quick-actions-grid {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 10px;

            margin-bottom: 20px;

        }

        

        .quick-action-btn {

            display: flex;

            flex-direction: column;

            align-items: center;

            text-align: center;

            padding: 18px 12px;

            border-radius: 16px;

            border: 2px solid transparent;

            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

            min-height: 90px;

            position: relative;

            overflow: hidden;

            background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.95) 100%);

            box-shadow: 0 4px 20px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.15);

            color: #2d3748;

        }

        

        .quick-action-btn::before {

            content: '';

            position: absolute;

            top: 0;

            left: -100%;

            width: 100%;

            height: 100%;

            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);

            transition: left 0.6s ease;

        }

        

        .quick-action-btn:hover::before {

            left: 100%;

        }

        

        .quick-action-btn:hover {

            transform: translateY(-6px) scale(1.02);

            box-shadow: 0 12px 30px rgba(0,0,0,0.15), 0 4px 12px rgba(0,0,0,0.1);

            border-color: currentColor;

        }

        

        .quick-action-btn i {

            font-size: 24px;

            margin-bottom: 8px;

            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));

            transition: all 0.3s ease;

        }

        

        .quick-action-btn:hover i {

            transform: scale(1.1);

            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));

        }

        

        .quick-action-btn span {

            font-weight: 700;

            font-size: 13px;

            line-height: 1.2;

            letter-spacing: 0.3px;

            position: relative;

            z-index: 1;

            color: #2d3748;

        }

        

        .quick-action-btn small {

            font-size: 10px;

            opacity: 0.8;

            margin-top: 3px;

            font-weight: 500;

            position: relative;

            z-index: 1;

            color: #4a5568;

        }

        

        .btn-purple {

            background: linear-gradient(135deg, #64748b 0%, #475569 100%);

            color: white;

            border-color: #64748b;

        }

        

        .btn-purple:hover {

            background: linear-gradient(135deg, #475569 0%, #334155 100%);

            color: white;

        }

        

        .btn-orange {

            background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);

            color: white;

            border-color: #6b7280;

        }

        

        .btn-orange:hover {

            background: linear-gradient(135deg, #4b5563 0%, #374151 100%);

            color: white;

        }



        /* Clean monochromatic button series - black on white */

        .btn-mono-1, .btn-mono-2, .btn-mono-3, .btn-mono-4, .btn-mono-5, .btn-mono-6 {

            background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.95) 100%);

            color: #2d3748;

            border-color: #e2e8f0;

        }

        

        .btn-mono-1:hover, .btn-mono-2:hover, .btn-mono-3:hover, .btn-mono-4:hover, .btn-mono-5:hover, .btn-mono-6:hover {

            background: linear-gradient(135deg, rgba(241,245,249,0.98) 0%, rgba(226,232,240,0.95) 100%);

            color: #1a202c;

            border-color: #cbd5e0;

        }

        

        /* Quick status buttons */

        .btn-group-vertical .btn {

            border-radius: 8px !important;

            margin-bottom: 5px;

            font-weight: 500;

            padding: 8px 16px;

            transition: all 0.3s ease;

        }

        

        .btn-group-vertical .btn:hover {

            transform: translateX(5px);

        }

        

        .timeline-actions {

            display: flex;

            gap: 10px;

        }

        

        .btn-primary:hover {

            box-shadow: var(--shadow-md);

            transform: translateY(-2px);

        }

        

        .btn-secondary {

            background: linear-gradient(135deg, #718096 0%, #4a5568 100%);

            border: none;

            box-shadow: var(--shadow-sm);

            transition: var(--transition);

        }

        

        .btn-secondary:hover {

            box-shadow: var(--shadow-md);

            transform: translateY(-2px);

        }

        

        .table-container {

            overflow-x: auto;

            position: relative;

            /* REMOVED scroll-behavior: smooth - was causing jittery movement with manual scrolling */

            /* Add padding to ensure content is visible at edges during auto-scroll */

            padding-left: 15px;

            padding-right: 15px;

            cursor: grab;

        }



        .table-container:active {

            cursor: grabbing;

        }



        /* Scroll help indicator */

        .scroll-help-indicator {

            position: fixed;

            top: 120px;

            right: 20px;

            background: rgba(0, 123, 255, 0.9);

            color: white;

            padding: 8px 12px;

            border-radius: 20px;

            font-size: 12px;

            font-weight: 500;

            z-index: 9999;

            opacity: 0;

            transition: opacity 0.3s ease;

            pointer-events: none !important;

            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

            user-select: none;

            cursor: default;

        }



        .table-container:hover .scroll-help-indicator {

            opacity: 1;

        }



        .scroll-help-indicator.drag-active {

            background: linear-gradient(45deg, #ff6b6b, #ffd93d) !important;

            animation: turbo-pulse 0.8s infinite;

            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);

            font-weight: bold;

            transform: scale(1.05);

        }



        @keyframes turbo-pulse {

            0%, 100% { 

                transform: scale(1.05); 

                box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);

            }

            50% { 

                transform: scale(1.1); 

                box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6);

            }

        }

        

        /* Scroll indicator styles */

        .horizontal-scroll-indicator {

            position: absolute;

            bottom: 0;

            left: 0;

            height: 4px;

            background: var(--vincodo-gradient);

            width: 0;

            opacity: 0;

            transition: opacity 0.3s ease;

            z-index: 100;

        }

        

                 /* Auto-scroll zone indicators */

         .table-container::before,

         .table-container::after {

             content: '';

             position: absolute;

             top: 0;

             bottom: 0;

             width: 40%;

             pointer-events: none;

             z-index: 50;

             opacity: 0;

             transition: opacity 0.3s ease;

         }

        

        .table-container::before {

            left: 0;

            background: linear-gradient(90deg, rgba(0,123,255,0.1) 0%, transparent 100%);

        }

        

        .table-container::after {

            right: 0;

            background: linear-gradient(270deg, rgba(0,123,255,0.1) 0%, transparent 100%);

        }

        

        .table-container:hover::before,

        .table-container:hover::after {

            opacity: 1;

        }

        

        .table-container.scrolling-left::before {

            background: linear-gradient(90deg, rgba(40,167,69,0.2) 0%, transparent 100%);

        }

        

        .table-container.scrolling-right::after {

            background: linear-gradient(270deg, rgba(40,167,69,0.2) 0%, transparent 100%);

        }

        

        /* 🚀 DRAG MODE: INSANE SPEED visual feedback */

        .table-container.drag-mode {

            border: 2px solid #ff6b6b !important;

            box-shadow: 0 0 20px rgba(255, 107, 107, 0.3) !important;

            transition: all 0.2s ease;

        }

        

        .table-container.drag-mode::before,

        .table-container.drag-mode::after {

            background: linear-gradient(90deg, rgba(255, 107, 107, 0.4) 0%, transparent 100%) !important;

            animation: insane-pulse 0.5s infinite alternate;

        }

        

        .table-container.drag-mode::after {

            background: linear-gradient(270deg, rgba(255, 107, 107, 0.4) 0%, transparent 100%) !important;

        }

        

        @keyframes insane-pulse {

            0% { opacity: 0.4; }

            100% { opacity: 0.8; }

        }

        

        /* Recent Lead Indicators (Optional Enhancement) */

        .lead-row-new {

            background-color: rgba(40, 167, 69, 0.05) !important;

            border-left: 3px solid #28a745;

        }

        

        .lead-row-recent {

            background-color: rgba(255, 193, 7, 0.05) !important;

            border-left: 3px solid #ffc107;

        }

        

        .badge-new {

            background-color: #28a745 !important;

            color: white;

            font-size: 10px;

            padding: 2px 6px;

            border-radius: 10px;

            margin-left: 5px;

            animation: pulse-new 2s infinite;

        }

        

        .badge-recent {

            background-color: #ffc107 !important;

            color: #212529;

            font-size: 10px;

            padding: 2px 6px;

            border-radius: 10px;

            margin-left: 5px;

        }

        

        .badge-hot {

            background-color: #dc3545 !important;

            color: white;

            font-size: 10px;

            padding: 2px 6px;

            border-radius: 10px;

            margin-left: 5px;

            animation: pulse-hot 1.5s infinite;

        }

        

        @keyframes pulse-new {

            0% { transform: scale(1); opacity: 1; }

            50% { transform: scale(1.05); opacity: 0.8; }

            100% { transform: scale(1); opacity: 1; }

        }

        

        @keyframes pulse-hot {

            0% { transform: scale(1); opacity: 1; }

            50% { transform: scale(1.1); opacity: 0.7; }

            100% { transform: scale(1); opacity: 1; }

        }



        /* Import badge styles (slightly less prominent than email badges) */

        .badge-hot-import {

            background-color: #dc3545 !important;

            color: white;

            font-size: 10px;

            padding: 2px 6px;

            border-radius: 10px;

            margin-left: 5px;

            opacity: 0.8; /* Slightly less prominent */

            border: 1px solid rgba(220, 53, 69, 0.6);

        }

        

        .badge-new-import {

            background-color: #28a745 !important;

            color: white;

            font-size: 10px;

            padding: 2px 6px;

            border-radius: 10px;

            margin-left: 5px;

            opacity: 0.8; /* Slightly less prominent */

            border: 1px solid rgba(40, 167, 69, 0.6);

        }

        

        .badge-recent-import {

            background-color: #ffc107 !important;

            color: #212529;

            font-size: 10px;

            padding: 2px 6px;

            border-radius: 10px;

            margin-left: 5px;

            opacity: 0.8; /* Slightly less prominent */

            border: 1px solid rgba(255, 193, 7, 0.6);

        }



        #leadsTable th {

            cursor: pointer;

            position: relative;

        }

        #leadsTable th:hover {

            background-color: #f1f1f1;

        }

        #leadsTable th::after {

            content: "";

            position: absolute;

            right: 8px;

            color: #999;

        }

        #leadsTable th.asc::after {

            content: "\25B2"; /* ▲ */

            color: #333;

        }

        #leadsTable th.desc::after {

            content: "\25BC"; /* ▼ */

            color: #333;

        }

        

        #leadsTableBody tr {

            transition: all 0.2s ease;

        }

        

        /* Context Menu Styles */

        .context-menu {

            position: absolute;

            background: white;

            border: 1px solid #ddd;

            border-radius: 8px;

            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

            z-index: 1000;

            min-width: 200px;

            display: none;

            overflow: hidden;

        }

        

        .context-menu-item {

            padding: 12px 16px;

            cursor: pointer;

            transition: background-color 0.2s ease;

            display: flex;

            align-items: center;

            font-size: 14px;

            color: #333;

        }

        

        .context-menu-item:hover {

            background-color: var(--accent-color);

            color: white;

        }

        

        .context-menu-item.danger {

            color: #dc3545;

        }

        

        .context-menu-item.danger:hover {

            background-color: #dc3545;

            color: white;

        }

        

        .context-menu-item i {

            margin-right: 10px;

            width: 16px;

            text-align: center;

        }

        

        .context-menu-divider {

            height: 1px;

            background-color: #eee;

            margin: 4px 0;

        }

        .status-badge {

            padding: 5px 10px;

            border-radius: 15px;

            font-size: 12px;

            font-weight: 600;

        }

        .status-pending {

            background-color: #fff3cd;

            color: #856404;

        }

        .status-opportunity {

            background-color: #d4edda;

            color: #155724;

        }

        .status-closed {

            background-color: #f8d7da;

            color: #721c24;

        }

        .status-no-opportunity {

            background-color: #e2e3e5;

            color: #383d41;

        }

        .status-meeting {

            color: #fff;

            background: linear-gradient(135deg, #f6c23e 0%, #e5ad25 100%);

            padding: 5px 10px;

            border-radius: 20px;

            font-weight: bold;

            display: inline-block;

            box-shadow: 0 2px 4px rgba(246, 194, 62, 0.3);

        }

        .filter-row {

            margin-bottom: 15px;

        }

        .search-box {

            padding: 8px 15px;

            border-radius: 4px;

            border: 1px solid #ced4da;

            width: 100%;

        }

        .chart-container {

            height: 350px;

            margin-bottom: 20px;

            position: relative;

        }

        

        .chart-container canvas {

            cursor: pointer;

        }

        

        .chart-tooltip {

            position: absolute;

            background: rgba(0,0,0,0.7);

            color: white;

            padding: 5px 10px;

            border-radius: 4px;

            font-size: 12px;

            pointer-events: none;

            z-index: 100;

            display: none;

        }

        

        .selected-filter {

            display: flex;

            align-items: center;

            margin-top: 10px;

            padding: 8px 12px;

            background-color: rgba(54, 185, 204, 0.1);

            border-left: 3px solid var(--accent-color);

            border-radius: 6px;

            font-weight: 500;

            color: var(--accent-dark);

            animation: fadeIn 0.3s ease-in-out;

        }

        

        @keyframes fadeIn {

            from { opacity: 0; transform: translateY(-10px); }

            to { opacity: 1; transform: translateY(0); }

        }

        

        .selected-filter .clear-filter {

            margin-left: 10px;

            cursor: pointer;

            color: #e53e3e;

            font-weight: bold;

            transition: var(--transition);

        }

        

        .selected-filter .clear-filter:hover {

            transform: scale(1.2);

        }

        /* Lead table styles */

        #leadsTable {

            width: calc(100% - 30px); /* Subtract padding from both sides */

            border-collapse: collapse;

            margin: 0; /* Reset any margin */

        }

        

        #leadsTable th {

            background-color: var(--bg-gray);

            border-bottom: 2px solid var(--accent-color);

            padding: 12px 8px;

            position: sticky;

            top: 0;

            cursor: pointer;

            z-index: 10;

            font-weight: 600;

            color: var(--text-dark);

            transition: var(--transition);

        }

        

        #leadsTable th:hover {

            background-color: rgba(54, 185, 204, 0.1);

        }

        

        #leadsTable th.asc::after,

        #leadsTable th.desc::after {

            color: var(--accent-color);

            font-weight: bold;

        }

        

        #leadsTable {

            width: 100%;

            border-collapse: collapse;

            margin: 0;

            table-layout: fixed;

        }



        #leadsTable td, #leadsTable th {

            padding: 0 8px;

            border-bottom: 1px solid #dee2e6;

            transition: var(--transition);

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;

            height: var(--row-height);

            line-height: var(--row-height);

        }



        /* Special widths for specific columns */

        #leadsTable td:first-child,

        #leadsTable th:first-child {

            width: 30px; /* Checkbox column */

            min-width: 30px;

        }



        #leadsTable td:nth-child(2),

        #leadsTable th:nth-child(2) {

            width: 50px; /* Row number column */

            min-width: 50px;

        }



        /* All other columns get the variable width */

        #leadsTable td:not(:first-child):not(:nth-child(2)),

        #leadsTable th:not(:first-child):not(:nth-child(2)) {

            width: var(--column-width);

            min-width: var(--column-width);

            max-width: var(--column-width);

        }

        

        #leadsTable tbody tr {

            transition: all 0.2s ease-in-out;

        }

        

        #leadsTable tbody tr:hover {

            background-color: rgba(54, 185, 204, 0.05);

            transform: translateY(-2px);

            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

        }





        

        /* Status styling */

        .status-pending {

            color: #fff;

            background: linear-gradient(135deg, #4e73df 0%, #3a57c5 100%);

            padding: 5px 10px;

            border-radius: 20px;

            font-weight: bold;

            display: inline-block;

            box-shadow: 0 2px 4px rgba(78, 115, 223, 0.3);

        }

        

        .status-opportunity {

            color: #fff;

            background: linear-gradient(135deg, #1cc88a 0%, #13a56f 100%);

            padding: 5px 10px;

            border-radius: 20px;

            font-weight: bold;

            display: inline-block;

            box-shadow: 0 2px 4px rgba(28, 200, 138, 0.3);

        }

        

        .status-no-opportunity {

            color: #fff;

            background: linear-gradient(135deg, #e74a3b 0%, #d42718 100%);

            padding: 5px 10px;

            border-radius: 20px;

            font-weight: bold;

            display: inline-block;

            box-shadow: 0 2px 4px rgba(231, 74, 59, 0.3);

        }

        

        .status-closed {

            color: #fff;

            background: linear-gradient(135deg, #858796 0%, #6e6f7c 100%);

            padding: 5px 10px;

            border-radius: 20px;

            font-weight: bold;

            display: inline-block;

            box-shadow: 0 2px 4px rgba(133, 135, 150, 0.3);

        }

        

        .status-meeting {

            color: #fff;

            background: linear-gradient(135deg, #f6c23e 0%, #e5ad25 100%);

            padding: 5px 10px;

            border-radius: 20px;

            font-weight: bold;

            display: inline-block;

            box-shadow: 0 2px 4px rgba(246, 194, 62, 0.3);

        }

        

        /* Meeting schedule indicators */

        .overdue-meeting {

            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;

            border-left: 4px solid #dc3545;

            animation: pulse-red 2s infinite;

        }

        

        .meeting-today {

            background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important;

            border-left: 4px solid #ffc107;

            animation: pulse-yellow 2s infinite;

        }

        

        .meeting-soon {

            background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important;

            border-left: 4px solid #17a2b8;

        }

        

        .meeting-upcoming {

            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;

            border-left: 4px solid #007bff;

        }

        

        @keyframes pulse-red {

            0%, 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }

            50% { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }

        }

        

        @keyframes pulse-yellow {

            0%, 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); }

            50% { box-shadow: 0 0 0 10px rgba(255, 193, 7, 0); }

        }

        

        .form-select, .search-box {

            border: 1px solid #e2e8f0;

            padding: 10px 15px;

            border-radius: 8px;

            box-shadow: 0 1px 3px rgba(0,0,0,0.05);

            transition: var(--transition);

        }

        

        .form-select:focus, .search-box:focus {

            border-color: var(--accent-color);

            box-shadow: 0 0 0 3px rgba(54, 185, 204, 0.2);

            outline: none;

        }

        

        /* Enhanced Pipeline Status Classes */

/* Pipeline Stage Status Styles */

.status-qualified {

    background-color: #e3f2fd !important;

    color: #0d47a1 !important;

    font-weight: 500;

}



.status-proposal {

    background-color: #fff3e0 !important;

    color: #e65100 !important;

    font-weight: 500;

}



.status-negotiation {

    background-color: #f3e5f5 !important;

    color: #7b1fa2 !important;

    font-weight: 500;

}



.status-closed-won {

    background-color: #e8f5e9 !important;

    color: #2e7d32 !important;

    font-weight: 500;

}



.status-closed-lost {

    background-color: #ffebee !important;

    color: #c62828 !important;

    font-weight: 500;

}



/* Add hover effects */

.status-qualified:hover,

.status-proposal:hover,

.status-negotiation:hover,

.status-closed-won:hover,

.status-closed-lost:hover {

    filter: brightness(0.95);

}

        .pipeline-lead {

            color: #fff;

            background: linear-gradient(135deg, var(--pipeline-lead) 0%, #5a6268 100%);

            padding: 5px 10px;

            border-radius: 20px;

            font-weight: bold;

            display: inline-block;

            box-shadow: 0 2px 4px rgba(108, 117, 125, 0.3);

        }

        

        .pipeline-qualified {

            color: #fff;

            background: linear-gradient(135deg, var(--pipeline-qualified) 0%, #138496 100%);

            padding: 5px 10px;

            border-radius: 20px;

            font-weight: bold;

            display: inline-block;

            box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);

        }

        

        .pipeline-proposal {

            color: #333;

            background: linear-gradient(135deg, var(--pipeline-proposal) 0%, #e0a800 100%);

            padding: 5px 10px;

            border-radius: 20px;

            font-weight: bold;

            display: inline-block;

            box-shadow: 0 2px 4px rgba(255, 193, 7, 0.3);

        }

        

        .pipeline-negotiation {

            color: #fff;

            background: linear-gradient(135deg, var(--pipeline-negotiation) 0%, #dc6815 100%);

            padding: 5px 10px;

            border-radius: 20px;

            font-weight: bold;

            display: inline-block;

            box-shadow: 0 2px 4px rgba(253, 126, 20, 0.3);

        }

        

        .pipeline-closed-won {

            color: #fff;

            background: linear-gradient(135deg, var(--pipeline-closed-won) 0%, #218838 100%);

            padding: 5px 10px;

            border-radius: 20px;

            font-weight: bold;

            display: inline-block;

            box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);

        }

        

        .pipeline-closed-lost {

            color: #fff;

            background: linear-gradient(135deg, var(--pipeline-closed-lost) 0%, #c82333 100%);

            padding: 5px 10px;

            border-radius: 20px;

            font-weight: bold;

            display: inline-block;

            box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);

        }

        

        /* Deal Value Styling */

        .deal-value {

            font-weight: 600;

            font-size: 1.1em;

            padding: 2px 8px;

            border-radius: 12px;

            display: inline-block;

        }

        

        .deal-small { 

            color: var(--deal-small); 

            background-color: rgba(108, 117, 125, 0.1);

        }

        .deal-medium { 

            color: var(--deal-medium);

            background-color: rgba(23, 162, 184, 0.1);

        }

        .deal-large { 

            color: var(--deal-large);

            background-color: rgba(40, 167, 69, 0.1);

        }

        .deal-enterprise { 

            color: var(--deal-enterprise);

            background-color: rgba(111, 66, 193, 0.1);

        }

        

        /* Sales Activity Styling */

        .activity-log {

            background: #ffffff;

            border-radius: 8px;

            padding: 12px;

            margin: 5px 0;

            border: 1px solid #e2e8f0;

            border-left: 3px solid var(--accent-color);

            font-size: 14px;

            box-shadow: 0 1px 3px rgba(0,0,0,0.05);

        }

        

        .activity-icon {

            display: inline-block;

            width: 20px;

            height: 20px;

            border-radius: 50%;

            margin-right: 8px;

            text-align: center;

            line-height: 20px;

            font-size: 12px;

            color: white;

        }

        

        .activity-call { background-color: #17a2b8; }

        .activity-email { background-color: #6c757d; }

        .activity-meeting { background-color: #28a745; }

        .activity-proposal { background-color: #ffc107; color: #333; }

        .activity-note { background-color: #6f42c1; }

        

        /* Pipeline Funnel View */

        .pipeline-funnel {

            display: flex;

            justify-content: space-between;

            align-items: flex-end;

            padding: 20px;

            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);

            border-radius: 12px;

            margin: 20px 0;

        }

        

        .funnel-stage {

            flex: 1;

            text-align: center;

            margin: 0 5px;

            padding: 15px 10px;

            background: white;

            border-radius: 8px;

            box-shadow: var(--shadow-sm);

            transition: var(--transition);

            position: relative;

            cursor: pointer;

        }

        

        .funnel-stage:hover {

            transform: translateY(-3px);

            box-shadow: var(--shadow-md);

        }

        

        .funnel-stage-count {

            font-size: 24px;

            font-weight: bold;

            margin-bottom: 5px;

        }

        

        .funnel-stage-label {

            font-size: 12px;

            text-transform: uppercase;

            letter-spacing: 1px;

            margin-bottom: 5px;

        }

        

        .funnel-stage-value {

            font-size: 14px;

            color: var(--text-light);

        }

        

        .conversion-arrow {

            position: absolute;

            right: -15px;

            top: 50%;

            transform: translateY(-50%);

            color: var(--accent-color);

            font-size: 18px;

        }

        

        /* Pipeline Lead Visual Indicators */

        .pipeline-advanced-stage {

            position: relative;

        }

        

        /* Pipeline filter buttons */

        .btn-group .btn.active {

            background-color: #0d6efd;

            border-color: #0d6efd;

            color: white;

        }

        

        /* Activity delete buttons */

        .activity-log {

            position: relative;

            padding: 8px;

            border: 1px solid #e2e8f0;

            border-radius: 6px;

            background: white;

            transition: all 0.2s ease;

        }

        

        .activity-log:hover {

            box-shadow: 0 2px 4px rgba(0,0,0,0.1);

            border-color: #d1d5db;

        }

        

        .activity-log .btn-outline-danger {

            opacity: 0.7;

            transition: opacity 0.2s ease;

        }

        

        .activity-log:hover .btn-outline-danger {

            opacity: 1;

        }

        

        /* Notes editor styling */

        .notes-cell {

            position: relative;

            min-height: 24px;

            cursor: pointer;

        }

        

        .notes-edit-icon {

            position: absolute;

            right: 5px;

            top: 5px;

            opacity: 0;

            transition: opacity 0.2s ease;

            color: var(--accent-color);

        }

        

        .notes-cell:hover .notes-edit-icon {

            opacity: 1;

        }

        

        .notes-editor {

            width: 100%;

            padding: 8px;

            border: 1px solid var(--accent-light);

            border-radius: 4px;

            resize: vertical;

            min-height: 80px;

            box-shadow: 0 0 0 3px rgba(54, 185, 204, 0.1);

            outline: none;

            transition: var(--transition);

        }

        

        .notes-editor:focus {

            border-color: var(--accent-color);

            box-shadow: 0 0 0 3px rgba(54, 185, 204, 0.2);

        }

        

        .notes-controls {

            display: flex;

            gap: 8px;

            margin-top: 8px;

        }

        

        .notes-save-btn, .notes-cancel-btn {

            padding: 5px 10px;

            border-radius: 4px;

            border: none;

            cursor: pointer;

            font-weight: 500;

            transition: var(--transition);

        }

        

        .notes-save-btn {

            background: var(--vincodo-gradient);

            color: white;

        }

        

        .notes-cancel-btn {

            background: #e2e8f0;

            color: var(--text-dark);

        }

        

        .notes-save-btn:hover, .notes-cancel-btn:hover {

            transform: translateY(-2px);

            box-shadow: var(--shadow-sm);

        }

        

        /* Modal dialog for notes editor */

        .modal-backdrop {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: rgba(0, 0, 0, 0.5);

            z-index: 1000;

            display: flex;

            justify-content: center;

            align-items: center;

            opacity: 0;

            visibility: hidden;

            transition: all 0.3s ease;

        }

        

        .modal-backdrop.show {

            opacity: 1;

            visibility: visible;

            pointer-events: all;

        }

        

        .modal-dialog {

            width: 90%;

            max-width: 600px;

            background: white;

            border-radius: 8px;

            box-shadow: var(--shadow-lg);

            overflow: hidden;

            transform: translateY(20px);

            transition: transform 0.3s ease;

            z-index: 1001;

            position: relative;

        }

        

        .modal-backdrop.show .modal-dialog {

            transform: translateY(0);

        }

        

        .modal-header {

            padding: 15px 20px;

            border-bottom: 1px solid #e2e8f0;

            display: flex;

            justify-content: space-between;

            align-items: center;

            background: var(--vincodo-gradient);

            color: white;

        }

        

        .modal-title {

            margin: 0;

            font-size: 1.25rem;

            font-weight: 600;

        }

        

        .modal-close {

            background: none;

            border: none;

            font-size: 1.5rem;

            cursor: pointer;

            color: white;

            opacity: 0.8;

            transition: opacity 0.2s ease;

        }

        

        .modal-close:hover {

            opacity: 1;

        }

        

        /* Modal body with form layout */

        .modal-body {

            padding: 20px;

        }

        

        .modal-body .form-row {

            display: flex;

            gap: 15px;

            margin-bottom: 15px;

        }

        

        .modal-body .form-col {

            flex: 1;

        }

        

        .modal-footer {

            padding: 15px 20px;

            border-top: 1px solid #e2e8f0;

            display: flex;

            justify-content: flex-end;

            gap: 10px;

        }

        

        .form-label {

            font-weight: 500;

            display: block;

            margin-bottom: 8px;

            color: var(--text-dark);

        }

        

        /* Toast notification */

        #toast {

            position: fixed;

            bottom: 30px;

            right: 30px;

            background: var(--vincodo-gradient);

            color: white;

            padding: 12px 20px;

            border-radius: 8px;

            box-shadow: var(--shadow-md);

            opacity: 0;

            visibility: hidden;

            transform: translateY(20px);

            transition: all 0.3s ease;

            display: flex;

            align-items: center;

            z-index: 1000;

        }

        

        #toast.show {

            opacity: 1;

            visibility: visible;

            transform: translateY(0);

        }

        

        #toast i {

            margin-right: 10px;

            font-size: 1.25rem;

        }

        

        .toast-close {

            margin-left: 15px;

            cursor: pointer;

            opacity: 0.8;

            transition: opacity 0.2s ease;

        }

        

        .toast-close:hover {

            opacity: 1;

        }

        

        /* Custom status label */

        .custom-status {

            color: #fff;

            background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-dark) 100%);

            padding: 5px 10px;

            border-radius: 20px;

            font-weight: bold;

            display: inline-block;

            box-shadow: 0 2px 4px rgba(54, 185, 204, 0.3);

        }

        

        /* Export/import buttons */

        .data-controls {

            margin-bottom: 15px;

            display: flex;

            gap: 10px;

        }

        

        /* Editable cell indicator */

        .editable-cell {

            position: relative;

            cursor: pointer;

            transition: background-color 0.2s ease;

        }

        

        .editable-cell:hover {

            background-color: rgba(54, 185, 204, 0.1);

        }

        

        .editable-cell:hover::after {

            content: '\270E';

            position: absolute;

            right: 5px;

            top: 50%;

            transform: translateY(-50%);

            font-size: 12px;

            color: var(--accent-color);

            opacity: 0.7;

        }



        /* Edit lead style - completely new approach */

        #simple-edit-overlay {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: rgba(0, 0, 0, 0.5);

            display: flex;

            justify-content: center;

            align-items: center;

            z-index: 1060; /* Higher than Bootstrap modals (1050) to ensure it appears on top */

        }



        /* Empty field highlighting */

        .empty-field-highlight {

            background-color: #fff3cd !important;

            border-color: #ffc107 !important;

            box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25) !important;

            transition: all 0.3s ease;

        }



        .empty-field-highlight:focus {

            background-color: #ffffff !important;

            border-color: #0d6efd !important;

            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;

        }



        #simple-edit-container {

    width: 90%;

    max-width: 700px;

    max-height: 90vh;

    background: white;

    border-radius: 8px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

    overflow: hidden;

    display: flex;

    flex-direction: column;

}



        #simple-edit-header {

            background: var(--vincodo-gradient);

            color: white;

            padding: 15px 20px;

            display: flex;

            justify-content: space-between;

            align-items: center;

        }



        #simple-edit-header h3 {

            margin: 0;

            font-size: 1.25rem;

        }



        #simple-edit-close {

            background: none;

            border: none;

            color: white;

            font-size: 1.5rem;

            cursor: pointer;

        }



        #simple-edit-body {

    padding: 20px;

    overflow-y: auto;

    flex: 1;

}



        .simple-edit-field {

            margin-bottom: 15px;

        }



        .simple-edit-field label {

            display: block;

            font-weight: 500;

            margin-bottom: 5px;

        }



        .simple-edit-row {

            display: flex;

            gap: 15px;

            margin-bottom: 15px;

        }



        .simple-edit-col {

            flex: 1;

        }



        #simple-edit-buttons {

            display: flex;

            justify-content: flex-end;

            gap: 10px;

            padding: 15px 20px;

            border-top: 1px solid #e2e8f0;

        }

/* Mobile responsiveness for edit modal */

@media (max-width: 768px) {

    #simple-edit-container {

        width: 95%;

        max-height: 95vh;

        margin: 10px;

    }

    

    .simple-edit-row {

        flex-direction: column;

        gap: 10px;

    }

    

    #simple-edit-body {

        padding: 15px;

    }

    

    #simple-edit-buttons {

        flex-wrap: wrap;

        padding: 10px 15px;

    }

}



@media (max-width: 480px) {

    #simple-edit-container {

        width: 98%;

        max-height: 98vh;

        margin: 5px;

    }

    

    #simple-edit-header {

        padding: 10px 15px;

    }

    

    #simple-edit-header h3 {

        font-size: 1.1rem;

    }

    

    #simple-edit-body {

        padding: 10px;

    }

    

    #simple-edit-buttons {

        padding: 10px;

        justify-content: center;

    }

}

        /* Tab navigation styles */

        .nav-tabs {

            display: flex;

            overflow-x: auto;

            list-style-type: none;

            padding: 0;

            margin: 0 0 20px 0;

            border-bottom: 2px solid var(--accent-color);

        }



        .nav-tabs li {

            padding: 0;

            margin: 0;

        }



        .nav-tabs a {

            display: block;

            padding: 12px 20px;

            text-decoration: none;

            color: var(--text-dark);

            font-weight: 600;

            border-radius: 6px 6px 0 0;

            position: relative;

            transition: var(--transition);

            white-space: nowrap;

        }



        .nav-tabs a:hover {

            background-color: rgba(54, 185, 204, 0.1);

        }



        .nav-tabs a.active {

            background: var(--vincodo-gradient);

            color: white;

        }



        /* Enhanced Dashboard Styles */

        .dashboard-tabs {

            border-bottom: 2px solid #e9ecef;

            margin-bottom: 2rem;

        }



        .dashboard-tabs .nav-link {

            border: none;

            border-radius: 8px 8px 0 0;

            font-weight: 600;

            color: #6c757d;

            padding: 12px 20px;

            margin-right: 4px;

            transition: all 0.3s ease;

        }



        .dashboard-tabs .nav-link:hover {

            background-color: #f8f9fa;

            color: #495057;

        }



        .dashboard-tabs .nav-link.active {

            background-color: #fff;

            color: #28a745;

            border-bottom: 3px solid #28a745;

            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);

        }



        /* Revenue Dashboard Styles */

        .revenue-dashboard .card {

            border: none;

            box-shadow: 0 2px 8px rgba(0,0,0,0.1);

            border-radius: 12px;

        }



        .revenue-dashboard .card-header {

            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);

            color: white;

            border-radius: 12px 12px 0 0;

            border: none;

        }



        .forecast-item {

            border-bottom: 1px solid #e9ecef;

            padding-bottom: 8px;

        }



        .forecast-item:last-child {

            border-bottom: none;

        }



        /* Sales Overview Styles */

        .sales-overview-dashboard .card {

            border: none;

            box-shadow: 0 2px 8px rgba(0,0,0,0.1);

            border-radius: 12px;

            transition: transform 0.2s ease;

        }



        .sales-overview-dashboard .card:hover {

            transform: translateY(-2px);

            box-shadow: 0 4px 12px rgba(0,0,0,0.15);

        }



        .funnel-item {

            margin-bottom: 1rem;

        }



        .funnel-item .progress {

            height: 20px;

            border-radius: 10px;

        }



        /* Campaign Dashboard Styles */

        .campaigns-dashboard .card {

            border: none;

            box-shadow: 0 2px 8px rgba(0,0,0,0.1);

            border-radius: 12px;

        }



        .campaigns-dashboard .table th {

            border-top: none;

            font-weight: 600;

            color: #495057;

        }



        .campaigns-dashboard .badge {

            font-size: 0.85em;

            padding: 6px 12px;

        }



        /* Team Dashboard Styles */

        .team-dashboard .card {

            border: none;

            box-shadow: 0 2px 8px rgba(0,0,0,0.1);

            border-radius: 12px;

        }



        .team-member {

            background: #f8f9fa;

            border: 2px solid #e9ecef !important;

            border-radius: 12px !important;

            transition: all 0.3s ease;

        }



        .team-member:hover {

            transform: translateY(-2px);

            box-shadow: 0 4px 12px rgba(0,0,0,0.1);

            border-color: #28a745 !important;

        }



        .metric-item {

            padding: 8px 0;

            border-bottom: 1px solid #e9ecef;

        }



        .metric-item:last-child {

            border-bottom: none;

        }



        /* Dashboard Controls */

        .dashboard-controls .btn {

            border-radius: 8px;

            font-weight: 500;

        }



        /* Chart Container Styles */

        .card-body canvas {

            max-height: 300px;

        }



        /* Responsive Dashboard */

        @media (max-width: 768px) {

            .dashboard-tabs .nav-link {

                padding: 8px 12px;

                font-size: 0.9rem;

            }

            

            .sales-overview-dashboard .col-md-2 {

                margin-bottom: 1rem;

            }

            

            .team-member .col-md-1,

            .team-member .col-md-2,

            .team-member .col-md-3 {

                margin-bottom: 0.5rem;

            }

        }



        .tab-content {

            width: 100%;

            min-height: 500px;

            border: none;

        }



        .tab-pane {

            display: none;

        }



        .tab-pane.active {

            display: block;

        }



        .tab-pane.show.active {

            display: block;

        }



        .iframe-container {

            width: 100%;

            height: 100%;

            overflow: auto;

            border-radius: 8px;

            box-shadow: var(--shadow-sm);

        }



        iframe {

            width: 100%;

            height: 100%;

            border: none;

        }



        /* Delete button styling */

        .btn-danger {

            background: linear-gradient(135deg, #e74a3b 0%, #d42718 100%);

            color: white;

            border: none;

            box-shadow: var(--shadow-sm);

            transition: var(--transition);

        }

        

        .btn-danger:hover {

            box-shadow: var(--shadow-md);

            transform: translateY(-2px);

        }



        /* Template delete button styling */

        #deleteTemplateBtn {

            min-width: 44px;

            flex-shrink: 0;

        }

        

        #deleteTemplateBtn:disabled {

            opacity: 0.4;

            cursor: not-allowed;

            transform: none !important;

        }

        

        #deleteTemplateBtn:disabled:hover {

            box-shadow: none !important;

            transform: none !important;

        }



        /* Add CSS for editable stats */

        .editable-stat {

            cursor: pointer;

            border-bottom: 1px dashed var(--accent-color);

            transition: background-color 0.2s ease;

        }

        .editable-stat:hover {

            background-color: rgba(54, 185, 204, 0.1);

        }



        /* Lead Summary Modal Styles */

        .lead-summary-content {

            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

            line-height: 1.6;

            color: #333;

        }

        

        .summary-section {

            margin-bottom: 25px;

            padding: 15px;

            border-left: 4px solid var(--accent-color);

            background: #f8f9fa;

            border-radius: 0 6px 6px 0;

        }

        

        .summary-section h4 {

            color: var(--accent-dark);

            margin-bottom: 12px;

            font-size: 1.2rem;

            font-weight: 600;

        }

        

        .summary-section h5 {

            color: var(--text-dark);

            margin-bottom: 8px;

            font-size: 1rem;

            font-weight: 500;

        }

        

        .summary-grid {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 15px;

            margin-bottom: 15px;

        }

        

        .summary-item {

            display: flex;

            align-items: flex-start;

            margin-bottom: 8px;

        }

        

        .summary-item strong {

            min-width: 120px;

            color: var(--text-dark);

            font-weight: 600;

        }

        

        .summary-item span {

            color: var(--text-light);

        }

        

        /* Better formatting for paragraph content in summaries */

        .lead-summary-content p {

            margin-bottom: 1em;

        }

        

        .lead-summary-content p:last-child {

            margin-bottom: 0;

        }

        

        .activity-timeline-summary {

            max-height: 300px;

            overflow-y: auto;

            padding: 10px;

            background: white;

            border-radius: 6px;

            border: 1px solid #dee2e6;

        }

        

        .activity-item-summary {

            padding: 8px 0;

            border-bottom: 1px solid #f1f1f1;

        }

        

        .activity-item-summary:last-child {

            border-bottom: none;

        }

        

        .activity-date {

            color: var(--accent-color);

            font-weight: 600;

            font-size: 0.9rem;

        }

        

        .activity-type {

            color: var(--text-dark);

            font-weight: 500;

            text-transform: capitalize;

        }

        

        .activity-description {

            color: var(--text-light);

            margin-top: 4px;

            font-size: 0.9rem;

        }

        

        .summary-stats {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

            gap: 15px;

            margin-top: 15px;

        }

        

        .summary-stat-card {

            background: white;

            padding: 15px;

            border-radius: 6px;

            border: 1px solid #dee2e6;

            text-align: center;

        }

        

        .summary-stat-value {

            font-size: 1.5rem;

            font-weight: bold;

            color: var(--accent-color);

        }

        

        .summary-stat-label {

            color: var(--text-light);

            font-size: 0.9rem;

            margin-top: 4px;

        }



        @media print {

            .lead-summary-content {

                font-size: 12px;

                line-height: 1.4;

            }

            

            .summary-section {

                break-inside: avoid;

                margin-bottom: 15px;

                padding: 10px;

            }

            

            .btn, .modal-header, .modal-footer {

                display: none !important;

            }

        }



        /* Styles for inline editable stats */

        .inline-editable-stat {

            display: inline-block; /* Needed for padding and border */

            min-width: 30px; /* Ensure it's clickable */

            padding: 2px 6px;

            border: 1px dashed transparent; /* Hidden border initially */

            cursor: text;

            transition: background-color 0.2s ease, border-color 0.2s ease;

        }

        .inline-editable-stat:hover {

            background-color: rgba(54, 185, 204, 0.1);

            border-color: var(--accent-light); /* Show border on hover */

        }

        .inline-editable-stat:focus {

            background-color: var(--white);

            border-color: var(--accent-color); /* Solid border when editing */

            outline: 2px solid var(--accent-light); /* Focus indicator */

            box-shadow: var(--shadow-sm);

            cursor: text;

        }



        /* Auth Page Styles */

        #auth-container {

            display: flex;

            justify-content: center;

            align-items: center;

            min-height: 100vh;

            background-color: var(--bg-gray);

        }

        .auth-card {

            background-color: var(--white);

            padding: 30px;

            border-radius: 12px;

            box-shadow: var(--shadow-lg);

            width: 100%;

            max-width: 450px;

        }

        .auth-card h2 {

            color: var(--primary-color);

            margin-bottom: 20px;

            text-align: center;

        }

        .auth-card .form-control {

            margin-bottom: 15px;

            padding: 12px;

            border-radius: 8px;

        }

        .auth-card .btn {

            padding: 12px;

            border-radius: 8px;

            font-weight: 600;

        }

        .auth-toggle-link {

            display: block;

            text-align: center;

            margin-top: 15px;

            color: var(--primary-light);

            cursor: pointer;

        }

        .auth-toggle-link:hover {

            text-decoration: underline;

        }

        #login-error-message, #signup-error-message, #password-reset-error-message, #password-reset-success-message {

            text-align: center;

            margin-bottom: 15px;

            font-weight: 500;

            min-height: 1.2em; /* Reserve space to prevent layout shifts */

        }

        #login-error-message, #signup-error-message, #password-reset-error-message {

            color: var(--no-opportunity); /* Using a red color variable */

        }

        #password-reset-success-message {

            color: var(--opportunity); /* Using a green color variable */

        }

        /* End Auth Page Styles */



        /* AI Assistant Robot Styles */

        .floating-robot {

            position: fixed;

            bottom: 30px;

            right: 30px;

            width: 60px;

            height: 60px;

            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            cursor: pointer;

            box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);

            transition: all 0.3s ease;

            z-index: 1000;

            border: 3px solid white;

        }

        

        .floating-robot:hover {

            transform: scale(1.1);

            box-shadow: 0 6px 25px rgba(102, 126, 234, 0.4);

        }

        

        .robot-icon {

            font-size: 24px;

            animation: robotBounce 2s infinite;

        }

        

        @keyframes robotBounce {

            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }

            40% { transform: translateY(-5px); }

            60% { transform: translateY(-3px); }

        }

        

        .robot-badge {

            position: absolute;

            top: -8px;

            right: -8px;

            background: #ff4757;

            color: white;

            border-radius: 50%;

            width: 24px;

            height: 24px;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 12px;

            font-weight: bold;

            border: 2px solid white;

            animation: pulse 2s infinite;

        }

        

        @keyframes pulse {

            0% { transform: scale(1); }

            50% { transform: scale(1.2); }

            100% { transform: scale(1); }

        }

        

        /* AI Assistant Modal Styles - BIGGER TEXT FOR READABILITY */

        .priority-item, .quick-win-item {

            background: white;

            border: 1px solid #e9ecef;

            border-radius: 10px;

            padding: 20px;

            margin-bottom: 15px;

            transition: all 0.2s ease;

            cursor: pointer;

        }

        

        .priority-item:hover, .quick-win-item:hover {

            background: #f8f9fa;

            transform: translateY(-2px);

            box-shadow: 0 4px 12px rgba(0,0,0,0.1);

        }

        

        .priority-item.high-priority {

            border-left: 5px solid #dc3545;

        }

        

        .priority-item.medium-priority {

            border-left: 5px solid #ffc107;

        }

        

        .quick-win-item {

            border-left: 5px solid #28a745;

        }

        

        .priority-title, .quick-win-title {

            font-weight: 600;

            font-size: 1.15em;

            margin-bottom: 8px;

            display: flex;

            align-items: center;

            gap: 10px;

        }

        

        .priority-message, .quick-win-message {

            color: #495057;

            font-size: 1.05em;

            margin-bottom: 15px;

            line-height: 1.5;

        }

        

        .priority-actions, .quick-win-actions {

            display: flex;

            gap: 10px;

        }

        

        .btn-xs {

            padding: 6px 12px;

            font-size: 0.85rem;

            border-radius: 6px;

        }

        

        /* Focus section styles */

        #todays-focus {

            border-radius: 12px;

            border: none;

            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);

            font-size: 1.05em;

        }

        

        .focus-stat {

            text-align: center;

            padding: 20px;

            background: white;

            border-radius: 10px;

            margin: 8px;

            box-shadow: 0 2px 8px rgba(0,0,0,0.1);

        }

        

        .focus-stat-number {

            font-size: 1.8em;

            font-weight: bold;

            color: #667eea;

        }

        

        .focus-stat-label {

            font-size: 1em;

            font-weight: 500;

            color: #6c757d;

            margin-top: 5px;

        }

        

        /* Make section headers bigger */

        #ai-assistant-modal h6 {

            font-size: 1.25em !important;

            font-weight: 600 !important;

        }

        

        /* Bigger emoji icons */

        .priority-title span:first-child, 

        .quick-win-title span:first-child {

            font-size: 1.4em;

        }

        

        /* Larger modal body text */

        #ai-assistant-modal .modal-body {

            font-size: 1.05em;

        }

        

        /* Empty state text bigger */

        .text-center.text-muted p {

            font-size: 1.1em !important;

        }

        

        .text-center.text-muted small {

            font-size: 1em !important;

        }

        

        /* Clickable email activities in Sales Activities */

        .activity-content-clickable {

            cursor: pointer;

            color: #0066cc;

            transition: all 0.2s ease;

            padding: 8px;

            border-radius: 4px;

            background: #f0f7ff;

        }

        

        .activity-content-clickable:hover {

            background: #e3f2ff;

            color: #0052a3;

            box-shadow: 0 2px 4px rgba(0, 102, 204, 0.1);

        }

        

        .activity-content {

            padding: 8px;

        }



    #rls-lead .rls-stat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}#rls-lead .rls-stat div{min-width:0;padding:10px 8px;box-sizing:border-box;}