style.css

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

body {
    font-family: 'Inter', sans-serif;
}

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

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Chart container responsive behavior */
#chartContainer {
    min-height: 400px;
}

@media (max-width: 768px) {
    #chartContainer {
        height: 300px;
    }
}
/* Sticky table header */
.sticky-header thead th {
    position: sticky;
    top: 0;
    background-color: #f9fafb;
    z-index: 10;
}

/* Table row hover effect */
tbody tr {
    transition: background-color 0.2s ease;
}

tbody tr:hover {
    background-color: #f9fafb;
}

/* Status badges */
.status-badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
}

.status-critical {
    @apply bg-red-100 text-red-800;
}

.status-warning {
    @apply bg-yellow-100 text-yellow-800;
}

.status-normal {
    @apply bg-green-100 text-green-800;
}