html.dashboard, body.dashboard {
    aspect-ratio: revert;
    max-width: 1440px;    
    max-height: none;
}

html {
    overflow-y: scroll !important;
}

.dashboard-main {
    display: flex;
    flex-direction: column;
    gap: calc(var(--margin-default) * 3);
    border: 1px solid var(--colour-border-panel);
    background-color: var(--colour-bg-panel-tertiary);
    border-radius: calc(var(--border-radius-default) * 2);
    padding: calc(var(--padding-default) * 2);
    text-align: start;
}

    .dashboard-main .sub-header {
        text-align: start;
        margin-bottom: calc(var(--margin-default) * 1);
    }

.sub-header-and-controls {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.reset-help {
    text-align: center;
    color: var(--colour-text-secondary);
    font-size: 1.2rem;    
    white-space: nowrap; /* Prevent the label and checkbox from wrapping one under the other */
    margin-left: auto; /* Push to the right */
}

.course-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: calc(var(--margin-default) * 1);
}

.course-panel {
    display: flex;
    flex-direction: column;
    gap: calc(var(--margin-default) * 1);
    padding: calc(var(--padding-default) * 1.5) calc(var(--padding-default) * 1.5);
    border: 1px solid var(--colour-border-panel);
    background-color: var(--colour-bg-panel-secondary);
    border-radius: calc(var(--border-radius-default) * 1);
    width: calc((100% - (3 * var(--margin-default))) / 4);
    transition: outline 0.75s ease; /* Add smooth transition */
}

    .course-panel * {
        color: var(--colour-text-secondary);
    }

    .course-panel.course-complete * {
        color: var(--colour-text-disabled);
    }

    .course-panel.course-complete input[type="checkbox"] {
        background-color: var(--colour-text-disabled);
        border: 1px solid var(--colour-text-disabled);
    }

        .course-panel.course-complete input[type="checkbox"]:checked::after {
            color: var(--colour-text-primary);
        }

    .course-panel.hovered {
        background-color: var(--colour-bg-panel-primary);
        outline: 1px solid var(--colour-brand-primary);
    }

.course-header {
    font-family: 'ClashDisplay-Regular';
    font-weight: bold;
    font-size: 1.2rem;
}

.see-more-button {
    cursor: pointer;
    border-radius: calc(var(--border-radius-default) * 0.5);
    padding: calc(var(--padding-default) / 4);
    background-color: var(--colour-bg-control-light);
    border: 0;
    color: var(--colour-text-primary);
    font-weight: bold;
    margin-top: auto;
    align-self: center;
    text-decoration: none;
    font-family: 'Satoshi-Light';
    font-size: 1rem;
    transition: transform 0.75s ease, background-color 0.1s ease, color 0.1s ease; /* Add smooth transition */
    width: calc(50% - var(--padding-default) / 4);
    text-align: center;
}

    .see-more-button:hover {
        background-color: var(--colour-brand-primary);
        color: var(--colour-text-primary);
        transform: scale(1.1); /* Slightly increase size */
    }

.choice-buttons {
    margin-top: auto;
    display: flex;
    flex-direction: row;    
    justify-content: space-between;
}

    .choice-buttons > .see-more-button:only-child {
        width: auto;
        min-width: 100%;
        max-width: none;
    }

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.org-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto; /* Push to the right */
}

    .org-info .org-name {
        font-family: 'ClashDisplay-Medium';
        color: var(--colour-text-secondary);
        font-size: 1.2rem;
    }

    .org-info .org-logo {
        height: 64px;        
    }

/* Add these new styles to the existing file */

.choice-buttons {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: calc(var(--margin-default) / 2);
}

.action-buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.history-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;    
    color: var(--colour-text-secondary);
    margin-bottom: calc(var(--margin-default) * 0.5);
}

.history-summary {
    font-style: italic;
    font-size: 0.85rem;
    color: var(--colour-text-secondary);
}

.history-link {
    text-decoration: none;
    cursor: pointer;
}

    .history-link:hover {
        text-decoration: none;
    }

.assessment-status {
    font-weight: bold;
}

    .assessment-status.passed {
        color: var(--colour-brand-primary);
    }

    .assessment-status.failed {
        color: var(--colour-text-error);
    }

/* Ensure buttons still work properly when there's only one */
.action-buttons > .see-more-button:only-child {
    width: 100%;
}

@media (max-width: 1300px) {
    .course-panel {
        width: calc((100% - (2 * var(--margin-default))) / 3);
    }
}

@media (max-width: 1024px) {
    .course-panel {
        width: calc((100% - (1 * var(--margin-default))) / 2);
    }
}

@media (max-width: 760px) {
    .course-panel {
        width: calc((100% - (1 * var(--margin-default))) / 1);
    }
}