/* =========================================
   1. GLOBAL SCROLLBAR STYLING
   (Makes the app look polished on Windows/Linux)
   ========================================= */

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

/* Track */
::-webkit-scrollbar-track {
    background: #f1f5f9; 
    border-radius: 4px;
}

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

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; 
}

/* Utility to hide scrollbar but keep functionality */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* =========================================
   2. ANIMATIONS
   ========================================= */

/* Fade In (Used for Modals) */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 0.2s ease-in-out;
}

/* Slide Up (Used for Dashboard Cards) */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply animation to cards automatically */
.dashboard-card {
    animation: slideUp 0.4s ease-out forwards;
}

/* Stagger animations for list items */
.list-group-item {
    animation: slideUp 0.3s ease-out forwards;
}

/* =========================================
   3. PRINT STYLES
   (Essential for generating Report Cards)
   ========================================= */

@media print {
    /* Hide non-essential elements */
    #sidebar, 
    #globalControls, 
    #fabContainer,
    .no-print,
    header button { 
        display: none !important; 
    }

    /* Reset background colors for printing */
    body {
        background-color: white;
        color: black;
    }

    /* Ensure charts print clearly */
    canvas {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    /* Cards should look like sections */
    .card {
        border: 1px solid #ddd;
        box-shadow: none;
        break-inside: avoid;
    }

    /* Expand containers */
    .max-w-4xl {
        max-width: 100% !important;
    }
}

/* =========================================
   4. CUSTOM UTILITIES
   ========================================= */

/* Trend Indicators (Used in JS Logic) */
.trend-up {
    color: #16a34a; /* Green-600 */
    font-weight: 600;
}

.trend-down {
    color: #dc2626; /* Red-600 */
    font-weight: 600;
}

.trend-stable {
    color: #4b5563; /* Gray-600 */
}

/* House Colors (Fallbacks) */
.text-house-blue { color: #2563eb; }
.text-house-green { color: #16a34a; }
.text-house-red { color: #dc2626; }
.text-house-yellow { color: #ca8a04; }

/* Loader Spinner Animation */
.fa-spin {
    animation: fa-spin 2s infinite linear;
}
@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}