/* Custom CSS for wider tables */

/* Make tables wider and allow horizontal scrolling on mobile */
table {
    width: 100% !important;
    max-width: none !important;
    table-layout: auto !important;
    font-size: 0.9em;
}

/* Specific styling for schedule tables */
table th, table td {
    padding: 8px 15px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 50px;
}

table thead tr {
    height: 60px !important;
}

table tr {
    height: 150px;
}

/* Week column */
table td:nth-child(0) {
    vertical-align: middle !important;
    font-weight: bold;
}

/* Allow wrapping for longer content columns */
table td:nth-child(1),
table td:nth-child(3),
table td:nth-child(5)
{
    white-space: normal !important;
    min-width: 120px;
    max-width: 300px;
    word-wrap: break-word;
}

/* Allow wrapping for longer content columns */
table td:nth-child(2),
table td:nth-child(4)
{
    white-space: normal !important;
    min-width: 60px;
    max-width: 80px;
    word-wrap: break-word;
}

/* Make the overall content area wider for tables */
.content {
    max-width: 1200px !important;
}

/* Horizontal scroll for very wide tables on mobile */
.table-wrapper {
    overflow-x: auto;
    margin: 1em 0;
}

/* Better responsive behavior */
@media (max-width: 768px) {
    table {
        font-size: 0.8em;
    }
    
    table th, table td {
        padding: 6px 8px !important;
        min-width: 80px;
    }
    
    /* Allow wrapping for longer content columns */
    table td:nth-child(1),
    table td:nth-child(3),
    table td:nth-child(5)
    {
        min-width: 120px;
        max-width: 200px;
    }

    /* Allow wrapping for longer content columns */
    table td:nth-child(2),
    table td:nth-child(4)
    {
        min-width: 50px;
        max-width: 70px;
    }
}

.schedule-table table td {
    vertical-align: top;
}