style.css

.border-gradient {
    border: 1px solid transparent;
    background: linear-gradient(var(--bg-color, hsl(var(--ds-background-100-value))), var(--bg-color, hsl(var(--ds-background-100-value)))) padding-box,
                linear-gradient(to right, hsl(var(--ds-blue-700-value)), hsl(var(--ds-purple-700-value))) border-box;
    border-radius: 0.5rem;
}

.dark-theme {
    --bg-color: hsl(var(--ds-gray-1000-value));
    background-color: hsl(var(--ds-gray-900-value));
    color: hsl(var(--ds-gray-100-value));
}

.dark-theme .border-gradient {
    background: linear-gradient(hsl(var(--ds-gray-1000-value)), hsl(var(--ds-gray-1000-value))) padding-box,
                linear-gradient(to right, hsl(var(--ds-blue-700-value)), hsl(var(--ds-purple-700-value))) border-box;
}

.dark-theme .card-header {
    background-color: hsl(var(--ds-gray-1000-value));
    color: hsl(var(--ds-gray-100-value));
}

.dark-theme table {
    color: hsl(var(--ds-gray-100-value));
}

.dark-theme table th {
    color: hsl(var(--ds-gray-500-value));
}

.dark-theme table td {
    border-color: hsl(var(--ds-gray-800-value));
}
.dark-theme .hover-scale:hover {
    background-color: hsl(var(--ds-gray-1000-value));
}
/* KPI Table Styles */
.kpi-table {
    width: 100%;
    border-collapse: collapse;
}

.kpi-table th {
    text-align: left;
    padding: 0.75rem;
    border-bottom: 1px solid hsl(var(--ds-gray-300-value));
    font-weight: 600;
    color: hsl(var(--ds-gray-700-value));
}

.kpi-table td {
    padding: 0.75rem;
    border-bottom: 1px solid hsl(var(--ds-gray-300-value));
}

.kpi-table tr:hover {
    background-color: hsl(var(--ds-gray-100-value));
}

.dark-theme .kpi-table th {
    color: hsl(var(--ds-gray-500-value));
    border-color: hsl(var(--ds-gray-800-value));
}

.dark-theme .kpi-table td {
    border-color: hsl(var(--ds-gray-800-value));
}

.dark-theme .kpi-table tr:hover {
    background-color: hsl(var(--ds-gray-1000-value));
}
/* Badge Styles */
.badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-blue {
    background-color: hsl(var(--ds-blue-100-value));
    color: hsl(var(--ds-blue-900-value));
}

.badge-green {
    background-color: hsl(var(--ds-green-100-value));
    color: hsl(var(--ds-green-900-value));
}

.badge-yellow {
    background-color: hsl(var(--ds-amber-100-value));
    color: hsl(var(--ds-amber-900-value));
}

.badge-orange {
    background-color: hsl(var(--ds-amber-200-value));
    color: hsl(var(--ds-amber-900-value));
}

.badge-red {
    background-color: hsl(var(--ds-red-100-value));
    color: hsl(var(--ds-red-900-value));
}

.badge-purple {
    background-color: hsl(var(--ds-purple-100-value));
    color: hsl(var(--ds-purple-900-value));
}

.badge-gray {
    background-color: hsl(var(--ds-gray-100-value));
    color: hsl(var(--ds-gray-700-value));
}

.badge-emerald {
    background-color: hsl(var(--ds-teal-100-value));
    color: hsl(var(--ds-teal-900-value));
}

.badge-amber {
    background-color: hsl(var(--ds-amber-100-value));
    color: hsl(var(--ds-amber-900-value));
}

.badge-rose {
    background-color: hsl(var(--ds-pink-100-value));
    color: hsl(var(--ds-pink-900-value));
}
.glass-effect {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hover-scale {
    transition: transform 0.2s ease-in-out;
}

.hover-scale:hover {
    transform: scale(1.02);
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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