moodle_local_treestudyplan/scss/studyplan-report.scss

.path-local-treestudyplan {
    font: inherit;
    --border-color: #ccc;
    --conditions-bgcolor: #e7e7e7;
    --courseresult-bgcolor: white;
    --studentinfo-bgcolor: white;

    table.q-studyplanreport {
        table-layout: fixed;
        width: calc((2 * 12rem) + (var(--resultColCount) * 4rem));
        colgroup.q-col-studentinfo {
            col.q-name {
                width: 14rem;
            }
            col.q-lastaccess {
                width: 10rem;
            }
        }
        colgroup.q-col-resultinfo {
            col {
                width: 4rem;
            }
        }
    }


    .q-header {
        background-color: var(--courseresult-bgcolor);

        .q-period-heading,
        .q-line-heading,
        .q-item-heading,
        .q-condition-heading {
            border-right: 1px solid var(--border-color);
            border-top: 1px solid var(--border-color);
            padding: 0.5rem;

        }

        .q-period-heading,
        .q-line-heading,
        .q-item-heading,
        .q-condition-heading.overall,
        .q-result.overall {
            background-color: var(--courseresult-bgcolor);
        }

        .q-period-heading.collapsed {
            width: 6rem;
        }

        .q-result {
            height: 2rem;
            padding-top: 0.25rem;
        }

        .q-line-heading,
        .q-condition-heading {
            overflow: hidden;
            width: 2rem;
            writing-mode: vertical-rl;
            text-orientation: sideways;
            .q-chevron {
                text-orientation: initial;
                writing-mode: horizontal-tb;
            }
        }

        .q-period-heading,
        .q-line-heading,
        .q-condition-heading {
            vertical-align: top;
        }
        .q-item-heading {
            vertical-align: top;
            width: 2rem;
        }

        .q-line-heading > .q-wrap {
            display: inline-block;
            height: 7rem;
        }
        .q-item-heading > .q-wrap {
            display: flex;
            height: 10rem;
            white-space: nowrap;
            flex-direction: column;
            overflow: hidden;
            gap: 2px;

            > * {
                min-height: 0;
            }

            > .q-toggle {
                width: 100%;
                text-align: center;
            }

            > .q-title {
                flex: 1 0 0;
                margin-left: auto;
                margin-right: auto;
                overflow: hidden;
                writing-mode: vertical-rl;
                text-orientation: sideways;
                hyphens: auto;

                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                padding-bottom: 0.5rem;
            }

        }


        .q-condition-heading {
            > span.q-wrap {
                display: inline-block;
                height: 8rem;
            }
            text-align: left;
            background: var(--conditions-bgcolor);
        }

        a.q-condition-label {
            text-decoration-line: underline;
            text-decoration-style: dotted;
            cursor: pointer;
            color: inherit; /* Don't force a color on this link */
        }
        .q-studentinfo {
            padding: 0.5em;
            border: 1px solid var(--border-color);
            width: 12rem;
            background-color: var(--studentinfo-bgcolor);
            vertical-align: bottom;
            font-weight: normal;
            &.q-name {
                white-space: nowrap;
            }
        }

    }
    .q-groupheading {
        td,
        th {
            &:first-child {
                border-right: none;
            }
            &:last-child {
                border-left: none;
            }
            background-color: var(--studentinfo-bgcolor);
            padding: 0.5em;
            border: 1px solid var(--border-color);
        }
    }
    .q-inforow {
        td,
        th {
            background-color: var(--studentinfo-bgcolor);
            padding: 0.5em;
            border: 1px solid var(--border-color);
        }
    }

    .q-student-results {
        &.odd td {
            background-color: var(--light);
            &.q-result {
                background-color: var(--light);
            }
        }
        .q-result {
            text-align: center;
            vertical-align: middle;
            border: 1px solid var(--border-color);
            width: 4rem;
            padding-left: 0.25rem;
            padding-right: 0.25rem;
            background-color: var(--conditions-bgcolor);
            &.overall,
            &.collapsed {
                background-color: var(--courseresult-bgcolor);
            }
            &.collapsed {
                border-top: none;
                border-bottom: none;
            }
        }

        .q-studentinfo {
            padding: 0.5em;
            border: 1px solid var(--border-color);
            width: 12rem;
            background-color: var(--studentinfo-bgcolor);

        }

        .q-courseresult,
        .q-conditionresult {
            i.fa {
                font-size: 21px;
                vertical-align: middle;
            }
        }

        .q-conditionresult {

            font-size: 1.2rem;
            display: inline-block;
            width: 100%;
        }
    }

    .q-pageperiodselection {
        margin-left: 0;
        margin-bottom: 1em;
        margin-top: 1em;
        padding-left: 0;
        position: relative;

        .row {
            margin-top: 0.5rem;
        }

        select.custom-select {
            width: 100%;
        }

        .q-label {
            position: relative;
            top: 0.5em;
        }

    }


}