/* Base font size for smaller devices is in base.css (14px) */

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    body {
        font-size: 16px; /* Increase base font size */
    }

    header {
        padding: 1.5rem 20px;
    }
    #header-logo {
        margin-right: 20px;
        width: 100px;
        height: 100px;
    }
    header h1 {
        font-size: 2.8rem;
    }
    header p {
        margin-left: 20px;
    }

    main {
        margin: 20px auto;
        padding: 0 20px;
        grid-template-columns: repeat(2, 1fr); /* 2-column layout for main content */
        gap: 20px;
    }
    #menu-section {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    #cart-section {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
    #payment-section {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }
    #inventory-management-section { /* Admin button section */
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    #order-submission {
        grid-column: 1 / -1; /* Span both columns */
        grid-row: 3 / 4;
        text-align: center;
    }

    h2 {
        font-size: 1.75rem;
    }
}

/* Small devices (landscape phones, 480px and up) */
@media (min-width: 480px) {
    header {
        flex-direction: row; /* Logo and text side-by-side */
        padding: 1rem 15px;
    }
    #header-logo {
        margin-right: 15px;
        margin-bottom: 0;
        width: 80px;
        height: 80px;
    }
    header h1 {
        font-size: 2.3rem;
    }
    header p {
        margin-left: 15px;
        margin-top: 0;
        text-align: left;
    }
}


/* Responsive adjustments for cart items on very small screens */
@media (max-width: 360px) {
    .cart-item-name {
        width: 100%; /* Name takes full width */
        margin-bottom: 5px;
    }
    .cart-item-price { /* Price might have been next to name */
        margin-left: 0; /* Align with name if wrapped */
    }
    .cart-item-actions {
        width: 100%; /* Actions take full width */
        justify-content: flex-end; /* Align buttons to the right */
        margin-left: 0;
        margin-top: 5px;
    }
}

/* Responsive adjustments for payment info items */
@media (min-width: 400px) {
    .payment-info-item .payment-info-label {
        margin-bottom: 0; /* Remove bottom margin when there's enough space */
    }
}

/* Responsive adjustments for admin modal inventory items */
@media (min-width: 420px) {
    #inventory-items-container-modal .inventory-item-row {
        flex-direction: row; /* Item name and stock input side-by-side */
        justify-content: space-between;
        align-items: center;
    }
    #inventory-items-container-modal .inventory-item-row .item-name-modal { /* Item name */
        margin-bottom: 0;
        margin-right: 10px;
    }
    #inventory-items-container-modal .inventory-item-row .item-controls-modal {
        flex-direction: row; /* Inputs side-by-side on larger screens */
        width: auto; /* Adjust width as it's no longer full-width */
        gap: 15px; /* Space between stock and price labels/inputs */
    }
    #inventory-items-container-modal .inventory-item-row label.stock-label,
    #inventory-items-container-modal .inventory-item-row label.price-label {
        width: auto;
    }

    /* Admin modal action buttons (stock and payments tab) */
    .inventory-modal-actions,
    #admin-tab-content-payments .received-payments-actions { /* Apply to payments actions specifically when in row */
        flex-direction: row;
        justify-content: flex-end; /* Align buttons to the right */
        gap: 0; /* Remove column gap, use margin for spacing */
    }
    .inventory-modal-actions button,
    #admin-tab-content-payments .received-payments-actions button {
        width: auto; /* Buttons no longer full width */
    }
    .inventory-modal-actions button#save-inventory-button { /* Specific margin for save button */
        margin-left: 10px;
    }
    
    #admin-tab-content-inventory .inventory-modal-actions {
        flex-direction: row;
        justify-content: flex-end;
        gap: 0;
    }
    #admin-tab-content-inventory .inventory-modal-actions button {
        width: auto;
    }
    #admin-tab-content-inventory .inventory-modal-actions button#save-inventory-button {
        margin-left: 10px;
    }
}