/* Responsive Styles and Media Queries */

/* Desktop Layout - Fixed Grid Layouts */
/* Buttons grid should always maintain consistent column count:
   - .buttons (basic): always 4 columns
   - .scientific-btns: always 5 columns
   These are set in buttons.css and should NOT change based on screen width */

/* Mobile Adaptation */
@media (max-width: 599px) {
    .calculator-container {
        border-radius: 0;
        max-width: 100%;
    }

    .mode-btn {
        min-width: 80px;
        font-size: 12px;
        padding: 8px 12px;
    }

    .display {
        padding: 20px;
        min-height: 100px;
    }

    .result {
        font-size: 28px;
    }

    .btn {
        min-height: 50px;
        font-size: 16px;
    }

    .btn-function {
        font-size: 13px;
    }

    .scientific-btns {
        margin-bottom: 5px;
    }

    #graph-canvas {
        height: 250px;
    }

    .graph-tabs {
        flex-wrap: wrap;
    }

    .tab-btn {
        font-size: 12px;
        padding: 6px 12px;
    }

    /* Toasts go to the bottom on phones — at the top they cover the mode row */
    .notification-container {
        top: auto;
        bottom: 16px;
        left: 12px;
        right: 12px;
        max-width: none;
        align-items: stretch;
    }

    /* Slide up from the bottom instead of in from the right (which overflowed) */
    .notification-container .notification {
        text-align: center;
        transform: translateY(20px);
    }

    .notification-container .notification.show {
        transform: translateY(0);
    }
}