/* Additional custom styles beyond Bootstrap */
:root {
    --windrush-blue: #1E3A8A;
    --windrush-gold: #C4A747;
    --windrush-white: #F8FAFC;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

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

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

::-webkit-scrollbar-thumb {
    background: var(--windrush-gold);
    border-radius: 10px;
}

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

/* Print styles */
@media print {
    .dashboard-header, .btn-logout, .date-filter {
        display: none;
    }
    
    .chart-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* Loading animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.loading {
    animation: pulse 1.5s ease-in-out infinite;
}


/* Chart container improvements */
.chart-container canvas {
    max-height: 350px;
    width: 100% !important;
}

/* Better tooltip styling */
.chartjs-tooltip {
    background: rgba(0, 0, 0, 0.8) !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
}

/* Legend improvements */
.chartjs-legend ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.chartjs-legend li {
    font-size: 12px;
}