:root {
            --primary-color: #4e73df;
            --success-color: #1cc88a;
            --info-color: #36b9cc;
            --warning-color: #f6c23e;
            --danger-color: #e74a3b;
            --secondary-color: #858796;
            --light-color: #f8f9fc;
            --dark-color: #5a5c69;
        }

        body {
            font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #f8f9fc;
        }

        .card {
            border: none;
            border-radius: 0.35rem;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
        }

        .card-header {
            background-color: #f8f9fc;
            border-bottom: 1px solid #e3e6f0;
            font-weight: 600;
            color: #4e73df;
        }

        .stat-card {
            border-left: 0.25rem solid;
            padding: 1rem;
        }

        .stat-card.primary {
            border-left-color: var(--primary-color);
        }

        .stat-card.success {
            border-left-color: var(--success-color);
        }

        .stat-card.info {
            border-left-color: var(--info-color);
        }

        .stat-card.warning {
            border-left-color: var(--warning-color);
        }

        .stat-card.danger {
            border-left-color: var(--danger-color);
        }

        .stat-card .stat-value {
            font-size: 1.5rem;
            font-weight: 700;
        }

        .stat-card .stat-label {
            font-size: 0.875rem;
            font-weight: 600;
            text-transform: uppercase;
        }

        .stat-card .stat-change {
            font-size: 0.75rem;
        }

        .table-responsive {
            overflow-x: auto;
        }

        .table {
            font-size: 0.85rem;
        }

        .table th {
            font-weight: 600;
            color: var(--dark-color);
            text-transform: uppercase;
            font-size: 0.7rem;
        }

        .chart-container {
            position: relative;
            height: 300px;
        }

        .badge {
            font-weight: 500;
            padding: 0.35em 0.65em;
            font-size: 75%;
        }

        .badge-neutral {
            background-color: #d1d3e2;
            color: #4e4e4e;
        }

        .badge-passive {
            background-color: #f8f4cc;
            color: #8a7d0a;
        }
        .badge-neutral {
    background-color: #6c757d;
    color: white;
}

.badge-passive {
    background-color: #ffc107;
    color: black;
}

.badge-high {
    background-color: #dc3545;
    color: white;
}

.badge-medium {
    background-color: #fd7e14;
    color: white;
}

.badge-low {
    background-color: #28a745;
    color: white;
}
    .badge-sentiment-positive { background-color: #28a745; }
    .badge-sentiment-negative { background-color: #dc3545; }
    .badge-sentiment-neutral { background-color: #6c757d; }
    .badge-nps-promoter { background-color: #28a745; }
    .badge-nps-passive { background-color: #ffc107; color: #212529; }
    .badge-nps-detractor { background-color: #dc3545; }
    .badge-risk-high { background-color: #dc3545; }
    .badge-risk-medium { background-color: #fd7e14; }
    .badge-risk-low { background-color: #28a745; }


    /* Preloader styles */
    #preloader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: white;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        transition: opacity 0.5s ease;
    }

    .spinner {
        width: 70px;
        height: 70px;
        border: 8px solid #f3f3f3;
        border-top: 8px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* Chart container optimizations */
    .chart-container {
        position: relative;
        height: 300px;
        min-height: 300px;
    }

    /* Hide content initially */
    .dashboard-content {
        display: none;
    }


    /* Preloader styles */
    .preloader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }

    .spinner {
        width: 50px;
        height: 50px;
        border: 5px solid #f3f3f3;
        border-top: 5px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .chart-preloader {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.7);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10;
    }

    .chart-container {
        position: relative;
    }