/* Responsive Breakpoints and Media Queries */

/* --- Mobile First: Base styles are mobile, then scale up --- */

/* Small devices (phones, 480px and up) */
@media (min-width: 480px) {
    /* Add responsive styles for small devices */
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    /* Add responsive styles for medium devices */
}

/* Large devices (desktops, 1024px and up) */
@media (min-width: 1024px) {
    /* Add responsive styles for large devices */
}

/* --- Mobile Breakpoints (max-width) --- */

/* Very small screens (300px and below) */
@media (max-width: 300px) {
    .modal-body {
        padding: 12px;
    }
    
    .modal-glass-card {
        max-width: calc(100vw - 24px);
        min-width: 240px;
        margin: 0;
        border-radius: 12px;
    }
}

/* Small screens (400px and below) */
@media (max-width: 400px) {
    .modal-body {
        padding: 15px;
    }
    
    .modal-glass-card {
        max-width: calc(100vw - 24px);
        min-width: 240px;
        margin: 0;
        border-radius: 16px;
    }
}

/* Medium screens (768px and below) */
@media (max-width: 768px) {
    .all-graphs-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Modal header buttons larger on mobile for easier tapping */
    .modal-header-btn,
    .close-modal {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
    }
    
    .modal-header-btn .material-icons-round,
    .modal-header-btn.close-modal .material-icons-round {
        font-size: 22px;
        width: 22px;
        height: 22px;
    }
}

/* Small devices (480px and below) */
@media (max-width: 480px) {
    /* Add responsive styles for small devices */
}