.stage-prospecting { background-color: #fee2e2; color: #dc2626; }
        .stage-initial-contact { background-color: #fed7aa; color: #ea580c; }
        .stage-qualifying { background-color: #fef3c7; color: #d97706; }
        .stage-needs-assessment { background-color: #dbeafe; color: #2563eb; }
        .stage-presentation { background-color: #e0e7ff; color: #7c3aed; }
        .stage-objections { background-color: #f3e8ff; color: #9333ea; }
        .stage-closing { background-color: #dcfce7; color: #16a34a; }
        
        /* Sorteringsikoner styles */
        .sort-icon {
            transition: all 0.2s ease;
            opacity: 0.3;
        }
        
        .sort-icon.active {
            opacity: 1;
            color: #3b82f6;
        }
        
        th[onclick] {
            transition: background-color 0.2s ease;
        }
        
        th[onclick]:hover {
            background-color: #f3f4f6;
        }
        
        th[onclick]:active {
            background-color: #e5e7eb;
        }
        
        .file-upload-area {
            border: 2px dashed #d1d5db;
            border-radius: 0.5rem;
            padding: 1rem;
            text-align: center;
            transition: all 0.2s;
        }
        
        .file-upload-area:hover {
            border-color: #3b82f6;
            background-color: #f8fafc;
        }
        
        .attachment-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem;
            background-color: #f8fafc;
            border-radius: 0.375rem;
            margin-bottom: 0.5rem;
        }
        
        .file-icon {
            width: 1.5rem;
            height: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.25rem;
        }
        
        .file-icon.image { background-color: #10b981; color: white; }
        .file-icon.document { background-color: #3b82f6; color: white; }
        .file-icon.pdf { background-color: #ef4444; color: white; }
        
        .file-size {
            font-size: 0.75rem;
            color: #6b7280;
        }

        .loading {
            opacity: 0.6;
            pointer-events: none;
        }

        .toast {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 1rem;
            border-radius: 0.5rem;
            color: white;
            z-index: 1000;
            transform: translateX(100%);
            transition: transform 0.3s ease;
        }

        .toast.show {
            transform: translateX(0);
        }

        .toast.success { background-color: #10b981; }
        .toast.error { background-color: #ef4444; }
        .toast.info { background-color: #3b82f6; }

        /* Navigation styles */
        .nav-item {
            transition: all 0.2s ease-in-out;
        }

        .nav-item:hover {
            border-color: #d1d5db;
            color: #374151;
        }

        .nav-item.active {
            border-color: #3b82f6;
            color: #111827;
        }

        /* Page content transitions */
        .page-content {
            transition: opacity 0.3s ease-in-out;
        }

        .page-content.hidden {
            display: none;
        }

        /* Status filter slider styles */
        .slider {
            -webkit-appearance: none;
            appearance: none;
            background: linear-gradient(to right, #ef4444 0%, #3b82f6 50%, #10b981 100%);
            outline: none;
            border-radius: 0.5rem;
            transition: all 0.2s ease;
            height: 8px;
        }

        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            background: white;
            border: 2px solid #3b82f6;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: all 0.2s ease;
        }

        .slider::-webkit-slider-thumb:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .slider::-moz-range-thumb {
            width: 20px;
            height: 20px;
            background: white;
            border: 2px solid #3b82f6;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: all 0.2s ease;
        }

        .slider::-moz-range-thumb:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .slider:focus {
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }