* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

.ultra-commission-calculator {
font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}

.calculator-wrapper {
background: rgba(255, 255, 255, 0.98);
border-radius: 20px;
padding: 30px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
from { transform: translateY(30px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}

.header {
text-align: center;
margin-bottom: 30px;
}

.header h1 {
font-size: 2.5em;
background: linear-gradient(45deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
}

.header p {
color: #666;
font-size: 1.1em;
}

.main-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-bottom: 30px;
}

@media (max-width: 768px) {
.main-grid { grid-template-columns: 1fr; }
}

.input-section, .results-section {
background: #f8f9fa;
padding: 25px;
border-radius: 15px;
border: 1px solid #e0e0e0;
}

.input-group {
margin-bottom: 20px;
}

.input-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #333;
font-size: 0.95em;
}

.input-wrapper {
position: relative;
}

.input-wrapper input,
.input-wrapper select {
width: 100%;
padding: 12px 15px;
border: 2px solid #e0e0e0;
border-radius: 10px;
font-size: 16px;
transition: all 0.3s ease;
}

.input-wrapper input:focus,
.input-wrapper select:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.input-icon {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: #999;
}

.tooltip {
display: inline-block;
margin-left: 5px;
cursor: help;
color: #667eea;
font-weight: bold;
}

.tooltip-content {
display: none;
position: absolute;
background: #333;
color: white;
padding: 10px;
border-radius: 8px;
font-size: 0.9em;
z-index: 1000;
max-width: 250px;
}

.tooltip:hover .tooltip-content {
display: block;
}

.advanced-options {
margin-top: 25px;
padding-top: 25px;
border-top: 2px dashed #e0e0e0;
}

.toggle-advanced {
background: #667eea;
color: white;
border: none;
padding: 10px 20px;
border-radius: 25px;
cursor: pointer;
font-size: 0.95em;
transition: all 0.3s ease;
}

.toggle-advanced:hover {
background: #764ba2;
transform: translateY(-2px);
}

.calculate-btn {
width: 100%;
padding: 15px;
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
border: none;
border-radius: 10px;
font-size: 1.1em;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 20px;
}

.calculate-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}

.result-card {
background: white;
padding: 20px;
border-radius: 10px;
margin-bottom: 15px;
border: 1px solid #e0e0e0;
transition: all 0.3s ease;
}

.result-card:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.result-title {
font-size: 0.9em;
color: #666;
margin-bottom: 5px;
}

.result-value {
font-size: 1.8em;
font-weight: bold;
color: #667eea;
}

.chart-container {
margin-top: 20px;
height: 300px;
background: white;
border-radius: 10px;
padding: 20px;
}

.insights-section {
background: #f0f4ff;
padding: 20px;
border-radius: 10px;
margin-top: 20px;
border-left: 4px solid #667eea;
}

.insights-title {
font-size: 1.2em;
color: #333;
margin-bottom: 10px;
display: flex;
align-items: center;
}

.insights-title::before {
content: “💡”;
margin-right: 10px;
font-size: 1.3em;
}

.insight-item {
margin: 10px 0;
padding-left: 20px;
position: relative;
}

.insight-item::before {
content: “→”;
position: absolute;
left: 0;
color: #667eea;
}

.scenario-builder {
margin-top: 30px;
padding: 20px;
background: #fff;
border-radius: 10px;
border: 2px solid #667eea;
}

.scenario-title {
font-size: 1.3em;
margin-bottom: 15px;
color: #333;
}

.scenario-controls {
display: flex;
gap: 10px;
margin-bottom: 15px;
}

.export-buttons {
display: flex;
gap: 10px;
margin-top: 20px;
}

.export-btn {
flex: 1;
padding: 10px;
border: 2px solid #667eea;
background: white;
color: #667eea;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
}

.export-btn:hover {
background: #667eea;
color: white;
}

.progress-bar {
width: 100%;
height: 10px;
background: #e0e0e0;
border-radius: 5px;
overflow: hidden;
margin-top: 10px;
}

.progress-fill {
height: 100%;
background: linear-gradient(45deg, #667eea, #764ba2);
width: 0%;
transition: width 1s ease;
}

.comparison-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}

.comparison-table th,
.comparison-table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #e0e0e0;
}

.comparison-table th {
background: #f8f9fa;
font-weight: 600;
color: #333;
}

.live-preview {
position: fixed;
bottom: 20px;
right: 20px;
background: white;
padding: 15px;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
min-width: 200px;
display: none;
}

.ai-suggestion {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 15px;
border-radius: 10px;
margin-top: 20px;
animation: pulse 2s infinite;
}

@keyframes pulse {
0% { opacity: 0.9; }
50% { opacity: 1; }
100% { opacity: 0.9; }
}

// Ultra Smart Calculator Functions
let scenarios = [];
let currentCalculation = {};

function toggleAdvanced() {
const advancedOptions = document.getElementById(‘advancedOptions’);
advancedOptions.style.display = advancedOptions.style.display === ‘none’ ? ‘block’ : ‘none’;
}

function calculateUltraCommission() {
// Get input values
const productPrice = parseFloat(document.getElementById(‘productPrice’).value) || 0;
const commissionRate = parseFloat(document.getElementById(‘commissionRate’).value) / 100 || 0;
const numSales = parseInt(document.getElementById(‘numSales’).value) || 0;
const structure = document.getElementById(‘commissionStructure’).value;
const recurring = document.getElementById(‘recurring’).value;
const recurringDuration = parseInt(document.getElementById(‘recurringDuration’).value) || 12;
const taxRate = parseFloat(document.getElementById(‘taxRate’).value) / 100 || 0;
const bonusThreshold = parseFloat(document.getElementById(‘bonusThreshold’).value) || 0;
const bonusRate = parseFloat(document.getElementById(‘bonusRate’).value) / 100 || 0;
const currency = document.getElementById(‘currency’).value;

// Validate inputs
if (productPrice <= 0 || numSales 50) {
totalCommission += (numSales – 50) * productPrice * 0.02; // Extra 2% for sales over 50
}
if (numSales > 100) {
totalCommission += (numSales – 100) * productPrice * 0.03; // Extra 3% for sales over 100
}
} else if (structure === ‘performance’) {
// Performance-based calculation
const totalRevenue = productPrice * numSales;
if (totalRevenue > bonusThreshold) {
totalCommission += (totalRevenue – bonusThreshold) * bonusRate;
}
} else if (structure === ‘hybrid’) {
// Hybrid model
totalCommission = baseCommission + (numSales * 5); // $5 bonus per sale
}

// Add recurring commission
let recurringTotal = 0;
if (recurring !== ‘none’) {
const recurringMultiplier = {
‘monthly’: recurringDuration,
‘quarterly’: recurringDuration / 3,
‘annual’: recurringDuration / 12
}[recurring] || 0;

recurringTotal = baseCommission * recurringMultiplier * 0.5; // 50% recurring rate
totalCommission += recurringTotal;
}

// Calculate tax
const taxAmount = totalCommission * taxRate;
const afterTax = totalCommission – taxAmount;

// Calculate additional metrics
const perSaleCommission = totalCommission / numSales;
const monthlyAverage = totalCommission / 12;
const annualProjection = monthlyAverage * 12;

// Update results
updateResults({
totalCommission,
afterTax,
perSaleCommission,
annualProjection,
taxAmount,
recurringTotal,
currency
});

// Show insights
generateInsights({
productPrice,
commissionRate,
numSales,
totalCommission,
structure
});

// Update progress bar
animateProgressBar(commissionRate * 100);

// Show AI suggestion
showAISuggestion(totalCommission, numSales, commissionRate);

// Store current calculation
currentCalculation = {
productPrice,
commissionRate,
numSales,
totalCommission,
structure
};

// Show scenario builder
document.getElementById(‘scenarioBuilder’).style.display = ‘block’;

// Show chart
updateChart();
}

function updateResults(data) {
const currencySymbol = getCurrencySymbol(data.currency);

document.getElementById(‘totalCommission’).textContent = `${currencySymbol}${data.totalCommission.toFixed(2)}`;
document.getElementById(‘afterTax’).textContent = `${currencySymbol}${data.afterTax.toFixed(2)}`;
document.getElementById(‘perSale’).textContent = `${currencySymbol}${data.perSaleCommission.toFixed(2)}`;
document.getElementById(‘annualProjection’).textContent = `${currencySymbol}${data.annualProjection.toFixed(2)}`;

// Animate the results
const resultCards = document.querySelectorAll(‘.result-card’);
resultCards.forEach((card, index) => {
card.style.animation = ‘none’;
setTimeout(() => {
card.style.animation = `slideIn 0.5s ease-out ${index * 0.1}s`;
}, 10);
});
}

function getCurrencySymbol(currency) {
const symbols = {
‘USD’: ‘$’,
‘EUR’: ‘€’,
‘GBP’: ‘£’,
‘JPY’: ‘¥’,
‘CAD’: ‘C$’,
‘AUD’: ‘A$’
};
return symbols[currency] || ‘$’;
}

function generateInsights(data) {
const insightsSection = document.getElementById(‘insightsSection’);
const insightsContent = document.getElementById(‘insightsContent’);

const insights = [];

// Commission rate insights
if (data.commissionRate 0.20) {
insights.push(‘Excellent commission rate! You’re earning above industry standards.’);
}

// Sales volume insights
if (data.numSales 50) {
insights.push(‘Great sales volume! Consider asking for volume-based bonuses.’);
}

// Revenue insights
const avgDealSize = data.productPrice;
if (avgDealSize 1000) {
insights.push(‘High-value sales! Focus on relationship building for repeat business.’);
}

// Structure recommendations
if (data.structure === ‘flat’ && data.numSales > 30) {
insights.push(‘With your sales volume, a tiered structure could earn you more.’);
}

// Display insights
insightsContent.innerHTML = insights.map(insight =>
`

`
).join(”);

insightsSection.style.display = ‘block’;
}

function animateProgressBar(percentage) {
const progressBar = document.getElementById(‘progressBar’);
setTimeout(() => {
progressBar.style.width = `${Math.min(percentage, 100)}%`;
}, 100);
}

function showAISuggestion(totalCommission, numSales, rate) {
const suggestionDiv = document.getElementById(‘aiSuggestion’);
const suggestionText = document.getElementById(‘aiSuggestionText’);

let suggestion = ”;

if (totalCommission < 1000) {
suggestion = `To reach $1,000 in commissions, you need ${Math.ceil((1000 – totalCommission) / (totalCommission / numSales))} more sales at current rates.`;
} else if (rate `

Scenario ${index + 1} ${scenario.numSales} ${(scenario.commissionRate * 100).toFixed(1)}% $${scenario.totalCommission.toFixed(2)} ${((scenario.totalCommission / (scenario.productPrice * scenario.numSales)) * 100).toFixed(1)}%

`).join(”);
}

function clearScenarios() {
scenarios = [];
updateScenarioTable();
}

function exportPDF() {
alert(‘PDF export feature – Your commission report would be generated as a professional PDF document!’);
}

function exportExcel() {
alert(‘Excel export feature – Your data would be exported to a detailed spreadsheet!’);
}

function shareResults() {
const shareData = {
title: ‘Commission Calculation Results’,
text: `Total Commission: ${document.getElementById(‘totalCommission’).textContent}`,
url: window.location.href
};

if (navigator.share) {
navigator.share(shareData);
} else {
alert(‘Share feature – Your results would be shared via email or social media!’);
}
}

function updateChart() {
const chartContainer = document.getElementById(‘chartContainer’);
chartContainer.style.display = ‘block’;
// In a real implementation, you would use Chart.js or similar library here
chartContainer.innerHTML = ‘

📊 Commission Growth Chart
Visual analytics would appear here

‘;
}

// Live preview on input
document.querySelectorAll(‘input’).forEach(input => {
input.addEventListener(‘input’, function() {
const price = parseFloat(document.getElementById(‘productPrice’).value) || 0;
const rate = parseFloat(document.getElementById(‘commissionRate’).value) / 100 || 0;
const sales = parseInt(document.getElementById(‘numSales’).value) || 0;

if (price > 0 && rate > 0 && sales > 0) {
const preview = price * rate * sales;
const livePreview = document.getElementById(‘livePreview’);
const liveContent = document.getElementById(‘livePreviewContent’);

liveContent.innerHTML = `

Estimated: $${preview.toFixed(2)}

`;
livePreview.style.display = ‘block’;
}
});
});

// Auto-save functionality
function autoSave() {
const formData = {
productPrice: document.getElementById(‘productPrice’).value,
commissionRate: document.getElementById(‘commissionRate’).value,
numSales: document.getElementById(‘numSales’).value,
structure: document.getElementById(‘commissionStructure’).value,
currency: document.getElementById(‘currency’).value
};

localStorage.setItem(‘commissionCalculatorData’, JSON.stringify(formData));
}

// Load saved data on page load
window.addEventListener(‘load’, function() {
const savedData = localStorage.getItem(‘commissionCalculatorData’);
if (savedData) {
const data = JSON.parse(savedData);
document.getElementById(‘productPrice’).value = data.productPrice || ”;
document.getElementById(‘commissionRate’).value = data.commissionRate || ”;
document.getElementById(‘numSales’).value = data.numSales || ”;
document.getElementById(‘commissionStructure’).value = data.structure || ‘flat’;
document.getElementById(‘currency’).value = data.currency || ‘USD’;
}
});

// Auto-save on input change
document.querySelectorAll(‘input, select’).forEach(element => {
element.addEventListener(‘change’, autoSave);
});

// Keyboard shortcuts
document.addEventListener(‘keydown’, function(e) {
if (e.ctrlKey && e.key === ‘Enter’) {
calculateUltraCommission();
}
});