/* responsive.css */

/* Global overflow lock to prevent accidental horizontal body scrolling */
html, body {
    overflow-x: hidden;
    width: 100%;
}

/* ==========================================================================
   Mobile Devices (up to 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* Optimize Glass Panels for smaller screens to maximize usable space */
    .glass-panel {
        padding: 1.25rem !important;
        border-radius: 0.75rem;
    }

    /* STAT CARDS: Scale down typography and 3D icons */
    .stat-card {
        padding: 1rem !important;
        height: auto;
        min-height: 7rem;
    }
    
    .stat-card img {
        max-width: 42px;
        max-height: 42px;
    }
    
    .stat-card .text-4xl {
        font-size: 2rem !important;
        line-height: 1.1;
    }
    
    .stat-card .text-3xl {
        font-size: 1.5rem !important;
    }

    /* Top Header Adjustments */
    header .flex.items-center.gap-3 {
        flex-direction: column;
        width: 100%;
        margin-top: 10px;
    }

    .btn-primary-glass, .btn-glass {
        width: 100%;
        justify-content: center;
    }

    /* Make Action Buttons touch-friendly (larger tap targets) */
    td a.text-black.hover\:text-blue-800,
    td button.text-black.hover\:text-red-800 {
        padding: 0.5rem !important;
        font-size: 1.1rem; 
    }
}