body {
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
    font-size: 95%;
}
.main-grid {
    display: grid;
    grid-template-rows: auto repeat(8, auto);
    width: 100%;
    max-width: none;
    margin: auto;
    border-collapse: collapse;
    border: 1px solid #ddd;
    min-width: fit-content;
}
.sticky-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background: #f5f5f5;
    z-index: 10;
    text-align: center;
    font-weight: bold;
    border-bottom: 2px solid #ccc;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: grid;
    grid-template-columns: 350px repeat(7, 1fr); /* Keep your grid layout */
    height: 40px; /* Fixed height */
    min-height: 40px; /* Ensures minimum height */
    max-height: 40px; /* Prevents growing beyond this */
    overflow: hidden; /* Hides any content that overflows */
    align-items: center; /* Centers content vertically */
}

.header-item {
    flex: 1; /* Equal width distribution */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    height: 100%; /* Full height of parent */
    white-space: nowrap; /* Prevents text wrapping */
    overflow: hidden; /* Hides overflow text */
    text-overflow: ellipsis; /* Shows ... for overflow text */
    font-size: 14px; /* Fixed font size */
    min-width: 0; /* Allows flex items to shrink below content size */
}

.combined-header {
    /* If this has special styling, ensure it follows same principles */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.header-item-responsive:not(.combined-header) {
    font-size: 0; /* Hide the original text content */
}

.header-item-responsive:not(.combined-header)::after {
    font-size: 14px;
    content: attr(data-short); /* Shows the data-short attribute value */
    white-space: nowrap;
}

/* When there's more space, show long version */
@media (min-width: 1200px) {
    .header-item-responsive:not(.combined-header)::after {
        content: attr(data-medium); /* Shows the data-long attribute value */
        font-size: 14px; /* Fixed font size */

    }
}
@media (min-width: 1750px) {
    .header-item-responsive:not(.combined-header)::after {
        content: attr(data-long); /* Shows the data-long attribute value */
        font-size: 14px; /* Fixed font size */

    }
}
@media (max-width: 800px) {
    .header-item-responsive:not(.combined-header)::after {
        font-size: 12px; /* Fixed font size */

    }
}
.combined-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Space between the home button and city name */
}
.home-button {
    text-decoration: none;
    color: #0070f3;
    font-weight: bold;
}
.movie-row {
    display: grid;
    grid-template-columns: 150px auto;
    border-bottom: 1px solid #ddd;
}
.poster-cell {
    position: relative; /* Allow absolute positioning within this cell */
    display: flex;
    align-items: flex-start; /* Align poster to the top */
    justify-content: center;
    padding: 10px;
    background-color: #fafafa; /* Grey background for consistency */
    border-right: 1px solid #ddd;
    box-sizing: border-box; /* Include padding and border in the element's width and height */
}

.movie-poster {
    width: 100%;
    height: auto;
    position: sticky;
    top: 45px; /* Adjust this value based on the height of your sticky header */
    margin: 0; /* Remove any default margin */
    z-index: 2; /* Ensure it stays on top when scrolling */
}
.content-cell {
    display: grid;
    grid-template-columns: 200px repeat(7, 1fr);
    background-color: #fafafa; /* Grey background for consistency */
    box-sizing: border-box; /* Include padding and border in the element's width and height */
}
.movie-title {
    grid-column: span 8;
    background-color: #f5f5f5; /* Grey background for movie title */
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    box-sizing: border-box; /* Include padding and border in the element's width and height */
}
.movie-title-text {
    font-weight: bold;
    text-align: left;
    margin: 0; /* Remove any margin */
    padding: 10px 20px; /* Increased padding for text inside the title cell */
}
.cinema-info {
    display: flex;
    flex-direction: column;
    padding: 15px;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd; /* Ensure a border below each cinema for separation */
    background-color: #f5f5f5; /* Grey background for cinema name */
    box-sizing: border-box; /* Include padding and border in the element's width and height */
}
.day-cell {
    padding: 10px; /* Maintain padding for space within the cell */
    background-color: #ffffff; /* White background for screening cells */
    border: 1px solid #ddd; /* Ensure consistent border around each cell */
    text-align: center;
    vertical-align: top;
    box-sizing: border-box; /* Include padding and border in the element's width and height */
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: center; /* Center items horizontally */
    align-items: flex-start; /* Align items to the top */
    gap: 5px; /* Space between items */
    min-width: 80px;
}

.seance {
    margin: 0; /* Remove margin to keep items tightly packed */
    white-space: nowrap;
    flex: 1 1 45px; /* Flex-grow and shrink, with a base size to wrap properly */
    max-width: 100px; /* Optional: set a max-width to avoid too wide columns */
    text-align: center; /* Center align the text horizontally */
    height: 20px; /* Fixed height for each seance item */
    line-height: 20px; /* Center text vertically within the fixed height */
}
.seance a {
    color: #0070f3;
    text-decoration: none;
}

.main-grid, .content, .page {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
}

body {
    max-width: 100%;
}

.matcha-container {
    overflow-x: visible;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #1e1e1e; /* Dark theme background */
        color: #f5f5f5; /* Light text */
    }

    .sticky-header {
        background-color: #333333; /* Dark background for sticky header */
        border-bottom: 2px solid #555555; /* Darker border */
        color: #ffffff; /* Light text for header */
    }

    .header-item {
        background-color: #333333; /* Dark background for header items */
        border-right: 1px solid #555555; /* Darker border for header items */
        color: #ffffff; /* Light text for header items */
    }

    .poster-cell, .content-cell, .cinema-info, .day-cell, .movie-title {
        background-color: #2b2b2b; /* Dark background for content cells */
        color: #f5f5f5; /* Light text for dark mode */
        border: 1px solid #555555; /* Uniform dark border for all content cells */
    }

    .movie-title {
        background-color: #3a3a3a; /* Dark background for movie title */
    }

    .day-cell {
        background-color: #2b2b2b; /* Dark background for day cells */
        border: 1px solid #555555; /* Darker border for day cells */
    }

    .seance a {
        color: #1e90ff; /* Light blue for links in dark mode */
    }

    .main-grid {
        border: 1px solid #555555; /* Uniform dark border around the main grid */
    }

    .matcha-container {
        background-color: #1e1e1e; /* Dark background for the container */
        border: 1px solid #555555; /* Add a border to the container */
    }

    .movie-row {
        border-bottom: 1px solid #555555; /* Darker border at the bottom of movie rows */
    }
}