/* 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 12px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 120px;
}

/* Allow wrapping for longer content columns */
table td:nth-child(4), /* Topic column */
table td:nth-child(5)  /* Reading column */
{
    white-space: normal !important;
    min-width: 180px;
    max-width: 300px;
    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;
    }
    
    table td:nth-child(4), 
    table td:nth-child(5) {
        min-width: 120px;
        max-width: 200px;
    }
}