style.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
    background-color: #f9fafb; /* gray-50 */
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* slate-300 */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; /* slate-400 */
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

/* Table Row Hover */
tbody tr {
    transition: background-color 0.15s ease-in-out;
}

/* Progress Bar Animation */
.progress-bar-fill {
    transition: width 1s ease-in-out;
}

/* Custom Badge Styles */
.badge-success {
    @apply bg-emerald-100 text-emerald-800 px-2 py-0.5 rounded text-xs font-medium;
}
.badge-warning {
    @apply bg-amber-100 text-amber-800 px-2 py-0.5 rounded text-xs font-medium;
}
.badge-critical {
    @apply bg-red-100 text-red-800 px-2 py-0.5 rounded text-xs font-medium;
}
.badge-info {
    @apply bg-blue-100 text-blue-800 px-2 py-0.5 rounded text-xs font-medium;
}

/* Shadow DOM Link Reset (for Components) */
:host {
    all: initial;
    font-family: 'Inter', sans-serif;
}