//
// This file is part of Adaptable theme for moodle
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
//
//
// Adaptable course CSS file
//
// @package    theme_adaptable
// @copyright  2015-2019 Jeremy Hopkins (Coventry University)
// @copyright  2015-2019 Fernando Acedo (3-bits.com)
// @copyright  2018-2019 Manoj Solanki (Coventry University)
//
// @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
//

// Common settings.
.coursebox-content {
    padding: 5px 15px 10px;
    text-align: center;
}

.coursebox {
    border: 0;
    border-radius: 0;
    padding: 0;

    // Course tiles.
    // 1 tile.
    &.box-12 .coursebtn {
        width: 20%;
    }

    // 2 tiles.
    &.box-6 .coursebtn {
        width: 40%;
    }

    // 3 tiles.
    &.box-4 .coursebtn {
        width: 50%;
    }

    // 4 tiles.
    &.box-3 .coursebtn {
        width: 50%;
    }

    // 6 tiles.
    &.box-2 .coursebtn {
        width: 80%;
    }

    &.hover {
        &:hover,
        &:focus {
            .panel-body .coursebox-content h3 {
                color: [[setting:rendereroverlayfontcolor]];
            }
        }

        .teachers li a,
        .summary > a:link,
        .summary > a:visited {
            color: [[setting:rendereroverlayfontcolor]];
        }

        .teachers {
            color: [[setting:rendereroverlayfontcolor]];
            padding-left: 2px;
            padding-top: 2px;
            text-align: left;
        }

        .summary {
            color: [[setting:rendereroverlayfontcolor]];
            display: none;
            left: 0;
            min-height: 50px;
            overflow: auto;
            padding: 20px;
            position: absolute;
            text-align: center;
            top: 0;

            p {
                color: [[setting:rendereroverlayfontcolor]];
            }
        }
    }

    .content {
        clear: none;

        .courseimage img {
            max-width: 300px;
        }
    }

    &.panel,
    &.panel .panel-body {
        position: relative;
    }

    &.panel {
        .panel-body {
            border: 4px solid [[setting:tilesbordercolor]];
            margin: 2px;
        }

        ul.teachers {
            li {
                display: [[setting:tilesshowallcontacts]];
            }

            li:first-child {
                display: block;
            }
        }
        
        &.hover {
            height: 100%;

            .panel-body .coursebox-content h3 {
                font-size: 20px;
                font-weight: normal;
                line-height: normal;
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            &:hover {
                .panel-body {
                    background-color: [[setting:rendereroverlaycolor]];
                    transition: all .5s ease-in-out;

                    .cimbox {
                        opacity: .3;
                        transition: all .5s ease-in-out;
                    }
                }

                .summary {
                    display: block;
                    height: auto;
                    min-width: 100%;
                    width: auto;
                }
            }
        }
    }

    .panel-heading {
        padding: 12px 10px 10px;

        a {
            font-size: 105%;
        }
    }
}

#page-coursetitle h1 {
    font-size: 1.5rem;
    margin-bottom: 0;
    text-align: center;
}

// Course Tiles.

// Display the course list container.
#frontpage-available-course-list {
    display: block;
    flex-flow: row wrap;
    flex-grow: 1;
    flex-wrap: wrap;
    justify-content: space-between;

    // Remove 'Available courses' label.
    h2 {
        display: [[setting:enableavailablecourses]];
    }
}

#frontpage-available-course-list,
#frontpage-course-list,
.course-search-result {
    .coursebox {
        border: 0;
        margin-bottom: 0;
        padding: 0;
    }
}

#page-site-index .courses {
    display: flex;
    flex-flow: row wrap;
}

.paging {
    word-wrap: break-word;

    .paging-morelink {
        display: block;
        clear: both;
        width: 100%;
    }
}

// Media breakpoints for courses list area.
@media (min-width: 992px) {
    #page-site-index .courses {
        max-width: 960px;
    }
}
@media (min-width: 1200px) {
    #page-site-index .courses {
        max-width: 100%;
    }
}

.courses .coursebox.even {
  background-color: #eee !important;
}

.coursebox > .info > .coursename a {
    background-size: 14px;
    font-size: 14px;
    font-weight: normal;
}

.coursebox > .info > h3.name,
.course_category_tree .category > .info .name {
    font-size: 120%;
    font-weight: normal;
    margin: 0;
}

#marketblocks {
    .covtiles {
        border-radius: 2px;
        box-shadow: 0 1px 2px #c1c1c1;
        position: relative;
        border: 5px solid #fff;
    }

    &.covtiles {
        overflow: visible;

        .internalmarket {
            background-color: transparent;
            border: 0;
            padding: 10px 5px;
            text-align: left;
            position: relative;
        }

        h3 {
            margin-bottom: 0;
        }

        a.submit {
            margin-top: 10px;
            display: inline-block;
        }
    }
}

.cimbox {
    background-color: [[setting:blockbackgroundcolor]];
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 175px;
    position: relative;
    margin-right: -1px;
    transition: all .5s ease-in-out;
}

a.cimbox {
    display: block;
}

.covtiles {
    .coursebox-content {
        background-color: [[setting:covbkcolor]];
        bottom: 5px;
        height: 38px;
        left: 5px;
        right: 4px;
        padding: 0;
        position: absolute;
        overflow: hidden;
        transition: height .5s ease-in-out;
        width: auto;
        z-index: 9; // Override .cimbox class. */
    }

    .panel-body .coursebox-content {
        &:hover,
        &:focus {
            height: calc(100% - 5px);
        }
    }

    &.panel {
        background: transparent !important;
        border: 0;
        position: relative;

        .panel-body {
            border: 1px solid #e4e4e4;
            border-radius: 2px;
            box-shadow: 0 1px 2px #c1c1c1;
            padding: 5px 5px 38px;
            position: relative;
        }

        &:hover .panel-body {
            background-color: transparent !important;
        }

        .cimbox {
            background-position: 50% 0 !important;
            background-size: cover !important;
            height: 200px;
            overflow: hidden;
        }

        .cimbox,
        &:hover .cimbox,
        &:hover {
            opacity: 1;
        }
    }
}

.covtiles.coursebox.panel.hover .panel-body .coursebox-content h3,
#marketblocks.covtiles h4 {
    background: [[setting:covbkcolor]];
    border: 5px solid #fff;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    color: [[setting:covfontcolor]] !important;
    font-size: 18px;
    font-weight: 800;
    left: -5px;
    margin: 0;
    padding: 5px 10px;
    text-align: left;
    width: auto;
    max-width: 100%;
}

.covtiles.coursebox.panel.hover .panel-body .coursebox-content h3 a,
#marketblocks.covtiles h4 a,
.covtiles.coursebox.panel.hover .panel-body .coursebox-content h3 a:hover,
#marketblocks.covtiles h4 a:hover {
    color: [[setting:covfontcolor]] !important;
}

.covtiles.panel.hover .coursebtn.submit.btn {
    display: block;
    margin: 5px auto;
}

.coursebox.hover.covtiles .summary {
    background: [[setting:covbkcolor]];
    color: [[setting:covfontcolor]] !important;
    display: block;
    position: relative;
    text-align: left;
    min-width: auto;
}

.course-content ul li.section.main {
    margin-bottom: 10px;
}

.course-section .section-item {
    background-color: [[setting:coursesectionbgcolor]];
    border: [[setting:coursesectionborderwidth]] [[setting:coursesectionborderstyle]] [[setting:coursesectionbordercolor]];
    border-radius: [[setting:coursesectionborderradius]];
}

.sitetopic,
.course-content {
    ul.section {
        margin: 0;
    }
}

.sitetopic ul.section,
body:not(.editing) .sitetopic ul.section,
.course-content ul.section {
    padding-left: 0.2em;
}

@media (max-width: 767.98px) {
    .course-content li.section ul ul {
        padding-left: 1rem;
    }
}

#newdiscussionform {
    text-align: center;
}

#searchforums {
    margin: 5px 0 5px 5px;
}

.panel-body {
    overflow: hidden;

    .courseimage img {
        float: right;
        margin-bottom: 10px;
        max-width: 60px;
        margin-left: 5px;
    }
}

.course-content {
    .current {
        background-color: transparent;
        border-left: 0 solid #ccc;
        border-right: 0 dashed #ccc;
        margin-top: 0 !important;
    }

    ul {
        li.section .side {
            display: none;
        }

        // Show in Collapsed Topics.
        &.ctopics li.section .side {
            display: block;
        }

        &.topics li.section .content,
        &.weeks li.section .content {
            margin: 0;

            .summarytext {
                margin-left: 15px;
            }
        }

        &.topics li.section {
            padding-bottom: 0;

            .left {
                padding-top: 2px;
                text-align: right;
            }
        }

        li.section.main {
            margin: 0;
        }
    }
}

.editing .course-content ul li.section .side {
    display: inherit;
}

.editing .course-content ul.topics li.section .content,
.editing .course-content ul.weeks li.section .content {
    margin: 0;
}

.section-handle {
    margin: 0;
    position: relative;
    top: 12px;
}

body:not(.single-section-page) .course-section-header {
    background-color: [[setting:coursesectionheaderbg]];
    border-bottom: [[setting:coursesectionheaderborderstyle]] [[setting:coursesectionheaderbordercolor]] [[setting:coursesectionheaderborderwidth]];
    border-bottom-left-radius: [[setting:coursesectionheaderborderradiusbottom]];
    border-bottom-right-radius: [[setting:coursesectionheaderborderradiusbottom]];
    border-radius: [[setting:coursesectionheaderborderradiustop]];
    color: [[setting:sectionheadingcolor]];
    padding: 0.5rem;

    .sectionname,
    .section_goto {
        color: inherit;
        > a {
            color: inherit;
        }
    }

    .dropdown-toggle,
    .section-collapsemenu {
        color: inherit;
    }

    // Negate core course format template.
    .mt-2 {
        margin-bottom: auto;
        margin-top: auto !important;
    }
}

// Alter nav on single-section for better onetopic course format support.
.single-section .nav {
    margin-bottom: 0;
}

.single-section .nav-tabs {
    border-bottom: none;
}

.path-course-view .completionprogress {
    color: #666;
    float: none;
    font-size: 90%;
    padding: 0 0 10px;
    z-index: 2;
}

#gridshadebox_content .content .summary,
#gridshadebox_content .content ul.section {
    padding: 0 20px;
}

// Current section.
.course-section.current > .section-item::before {
    border-left-color: [[setting:currentcolor]];
}

.course-content ul li.section.hidden .sectionname,
.course-content ul li.section.hidden .content > div {
    margin-right: 40px;
}

// One Topic.
// CSS for the one topic format tabs.
.format-onetopic .onetopic {
    .tab_content {
        background-color: var(--ad-regionmain-colour);
        color: var(--ad-regionmaintext-colour);
    }

    .nav-tabs {
        .nav-link {
            background-color: #eee;
            border: 1px solid #eee;
            margin: 2px; // Magic number so tabs can have border.

            .tab_content .sectionname {
                background-color: inherit;
                color: inherit;
            }
        }

        .nav-link.active,
        .nav-item.show .nav-link {
            background-color: [[setting:headertoprowbkcolour]];
            border-color: transparent;
        }

        .nav-link.active {
            .tab_content,
            .tab_content .sectionname {
                background-color: [[setting:onetopicactivetabbackgroundcolor]] !important;
                color: [[setting:onetopicactivetabtextcolor]] !important;
            }
        }
    }
}

.activity img.iconlarge {
    height: [[setting:coursesectionactivityiconsize]];
    width: [[setting:coursesectionactivityiconsize]];
    vertical-align: middle;
}

// Profile picture.
// Make the profile picture circular.
.format-socialwall img.userpicture {
    border: 0.25em solid #fff;
    border-radius: 50%;
    box-shadow: 0 0.05em 0.05em rgba(0,0,0,0.05);
}

.activity_footer,
.section_footer {
    border-bottom: 1px solid #eee;
    border-top: 1px solid #eee;
    clear: both;
    display: block;
    margin-top: 2em;
    padding: 1em 15px;
}

.section_footer .prevnext {
    display: inline-block;
    font-style: normal;
    text-decoration: none;
    width: 100%;
}

@media (min-width: 768px) {
    .section_footer {
        .previous_activity,
        .previous_section,
        .next_activity,
        .next_section {
            vertical-align: top;
            width: 50%;
        }
    }
}

.section_footer > .jumpmenu {
    width: 100%;
}

.next_activity,
.next_section {
    min-height: 1px;
    text-align: right;
}

.jumpnav > .jumpmenu {
    margin-top: 1em;
    text-align: center;
    #jump-to-activity.form-select {
        width: auto;
    }
}

.previous_activity,
.previous_section {
    min-height: 1px;
}

.nav_icon {
    display: table-cell;
    font-size: 1.5em;
    line-height: 2em;
    min-width: 50px;
    padding: .3em;
    text-align: center;
}

.previous_activity,
.previous_section {
    .nav_icon {
        border-right: 1px solid #eee;
        margin-right: .3em;
    }

    .text {
        padding-left: 9px;
    }
}

.next_activity,
.next_section {
    .nav_icon {
        border-left: 1px solid #eee;
        margin-left: .3em;
    }

    .text {
        padding-right: 9px;
    }
}

.activity_footer,
.section_footer {
    .text {
        color: #565656;
        display: table-cell;
        padding-top: 9px;
        vertical-align: top;
        width: 10007px;
    }
}

.nav_guide {
    font-style: normal;
    letter-spacing: .1em;
    text-transform: uppercase;
}

// Activity styling */
.block_site_main_menu {
    .mod-indent,
    .main-menu-content {
        .activity {
            padding: 5px 0;
        }
    }
}

.section li {
    .ad-activity-wrapper {
        border-bottom: [[setting:coursesectionactivityborderwidth]] [[setting:coursesectionactivityborderstyle]] [[setting:coursesectionactivitybordercolor]];
        box-shadow: -[[setting:coursesectionactivityleftborderwidth]] 0 0 0 [[setting:coursesectionactivityassignleftbordercolor]];
    }

    &.modtype_assign .ad-activity-wrapper {
        background-color: [[setting:coursesectionactivityassignbgcolor]];
    }

    &.modtype_forum .ad-activity-wrapper {
        background-color: [[setting:coursesectionactivityforumbgcolor]];
    }

    &.modtype_quiz .ad-activity-wrapper {
        background-color: [[setting:coursesectionactivityquizbgcolor]];
    }
    
}

.activity img.activityicon {
    margin-right: 0;
}

// Label Info.
.section .activity .availabilityinfo {
    margin-left: 30px;
    margin-top: 1em;
}

.availabilityinfo .label-info {
    background-color: [[setting:alertbackgroundcolorinfo]];
    border-color: [[setting:alertbordercolorinfo]];
    color: [[setting:alertcolorinfo]];
    font-size: 14px;
    padding: 10px;

    a,
    a:hover {
        color: [[setting:alertcolorinfo]] !important;
    }
}

// Activity further information styling.
.ad-activity-meta-container {
    padding: 5px 0 0 0;
}

.ad-activity-mod-feedback {
    padding: 5px 0;
}

.ad-activity-action i {
    margin-right: 0.35rem;
}

.ad-activity-mod-feedback,
.ad-activity-mod-engagement {
    i {
        font-size: 1.1em;
    }
}

li.activity div.actions-right {
    float: right;
    padding: 5px;
}

.ad-activity-wrapper {
    margin: [[setting:coursesectionactivitymargintop]] 0 [[setting:coursesectionactivitymarginbottom]] 0;
    padding: 5px 10px 5px 0;
}

.section {
    .activity {
        clear: both;
        padding: 0;
        margin-bottom: 5px;

        .mod-indent-outer {
            width: 100%;
        }

        .actions-right .actions {
            position: absolute;
            right: 17px;
            top: 15px;
        }

        .activityinstance {
            min-width: 60%;
            margin-left: 5px;
        }
    }

    .label .mod-indent-outer {
        padding-left: 0;
    }
}

.topics .section .activity .mod-indent-outer {
    margin-left: 15px;
}

.course-content {
    ul.topics li.section .summary {
        margin: 5px 5px 5px 10px;
    }

    ul.gtopics li.section .content {
        margin: 0 10px;
    }

    ul.ftopics li.section .content {
        margin: 0 10px;
    }

    .single-section .section-navigation {
        margin-bottom: auto;
    }
}

// region-main-settings-menu is used on pages other than course pages, but included here to keep the settings together.
.context-header-settings-menu,
.region-main-settings-menu {
    height: 42px;
    margin-top: 0;
}
.context-header-settings-menu,
#region-main-settings-menu {
    .dropdown-toggle > .icon {
        vertical-align: sub;
    }
}

#region-main-settings-menu > div {
    position: static;
    margin: 0;
    right: auto;
}

.section .activity {
    .contentwithoutlink > a,
    .activityinstance > a,
    .contentwithoutlink .inplaceeditable > a,
    .activityinstance .inplaceeditable > a {
        color: [[setting:coursesectionactivityheadingcolour]];
    }

    .contentwithoutlink > a > span,
    .activityinstance > a > span,
    .contentwithoutlink .inplaceeditable > a > span,
    .activityinstance .inplaceeditable > a > span {
        font-size: 1.1em;
        font-weight: 800;
        padding-left: 8px;
    }
}
