/* Container for the stall layout and hall details (side by side on large screens) */
#layoutContainer {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

/* Grid for stalls */
#auditorium {
    display: grid;
    grid-template-columns: repeat(11, 50px); /* 11 columns by default */
    gap: 10px;
    margin-right: 20px; /* Space between layout and hall details */
}

/* Stalls: size and style */
.stall {
    width: 50px;
    height: 50px;
    border: 2px solid #000;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
}

/* Available and booked stall colors */
.stall.available {
    background-color: green;
}

.stall.booked {
    background-color: red;
}

.stall.selected {
    background-color: yellow;
    border: 2px solid blue;
}

/* Container for hall image and name */
#hallDetailsContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#hallImage {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    margin-top: 10px;
}

/* MEDIA QUERIES for Responsive Design */

/* For mobile and smaller screens */
@media (max-width: 768px) {
    #layoutContainer {
        flex-direction: column; /* Stack elements vertically on small screens */
        align-items: center;
    }

    /* Reduce the number of columns on smaller screens */
    #auditorium {
        grid-template-columns: repeat(5, 40px); /* 5 columns on mobile */
        gap: 8px; /* Reduce the gap */
    }

    /* Adjust stall size for mobile */
    .stall {
        width: 40px;
        height: 40px;
        line-height: 40px;
    }

    /* Hall image and name adjustments */
    #hallImage {
        width: 100%; /* Make the image responsive */
        max-width: 300px; /* Limit max width on smaller screens */
        height: auto; /* Maintain aspect ratio */
    }
}

/* For very small screens (e.g., phones in portrait mode) */
@media (max-width: 480px) {
    #auditorium {
        grid-template-columns: repeat(3, 30px); /* 3 columns on very small screens */
        gap: 6px; /* Further reduce the gap */
    }

    /* Stall size for very small screens */
    .stall {
        width: 30px;
        height: 30px;
        line-height: 30px;
    }

    /* Further adjustments to hall image */
    #hallImage {
        max-width: 200px; /* Smaller hall image for very small screens */
    }
}