/*
 * Styles for the course list page.
 */

#course-list-container {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
}

.course-item {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding: var(--course-item-padding);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--article-background-color);
}

.course-item-details {
    flex-grow: 1;
    flex-shrink: 1;
    padding-right: var(--course-item-padding);
}

.course-item-details h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.course-item-details .course-description {
    color: var(--secondary-text-color);
    margin-bottom: 0;
}

/* Add specific styling for lists inside the description */
.course-item-details .course-description ul {
    padding-left: 1.2rem; /* Indent the list */
    margin-top: 0.5rem;
}

.course-item-actions {
    flex-shrink: 0;
    flex-grow: 0;
    width: var(--course-item-actions-width);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-left: 1px solid var(--border-color);
    padding-left: var(--course-item-padding);
}

.course-item-actions .expiry-date {
    font-size: 0.9rem;
    color: var(--secondary-text-color);
}

.course-item-actions .expiry-date strong {
    display: block;
    font-size: 1rem;
    /* color: var(--pico-color); */
    margin-bottom: 0.25rem;
}

.course-item-actions .course-status {
    font-size: 0.9rem;
    color: var(--secondary-text-color);
    font-style: italic;
}

@media (max-width: 800px) {
    .course-item {
        flex-direction: column;  /* stack details and actions vertically */
    }
    .course-item-details {
        padding-right: 0;
        padding-bottom: var(--course-item-padding);
    }

    .course-item-actions {
        width: auto;
        border-left: none;
        border-top: 1px solid var(--border-color);
        padding-left: 0;
        padding-top: var(--course-item-padding);
    }
}

.status-loader {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    animation: spin 1s linear infinite; /* Reuses the @keyframes from loader.css */
}

/* --- Tooltip Styles --- */
.has-tooltip {
    position: relative;
    cursor: help; /* Provides a visual cue that more info is available */
}