/* ==========================================================================
   Class Timetable — page-specific styles.

   The design system (buttons, cards, skeletons, .table-container and all the
   .tt-* timetable rules) lives in /css/main.css. Only what's unique to this
   page — or an intentional override of it — belongs here.
   ========================================================================== */

/* Static chips: no row-detection JS runs on the info chips, so they keep a
   uniform radius instead of the pill edges the button groups get. */
.course-info {
    gap: 8px;
}

.info-item {
    border-radius: 10px;
}

/* Fallback width until updateProgress() measures the semester. */
.progress {
    width: 0%;
}

.timetable-buttons-wrapper,
.course-buttons-container {
    margin-bottom: 20px;
}

/* --- Lecturer view (EIS live timetable in an iframe) ------------------
   Not proxied like the class timetables: an <iframe> isn't subject to CORS,
   so this embeds eis.epoka.edu.al directly. */
#lecturer-container.visible {
    height: 600px;
}

#lecturer-iframe {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 600px;
    border: 0;
}

/* --- Category switcher ----------------------------------------------- */
.category-content {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.category-content.active {
    display: block;
    opacity: 1;
    animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Spinner shown inside a category while its entries are still loading. */
.category-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100px;
    color: var(--primary-color);
    opacity: 0.5;
}

/* Shown when a category has no entries yet. */
.category-empty {
    width: 100%;
    padding: 24px 12px;
    text-align: center;
    font-size: 0.9em;
    opacity: 0.6;
}

@media (max-width: 768px) {

    /* Edge fades for the horizontally scrolling strips. The classes are set
       by initializeScrollFaders() in /js/site-common.js. */
    .is-scrollable {
        -webkit-mask-image: linear-gradient(to right, transparent, black 20px, black 95%, transparent);
        mask-image: linear-gradient(to right, transparent, black 20px, black 95%, transparent);
    }

    .is-scrollable.at-start {
        -webkit-mask-image: linear-gradient(to right, black 95%, transparent);
        mask-image: linear-gradient(to right, black 95%, transparent);
    }

    .is-scrollable.at-end {
        -webkit-mask-image: linear-gradient(to right, transparent, black 20px, black 100%);
        mask-image: linear-gradient(to right, transparent, black 20px, black 100%);
    }

    .course-buttons-container,
    .skeleton-info-grid,
    .skeleton-actions {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 5px 10px 15px 10px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .course-buttons-container::-webkit-scrollbar,
    .skeleton-info-grid::-webkit-scrollbar,
    .skeleton-actions::-webkit-scrollbar {
        display: none;
    }
}

/* --- Dark mode ---------------------------------------------------------
   data-theme is the explicit user choice; the media query is auto mode, and
   is scoped with :not([data-theme="light"]) so an explicit light choice wins
   on a dark system. */
html[data-theme="dark"] button {
    border-color: rgba(255, 255, 255, 0.15);
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) button {
        border-color: rgba(255, 255, 255, 0.15);
    }
}