/* EPG Schedule Main Container */
#epg-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    border: 1px solid #e0e0e0;
    max-width: 800px;
    margin: 2em auto;
    background-color: #fff;
    border-radius: 4px;
    overflow: hidden;
}

/* Tab Navigation Styling */
.epg-tabs {
    display: flex;
    flex-wrap: wrap; /* Allows tabs to wrap on desktop */
    background-color: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    padding: 5px;
}

.epg-tab-link {
    padding: 10px 15px;
    cursor: pointer;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    font-size: 14px;
    font-weight: bold;
    color: #555;
    transition: all 0.2s ease-in-out;
    margin: 5px;
    border-radius: 4px;
    white-space: nowrap; /* Prevent button text from wrapping */
}

.epg-tab-link:hover {
    background-color: #e9e9e9;
    border-color: #ccc;
}

.epg-tab-link.active {
    color: #fff;
    background-color: #d9534f;
    border-color: #d9534f;
}

/* Program Row Styling */
.epg-program-row { display: flex; border-bottom: 1px solid #f0f0f0; transition: background-color 0.2s; }
.epg-program-row:last-child { border-bottom: none; }
.epg-program-row.epg-playable { cursor: pointer; }
.epg-program-row.epg-playable:hover { background-color: #f0f8ff; }

.epg-time-col {
    flex: 0 0 120px;
    padding: 15px;
    font-weight: bold;
    color: #333;
    background-color: #fafafa;
    border-right: 1px solid #f0f0f0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.epg-details-col { flex-grow: 1; padding: 15px; }
.epg-title-wrapper { display: flex; align-items: center; margin-bottom: 4px; }
.epg-title { font-weight: bold; font-size: 1.1em; color: #222; }
.epg-aired-label { background-color: #6c757d; color: #fff; padding: 2px 8px; font-size: 11px; border-radius: 4px; font-weight: bold; text-transform: uppercase; margin-left: 10px; }

/* Status Styles */
.epg-program-row.past .epg-title,
.epg-program-row.past .epg-time-col { color: #aaa; }
.epg-program-row.current { background-color: #fff5f5; border-left: 5px solid #d9534f; }
.epg-program-row.current .epg-time-col { font-size: 1.1em; color: #d9534f; }

.epg-now-playing-indicator { margin-top: 10px; }
.epg-now-playing-label { background-color: #d9534f; color: #fff; padding: 3px 8px; font-size: 12px; border-radius: 4px; font-weight: bold; }
.epg-progress-bar { background-color: #e9ecef; border-radius: 4px; height: 8px; margin-top: 8px; width: 100%; overflow: hidden; }
.epg-progress-bar-inner { background-color: #d9534f; height: 100%; width: 0%; border-radius: 4px; transition: width 0.5s linear; }


/* --- NEW: Mobile Responsive Styles --- */
@media (max-width: 768px) {
    .epg-tabs {
        flex-wrap: nowrap; /* Prevent wrapping into multiple lines */
        overflow-x: auto;  /* Enable horizontal scrolling */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Hide the ugly scrollbar on browsers that support it */
    .epg-tabs::-webkit-scrollbar {
        display: none; /* For Chrome, Safari, and Opera */
    }
    .epg-tabs {
        -ms-overflow-style: none;  /* For Internet Explorer and Edge */
        scrollbar-width: none;  /* For Firefox */
    }

    .epg-tab-link {
        flex-shrink: 0; /* Prevent buttons from shrinking */
    }

    .epg-time-col {
        flex: 0 0 90px; /* Make the time column a bit smaller on mobile */
        font-size: 0.9em;
    }
}