//
// 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 block styles sheet
//
// @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
//

// Reset border values.
[class^="block-side-"] .card-body,
.block {
    background-color: [[setting:blockbackgroundcolor]];
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 2px;
}

.jsenabled .block .content {
    opacity: 1;
    display: block;
    -webkit-transition: ease [[setting:navbardropdowntransitiontime]];
    -moz-transition: ease [[setting:navbardropdowntransitiontime]];
    -ms-transition: ease [[setting:navbardropdowntransitiontime]];
    -o-transition: ease [[setting:navbardropdowntransitiontime]];
    transition: ease [[setting:navbardropdowntransitiontime]];
}

// Block titles.
.block .header,
.block > .card-body {
    border-width: [[setting:blockheaderbordertop]] [[setting:blockheaderborderright]] [[setting:blockheaderborderbottom]] [[setting:blockheaderborderleft]];
    border-color: [[setting:blockbordercolor]];
    border-style: [[setting:blockheaderbordertopstyle]];
    padding: 5px;
    border-radius: [[setting:blockheadertopradius]] [[setting:blockheadertopradius]] [[setting:blockheaderbottomradius]] [[setting:blockheaderbottomradius]];
}

// Block header.
.block .header {
    background-color: [[setting:blockheaderbackgroundcolor]];
    padding-right: 0;
    .action-menu {
        .menubar {
            margin-top: 4px;
        }
        .dropdown-toggle,
        .action-menu-item {
            color: [[setting:fontblockheadercolor]];
        }
    }
}

// Block title.
.block .title h2 {
    color: [[setting:fontblockheadercolor]];
    font-size: [[setting:fontblockheadersize]];
    font-weight: [[setting:fontblockheaderweight]] !important;
    margin-bottom: 0;
    text-shadow: none;
    text-transform: none;
}

// Block content.
.block > .content {
    border-color: [[setting:blockbordercolor]];
    border-radius: [[setting:blockmaintopradius]] [[setting:blockmaintopradius]] [[setting:blockmainbottomradius]] [[setting:blockmainbottomradius]];
    border-style: [[setting:blockmainbordertopstyle]];
    border-width: [[setting:blockmainbordertop]] [[setting:blockmainborderright]] [[setting:blockmainborderbottom]] [[setting:blockmainborderleft]];
    font-weight: normal;
    padding: 10px 5px;
}

// Some specific block styles for calendar block, login block, my profile block, etc.
// Navigation block.
.jsenabled .block_settings .block_tree .tree_item.branch,
.block_navigation .block_tree .tree_item.branch {
    color: var(--ad-link-colour) !important;
}

// Course Timeline block.
.block .content .block-timeline a:hover {
    background-color: [[setting:navbardropdownhovercolor]] !important;
    color: [[setting:navbardropdowntexthovercolor]] !important;
}

// Admin block.
.block_adminblock .content {
    margin: 0 auto;
}

// Course Overview block.
.block_course_overview .content {
    margin: 0;
}

.btn.coursemenubtn {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0% !important;
    color: #000000 !important;

    &:hover {
        background-color: #f0f0f0 !important;
        border-radius: 100% !important;
    }
}

.coursemenubtn .fa {
    color: #000000 !important;
}


// Calendar block.
.block_calendar_month table.minicalendar {
    margin-bottom: 0 !important;
    &.calendartable {
        td {
            border: none !important;
        }

        th {
            border: none !important;
            border-radius: 0;
            background-color: #e0e0e0;

            abbr {
                border: none !important;
                text-decoration: none;
            }
        }
    }
}

.block .calendar-controls {
    .previous,
    .next {
        font-size: 0.8rem;
        margin-top: 0.125rem;
        .arrow {
            display: none;
        }
        &:before,
        &:after {
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
        }
    }
    .previous {
        &:before {
            content: "\f053"; // chevron-left.
        }
    }
    .next {
        &:after {
            content: "\f054"; // chevron-right.
        }
    }
}

@media (min-width: 768px) {
    section:not(#region-main) .block.block_calendar_month .maincalendar .calendarwrapper {
        .previous,
        .next {
            font-size: .8rem;
        }
    }
}

// Comments block.
.block_comments div.content li {
    list-style-type: none;
}

.block_tree_box hr {
    background: transparent;
    border: none;
    border-top: 1px solid #eee;
}

// Site Info block.
.site-info-container {
    background-color: var(--ad-main-colour);
    padding: 5px 10px;
    height: 120px
}

.site-info-value {
    color: #ffffff;
    font-size: 48px;
    display: block;
    text-align: right;
}

.site-info-label {
    color: #ffffff;
    font-size: 18px;
    display: block;
    text-align: right;
}

// Server Info block.
.server-info-container {
    background-color: #39c121;
    padding: 5px 10px;
    height: 120px
}

// Quiz editing block header.
.questionbankwindow.block {
    overflow: auto;
    padding: 0;
}

#page-mod-quiz-edit .questionbankwindow div.header {
    background-color: #eee;
    color: inherit;

    a {
        color: inherit;
    }
}

#mod_quiz_navblock input {
    white-space: normal;
}

// Hidden blocks.
.block.hidden .header {
    border-bottom: 0;
}

.block.invisible:hover {
    opacity: 1;
}

body.has_dock div#dock {
    z-index: 3;
}

// Squared dot.
.block_settings .block_tree li.item_with_icon > p img {
    left: 3px;
    top: 2px;
}

// Block Icons.
.showblockicons {
    .block .header .title h2:before {
        font-size: [[setting:blockiconsheadersize]];
    }
}

// Tabbed layout for course and dashboard.
main.tabcontentcontainer {
    margin: 5px 0;
    min-height: 400px;
    padding: 0;
}

#dashboardtabcontainer section.adaptable-tab-section {
    border-top: 4px solid [[setting:tabbedlayoutdashboardcolorselected]];
    display: none;
    padding: 20px 0 0;
}

#coursetabcontainer section.adaptable-tab-section {
    border-top: 4px solid [[setting:tabbedlayoutcoursepagetabcolorselected]];
    display: none;
    padding: 20px 0 0;
}

#dashboardtabcontainer input.dashboardtab,
#coursetabcontainer input.coursetab {
    display: none;
}

.tabcontentcontainer {
    div.linktab,
    label.dashboardtab,
    label.coursetab {
        border-bottom: 0;
        cursor: pointer;
        display: inline-block;
        font-weight: 400;
        padding: 15px 15px 25px;
        position: relative;
        margin: 0 4px 0 0;
        transition: background-color 0.2s ease;
    }

    label.dashboardtab {
        background-color: [[setting:tabbedlayoutdashboardcolorunselected]];
    }

    div.linktab,
    label.coursetab {
        background-color: [[setting:tabbedlayoutcoursepagetabcolorunselected]];
    }

    div.linktab {
        line-height: 1;
        vertical-align: top;

        a {
            color: inherit;
        }
    }

    > dashboardtab.label:hover::after,
    > dashboardtab.input:focus + label::after,
    > dashboardtab.input:checked + label::after {
        background-color: [[setting:tabbedlayoutdashboardcolorselected]];
    }

    > coursetab.label:hover::after,
    > coursetab.input:focus + label::after,
    > coursetab.input:checked + label::after {
        background-color: [[setting:tabbedlayoutcoursepagetabcolorselected]];
    }

    div.linktab,
    input.dashboardtab:checked + label {
        background-color: [[setting:tabbedlayoutdashboardcolorselected]];
        border-color: [[setting:tabbedlayoutdashboardcolorselected]];
        border-top: 4px solid [[setting:tabbedlayoutdashboardcolorselected]];  // Override this in custom css to change the selected tab colour.
        color: #FFF;
    }

    input.coursetab:checked + label {
        background-color: [[setting:tabbedlayoutcoursepagetabcolorselected]];
        border-color: [[setting:tabbedlayoutcoursepagetabcolorselected]];
        border-top: 4px solid [[setting:tabbedlayoutcoursepagetabcolorselected]];  // Override this in custom css to change the selected tab colour.
        color: #FFF;
    }

    .tab-panel {
        padding: 30px 0;
        margin-right: 5px;
        margin-bottom: 5px;
    }

    .tabset {
        max-width: 100%;
        min-height: 200px;
    }
}

#tab-content:checked ~ #adaptable-course-tab-content,
#tab1:checked ~ #adaptable-course-tab-1,
#tab2:checked ~ #adaptable-course-tab-2,
#dashboard-tab-content:checked ~ #adaptable-dashboard-tab-content,
#dashboard-tab1:checked ~ #adaptable-dashboard-tab-1,
#dashboard-tab2:checked ~ #adaptable-dashboard-tab-2 {
    display: block;
}

#dashboard-tab-content:checked ~ #adaptable-dashboard-tab-content.adaptable-tab-section.tab-panel {
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 1024px) {
    .tabcontentcontainer {
        div.linktab,
        dashboardtab.input[type="radio"],
        coursetab.input[type="radio"] {
            font-size: 1.4em;
        }

        div.linktab {
            font-size: 3em;
            padding: 10px 15px;
        }

        label.dashboardtab,
        label.coursetab {
            font-size: 1.25em;
            padding: 20px 40px;
        }
    }
}

@media (max-width: 1023px) {
    .tabcontentcontainer {
        div.linktab {
            font-size: 1.6em;
            padding: 10px 15px;
        }

        label.dashboardtab,
        label.coursetab {
            padding: 12px;
        }
    }
}

@media (max-width: 460px) {
    .tabcontentcontainer {
        div.linktab {
            font-size: 1.5em;
            padding: 12px;
        }

        label.dashboardtab,
        label.coursetab {
            font-size: 0.95em;
        }

        div.linktab,
        label.dashboardtab,
        label.coursetab {
            width: 100%; // Make tabs full width at this resolution.
            margin: 2px 0;
        }

        label.dashboardtab:before,
        label.coursetab:before {
            content: "\f101"; // angles-right <- angle-double-right.
            font-family: "Font Awesome 6 Free";
            padding-right: 5px;
        }
    }

    #coursetabcontainer section.adaptable-tab-section,
    #dashboardtabcontainer section.adaptable-tab-section {
        border: 0;
    }
}
