/* ==========================================================================
   Moringa Theme - Custom UI Overrides
   ========================================================================== */
/* ==========================================================================
   Base body variables (light mode). Higher specificity than Bootstrap's
   :root / [data-bs-theme=light] so it wins regardless of load order; the
   :not(dark) guard leaves dark mode untouched.
   ========================================================================== */
:root,
[data-bs-theme=light] {
    --bs-body-font-size: 0.85rem;
    --bs-body-color: #101F3C;
    --bs-body-bg: #ffffff;
}

/* ==========================================================================
   Shared UI tokens
   Semantic tokens used across the theme's feature stylesheets
   (attendance.css, quizreport.css, staffreport.css) and moringa.css itself.
   They build on the brand tokens (--moringa-navy, -orange, -cyan, -white,
   -grey-*, -radius*) - change a value here and every page follows.
   ========================================================================== */
:root {
    /* Status palette: submitted / graded / present, due soon / excused,
       overdue / absent / incorrect. */
    --moringa-success: #16a34a;
    --moringa-warning: #d97706;
    --moringa-danger: #dc2626;

    /* Text, lines and surfaces. */
    --moringa-text: var(--moringa-navy);
    --moringa-muted: var(--moringa-grey-600, #526174);
    --moringa-border: var(--moringa-grey-200, #e5e7eb);
    --moringa-divider: var(--moringa-grey-100, #eef2f7);
    --moringa-surface: var(--moringa-white, #fff);
    --moringa-surface-alt: var(--moringa-grey-50, #f7f8fa);

    /* Type, depth and focus. */
    --moringa-font-heading: 'GothamRounded', 'Poppins', sans-serif;
    --moringa-shadow-card: 0 12px 40px -18px color-mix(in srgb, var(--moringa-navy) 22%, transparent);
    --moringa-focus-ring: 0 0 0 3px rgba(10, 150, 193, 0.15);
}

body.admin .secondary-navigation {
    top: 66px;
}

.secondary-navigation {
    position: fixed;
    top: 61px;
}

body.admin header#page-header {
    margin-top: 140px;
}

a {
    color: var(--moringa-orange);
}

a:hover,
a:focus {
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
}


/* .btn-primary / .btn-outline-primary inherit the brand orange from Bootstrap
   $primary now (see scss/_brand.scss), so the forced overrides are dropped. */
.btn-outline-primary {
    border-color: var(--moringa-orange);
    color: var(--moringa-orange);
}

.btn-primary {
    background-color: var(--moringa-orange);
    border-color: var(--moringa-orange);
}

.drawer-toggles .drawer-toggler .btn,
.drawer-toggles .drawer-toggler body.path-mod-quiz .moove-attempts-list .review-link a,
body.path-mod-quiz .moove-attempts-list .review-link .drawer-toggles .drawer-toggler a,
.drawer-toggles .drawer-toggler body.path-mod-quiz .mod_quiz-next-nav,
body.path-mod-quiz .drawer-toggles .drawer-toggler .mod_quiz-next-nav,
.drawer-toggles .drawer-toggler body.path-mod-quiz #mod_quiz_navblock .othernav .endtestlink,
body.path-mod-quiz #mod_quiz_navblock .othernav .drawer-toggles .drawer-toggler .endtestlink,
.secondary-navigation .moremenu .nav-tabs .nav-link:hover,
.secondary-navigation .moremenu .nav-tabs .nav-link:focus {
    background-color: var(--moringa-orange) !important;
}

.drawer.drawer-right.show {
    z-index: 9999;
}

.drawer.drawer-right.show .drawertoggle {
    background-color: var(--moringa-orange);
    padding: 5px;
}

.drawer.drawer-right .drawertoggle img.icon {
    filter: brightness(0) invert(1);
}

.drawer-toggler.drawer-right-toggle button {
    top: 150px;
    position: fixed;
    right: 0px;
}

.drawer-toggler.drawer-right-toggle button img.icon {
    filter: brightness(0) invert(1);
}

.secondary-navigation {
    background-color: var(--moringa-navy) !important;
}

.footer-cpnote {
    background-color: var(--moringa-navy) !important;
}

/*course listing page*/
.moringa-navbar {
    position: fixed;
    width: 100%;
}

body.pagelayout-incourse header#page-header {
    display: none;
}

body.path-course-view div#page,
body.path-admin-setting div#page,
body.pagelayout-mydashboard div#page,
body.pagelayout-admin div#page,
body.pagelayout-mypublic div#page,
body.moringa-ldsinternational-in div#page {
    height: 100% !important;
    display: contents !important;
}

#page.drawers {
    margin-top: 0 !important;
}

@media screen and (max-width: 768px) {
    body.limitedwidth #page.drawers .main-inner, #page.drawers .main-inner {
        max-width: 100% !important;
    }
    #page.drawers .main-inner{
        padding: 1.5rem 0.5rem;
    }
    .que {
        padding: 32px 10px !important;
    }
    .que.multichoice .answer div.r0, .que.multichoice .answer div.r1 {
        margin: .25rem 0 0.5rem;
    }
    body.path-mod-quiz .que .info .questionflag a {
        padding: 4px 6px;
    }
    .que .info .questionflag .questionflagimage {
        width: 16px !important;
        height: 16px !important;
    }
    .resource-download-panel {  
        padding: 30px 24px 10px !important;
    }
    .drawer-toggles .drawer-toggler {
       display: none;
    }
    .navbar-toggler {
        margin-left: 0px !important;
        margin-right: 4px !important;
    }
    .userinitials {
        font-size: 13px;
    }
}

.moringa-quiz-review-chrome .que .info h4.h3 {
    margin-bottom: 0px !important;
}

.moringa-quiz-review-chrome .que .info .state {
    padding: 2px 10px !important;
}

body#page-my-index div#page {
    height: auto;
    background: linear-gradient(rgba(255, 255, 255, 0.7),
            rgba(255, 255, 255, 0.7)), url('/blocks/moringa_user_dashbaord/src/images/dlh_bg_solid.svg');

}

body.page-mycourses div#page {
    height: 100% !important;
}

body#page-mod-assign-view header#page-header {
    display: none;
}

/* theme_moove hides .page-header-headings globally (relies on the activity
   header for on-page titles instead). The assignstart standalone pages
   disable the activity header and render their own title in the card, so the
   whole #page-header title block stays hidden here too - the course-fullname
   prefix that used to be re-shown just duplicated the first breadcrumb crumb
   and, sharing the header band with the breadcrumb, forced the trail into a
   ragged right-hand column. Hiding it keeps these pages visually identical to
   the rest of the theme (e.g. My Courses): one left-aligned breadcrumb, no
   floating heading. Breadcrumb look/alignment is now handled by the universal
   .breadcrumb rules further down, so no standalone-specific breadcrumb CSS is
   needed here. */
body.pagelayout-standalone #page-header .page-header-headings {
    display: none;
}
body.pagelayout-standalone #page-navbar {
    width: 100%;
}

/* The secondary nav (Assignment / Settings / Submissions ...) is
   position:fixed, so it takes no space in the flow. Other layouts get away
   with it because their page header fills the band underneath; standalone
   hides the page headings, so when staff get the tab bar here (e.g. the
   assignment grading table) the breadcrumb and the top of the content slid
   under it. Push the header down by the bar's height when - and only when -
   the bar is present (students on standalone pages don't get it). */
body.pagelayout-standalone:has(.secondary-navigation) header#page-header {
    margin-top: 60px;
}

div#page {
    min-height: 100% !important;
}

.pagelayout-incourse #page {
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
}

.pagelayout-incourse #topofscroll {
    width: 100%;
    background-color: transparent !important;
}


#section_listing {
    width: 330px;
    background: color-mix(in srgb, var(--moringa-orange) 1%, transparent);
    border: 1px solid color-mix(in srgb, var(--moringa-cyan) 15%, transparent);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    transition: all .5s ease-in-out;
}

.cst_wrapper_parent {
    margin-top: 24px;
}

#course_main #content_main {
    flex: 1;
    display: flex;
    flex-direction: column;

}

#section_listing .section-list {
    padding: 10px;
    list-style: none;
}

#lesson_listing .lesson-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0 51px;
    padding: 0;
}

#lesson_listing .lesson-list .lesson-item {
    padding: 10px;
    border-bottom: 1px solid;
}

#course_main #content_main div#region-main {
    background: transparent;
    padding-top: 0px;
}

#course_main #content_main div#region-main .activity-header {
    display: none;
}

@media screen and (max-width: 768px) {
    #course_main #content_main div#region-main {
        padding-top: 15px;
    }
    
}

#course_main #content_main div#region-main .container-fluid.position-relative {
    max-width: 100% !important;
    /* height: 511px; */
}

body#page-mod-videotime-view header#page-header {
    display: none;
}

div#course_main {
    margin-top: 40px !important;
}

/* Content/Discussion tab bar "pill" look - shared by the content page's own
   copy (#section_listing) and the standalone Discussion page's duplicate
   (.discussion-sidebar, see theme_moringa/discussion.mustache) so both
   render identically. Kept here rather than split across this file and
   discussion.css, since discussion.css now only loads on the Discussion
   page but this stylesheet is always loaded. */
#section_listing ul.cst_tabbers,
.discussion-sidebar ul.cst_tabbers {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
    border-bottom: 0 !important;
}

#section_listing ul#myTab,
.discussion-sidebar ul#myTab {
    margin: 25px;
}

/* #section_listing itself already has 20px padding on all sides (for the
   course-tree content below the tab bar) - .discussion-sidebar has none -
   so its copy of the tab bar needs 20px less top margin than the shared
   25px above to land at the same vertical position on both pages. */
#section_listing ul#myTab {
    margin-top: 5px;
}

#section_listing ul.cst_tabbers li button.nav-link,
.discussion-sidebar ul.cst_tabbers li button.nav-link {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    margin: 10px;
    font-size: 14px;
    border: 0.5px solid #ddd !important;
    border-radius: 20px;
    color: var(--moringa-navy);
    box-shadow: none;
}

#section_listing ul.cst_tabbers li button.nav-link.active,
.discussion-sidebar ul.cst_tabbers li button.nav-link.active {
    background-color: var(--moringa-orange) !important;
    border-color: var(--moringa-orange) !important;
    color: #fff !important;
}

#section_listing .section-list li.section-item {
    border-bottom: 1px dashed color-mix(in srgb, var(--moringa-navy) 50%, transparent);
    padding: 18px 10px;
}

#section_listing .section-list li.section-item a {
    color: color-mix(in srgb, var(--moringa-navy) 50%, transparent);
}

#section_listing .section-list li.section-item a:hover {
    text-decoration: none !important;
}

#section_listing .section-list li.section-item.active a {
    color: var(--moringa-navy) !important;
    font-weight: bold !important;
}

#lesson_listing .lesson-list .lesson-item a {
    font-size: 18px;
    font-weight: bold;
    color: var(--moringa-orange);
    text-transform: capitalize;
    border-color: var(--moringa-orange);
}


/* for PDF */
/* theme/moringa/pdf_view.php's pdf.js iframe reuses this same
   .resourcecontent.resourcepdf / #resourceobject markup mod_resource's own
   embed used to produce (see theme_moringa_get_pdf_viewer_url() in lib.php)
   purely so it inherits this styling for free. #region-main (the white
   card everything here sits inside) has its own 20px padding - the negative
   margins below pull the PDF frame back out to that card's actual edges so
   it spans the full width of the area instead of sitting narrower, inset by
   that padding on both sides. Width-only: the vertical padding above/below
   the frame is untouched. */
#course_main #content_main .resourcecontent.resourcepdf {
    height: auto;
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
}

#course_main #content_main iframe#resourceobject {
    height: 600px !important;
    width: 100% !important;
    display: block;
    border: 0;
}

/* for PDF */


iframe#vimeo-embed-6a4f3a7731c52_youtube_api {
    border-radius: 7px !important;
}

/* Embedded video links (e.g. a mod_url activity pointing at a YouTube/Vimeo
   URL, embedded inline via core_media_manager - see mod/url/locallib.php's
   url_display_embed(); the same markup can also turn up inside a mod_page/
   label's rich-text body if a link was pasted there). Left alone, the
   <iframe>/<span class="mediaplugin"> markup carries a fixed pixel width/
   height sized for a generic page, not this theme's activity content
   column - looks cramped on wide screens, overflows on narrow ones. Wrap it
   responsively at the standard 16:9 ratio instead.
   theme/moringa/style/focus-mode.css has the equivalent rule scoped to the
   focus-mode "View Focus Mode" layout, which doesn't load this stylesheet's
   selectors (different page). */
#course_main #content_main .mediaplugin {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto !important;
    margin: 0 auto;
}

#course_main #content_main .mediaplugin iframe,
#course_main #content_main .mediaplugin video {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
    border-radius: 7px;
}


/* end course listing page*/

body.page-mycourses div#page,
body#page-message-index div#page,
.pagelayout-incourse div#page {
    background: linear-gradient(rgba(255, 255, 255, 0.7),
            rgba(255, 255, 255, 0.7)), url('/blocks/moringa_user_dashbaord/src/images/dlh_bg_solid.svg');

}

body.page-mycourses .card {
    border: none;
    background: transparent !important;
    box-shadow: none !important;
}

body.page-mycourses div#topofscroll,
body.page-mycourses section#block-region-content,
body.page-mycourses .block_myoverview,
body.page-mycourses .card-body {
    background: transparent !important;
}

body.page-mycourses .card-body,
#page-my-index.page-mycourses #page.drawers .block_myoverview>.card-body,
body.page-mycourses div#topofscroll {
    padding: 0 !important;
}

body.page-mycourses h3#instance-6-header {
    display: none !important;
}


/* start message drawer */

.message-app {
    margin-top: 23px;
    padding-top: 10px;
}

.message-app .input-group.simplesearchform {
    padding: 10px;
}

.message-app .input-group.simplesearchform .btn-submit {
    border-radius: 0;
    vertical-align: middle;
    display: flex;
    color: #fff !important;
    align-items: center;
    background: var(--moringa-navy);
    border-color: var(--moringa-navy) !important;
}

.message-app a.btn-link i {
    color: var(--moringa-navy);
}

.message-app .section {
    background: transparent !important;
    box-shadow: none !important;
    border-color: var(--moringa-grey-300) !important;
}

.message-app .section button {
    padding: 3px !important;
    background: #fff !important;
    box-shadow: none !important;
    font-weight: 500;
    color: var(--moringa-navy) !important;
    font-size: 13px;
}

.message-app .section .lazy-load-list {
    font-size: 13px;
    color: var(--moringa-navy) !important;
    border: 0 !important;
}

.message-app .list-group .list-group-item.list-group-item-action {
    background: transparent !important;
}

.message-app .list-group .list-group-item.list-group-item-action:hover {
    color: var(--moringa-navy) !important;
}

a[data-route="view-contacts"] {
    font-weight: bold;
}

.message-app .input-group.simplesearchform input.form-control {
    background: #fff !important;
}


/* end message drawer */


/* start message page */
body#page-message-index div#page {
    height: 100vh;
}

body#page-message-index .message-app {
    min-height: 71vh !important;
    margin: 0;
    padding: 0;
    border: none !important;
}

body#page-message-index div#topofscroll {
    background: transparent !important;
}

body#page-message-index .message-app .conversationcontainer .cst_column_inner {
    padding: 15px 20px;
    border: 1px solid color-mix(in srgb, var(--moringa-cyan) 30%, transparent);
    border-radius: 24px;
}

body#page-message-index .message-app .conversationcontainer .cst_column_inner .panel-header-container {
    display: none !important;
}

body#page-message-index .message-app .view-overview-body .section div#view-overview-favourites-toggle,
body#page-message-index .message-app .conversationcontainer .cst_column_inner .section div#view-overview-favourites-toggle button {
    background: transparent !important;
}

body#page-message-index .message-app .conversationcontainer .cst_column_inner .section button {
    padding: 10px;
}

body#page-message-index .message-app .section button {
    background: transparent !important;
    border-bottom: 1px solid var(--moringa-navy);
    padding: 10px !important;
}


body#page-message-index .message-app .section button:focus,
body#page-message-index .message-app .view-overview-body .section div[data-region="toggle"]:focus {
    box-shadow: none !important;
}


body#page-message-index .message-app .view-overview-body .section div[data-region="toggle"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body#page-message-index .message-app .list-group>a {
    border-radius: 0;
    margin-left: 20px !important;
    /* width: 80%; */
    border-bottom: 0.5px dashed color-mix(in srgb, var(--moringa-navy) 50%, transparent);
}

body#page-message-index .message-app .list-group>a>img,
body#page-message-index .message-app .list-group>a p.last-message {
    opacity: 0 !important;
    visibility: hidden !important;
}

body#page-message-index .message-app .list-group>a>img {
    display: none !important;
}

body#page-message-index .message-app .list-group>a:focus,
body#page-message-index .message-app .list-group>a:hover {
    box-shadow: none !important;
}



body#page-message-index .message-app .cst_overview_container {
    gap: 50px;
}

div[data-region="day-messages-container"] .message {
    background-color: #fff !important;
    border-radius: 10px !important;
    padding: 20px !important;
    border: 1px solid #ddd;
    box-shadow: 0px 1.02px 2.29px 0px #00000021;
    box-shadow: 0px 0.19px 0.57px 0px #0000001C;
}

.message .tail {
    display: none !important;
}

.message-app .message {
    background-color: #dee2e6;
    color: #000;
    border-right: 10px solid var(--moringa-navy) !important;
}

div[data-region="day-container"]>h6.day {
    position: relative;
    font-size: 11px;
    color: var(--moringa-navy);
    font-weight: 400;
}

div[data-region="day-container"]>h6.day:before {
    content: "";
    position: absolute;
    background: color-mix(in srgb, var(--moringa-cyan) 10%, transparent);
    left: 0;
    width: 47%;
    height: 0.5px;
    top: 8px;
}

div[data-region="day-container"]>h6.day:after {
    content: "";
    position: absolute;
    background: color-mix(in srgb, var(--moringa-cyan) 10%, transparent);
    right: 0;
    width: 47%;
    height: 0.5px;
    top: 8px;
}

.d-flex>textarea.form-control {
    background: #fff !important;
    border: 2px solid color-mix(in srgb, var(--moringa-navy) 20%, transparent) !important;
    border-radius: 10px !important;
    box-shadow: 0px 1.02px 2.29px 0px #00000021;
    box-shadow: 0px 0.19px 0.57px 0px #0000001C;
}

.d-flex>textarea.form-control::placeholder {
    position: absolute;
    top: 25px;
    left: 35px;
    color: #424242;
    font-size: 17px;
}

/* uday */
.moringa-learning-layout {
    display: flex;
    min-height: calc(100vh - 70px);
}

.moringa-learning-sidebar {
    width: 320px;
    background: #fff;
    border-right: 1px solid #e5e5e5;
    overflow: auto;
    flex-shrink: 0;
}

.moringa-learning-content {
    flex: 1;
    padding: 24px;
    overflow: auto;
}

#region-main {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
}

@media screen and (max-width: 768px) {
    #region-main {
        padding: 0px;
    }
    
}

/* end message page  */

/* Sticky footer site-wide: pin #page-footer to the bottom of the viewport
   on short/empty pages, while still flowing below content on tall pages.
   Drawers (course index / block drawer) are position:fixed so they're
   unaffected by turning #page-wrapper into a flex column. */
html, body {
    height: 100%;
}

#page-wrapper {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

#page-wrapper #page {
    flex: 1 0 auto;
}

#page-wrapper #page-footer {
    flex-shrink: 0;
}

/*
 * theme_moove caps .footer-popover at 830px, centered, on pagelayout
 * "standard" or body.limitedwidth pages. Our incourse course pages force
 * #page itself to full width (see .pagelayout-incourse #page above), so
 * left alone the footer reads as roughly half-width and off-center
 * against the rest of the (edge-to-edge) page below it.
 */
.pagelayout-incourse .footer-popover {
    max-width: 100% !important;
    margin: 0 !important;
}

/*
 * Hide the footer help popover ("Documentation for this page", "Services and
 * support", "Powered by Moodle", version) and its "?" trigger button. Boost
 * only hides the popover content from the sm breakpoint up and prints it
 * inline below that, and the footer comes from several templates (theme_boost,
 * theme_moove, theme_moringa), so this is done in CSS to cover all of them.
 */
#page-footer .footer-content-popover,
#page-footer [data-region="footer-container-popover"] .btn-footer-popover {
    display: none !important;
}

/* icon and button css  */

.lesson-list {
    list-style: none;
    padding: 0;
}

.lesson-item {
    background: #fff;
    border: 1px solid var(--moringa-grey-200);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 10px;
}

.lesson-item.active {
    border-left: 4px solid var(--moringa-orange);
}

.lesson-icon img {
    width: 20px;
    height: 20px;
}

.lesson-name {
    color: var(--moringa-navy);
    font-size: 20px;
    font-weight: bold;
}

.lesson-name>P {
    color: color-mix(in srgb, var(--moringa-navy) 65%, transparent);
    font-weight: normal;
    font-size: 14px;
}

.lesson-action .btn {
    border-radius: 20px;
    padding: 4px 14px;
}


li.lesson-item .lesson-icon {
    padding: 10px;
    background-color: var(--moringa-grey-50);
    text-align: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
}

.lesson-icon img {
    width: 28px;
    height: 28px;
    max-width: 28px;
    max-height: 28px;
    box-sizing: border-box;
    margin: 0 !important;
}


.continue-learning-btn {
    background: var(--moringa-navy);
    color: #fff;
    border: 1px solid var(--moringa-navy);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.continue-learning-btn:hover {
    background: var(--moringa-navy);
    border-color: var(--moringa-navy);
    color: #fff;
}

.course-card .progress {
    height: 8px;
    background: var(--moringa-grey-100);
    border-radius: 999px;
}

.course-card .progress .progress-bar {
    background: var(--moringa-navy);
    border-radius: 999px;
}

.mobile-sidebar-toggle {
    display: none;
}

button.btn-back {
    display: none;
}



/* /// responsive// */


/* ===============================
   Mobile Layout
================================= */

@media (max-width:991px) {

    #section_listing,
    .discussion-sidebar {
        width: 272px !important;
        height: auto !important;
    }

    #section_listing ul.cst_tabbers li button.nav-link,
    .discussion-sidebar ul.cst_tabbers li button.nav-link {
        font-size: 16px !important;
    }

    #lesson_listing .lesson-list {
        width: 100% !important;
        margin: 5px auto !important;
    }

    .module_view_section {
        min-height: auto !important;
    }

    #lesson_listing .lesson-list .lesson-name {
        font-size: 14px;
    }

    .drawer.drawer-left.show {
        margin-top: 1px !important;
        /* Sit above the fixed navbar so the drawer's logo header isn't hidden
           under it. The drawer is a narrow left panel, so the navbar's
           right-hand icons still show beside it (the backdrop stays below the
           navbar, so those icons aren't dimmed). */
        z-index: 1060 !important;
    }

    .cst_wrapper_parent {
        position: relative;
    }

    /* Toggle Button */
    .mobile-topbar {
        display: block;
        position: fixed;
        top: 80px;
        left: 15px;
        z-index: 1050;
    }

    .mobile-sidebar-toggle {
        width: 42px;
        height: 42px;
        border: none;
        border-radius: 0px 50px 50px 0px;
        background: var(--moringa-orange);
        display: block;
        color: #fff;
        cursor: pointer;
        position: fixed;
        left: -5px !important;
        z-index: 1034;
    }

    /* Lessons Sidebar */
    #section_listing {
        position: fixed;
        top: 0;
        left: -320px;
        width: 300px;
        height: 100%;
        overflow: auto;
        background: #fff;
        z-index: 1040;
        transition: all .5s ease-in-out;
        box-shadow: 0 0 15px rgba(0, 0, 0, .2);

    }

    /* Discussion Sidebar */
    .discussion-sidebar {
        position: fixed;
        top: 0;
        left: -320px;
        width: 300px;
        height: 100%;
        overflow: auto;
        background: #fff;
        z-index: 1040;
        transition: all .5s ease-in-out;
        box-shadow: 0 0 15px rgba(0, 0, 0, .2);

    }

    #section_listing.mobile-sidebar-open {
        left: 0;
        height: 100% !important;
        top: 94px;
        border-radius: 0;
        width: 402px !important;
        transition: all .5s ease-in-out;
    }

    .discussion-sidebar.mobile-sidebar-open {
        left: 0;
        height: 100% !important;
        top: 72px;
        border-radius: 0;
        width: 402px !important;
        transition: all .5s ease-in-out;
    }

    .activity-loader {
        display: none !important;
    }

    button.btn-back {
        display: block;
        position: absolute;
        right: 0;
    }
}

/* @media (max-width:800px) {
   
} */



@media (max-width:767px) {
    .drawer.drawer-left.show {
        /* Start from the top and cover the navbar (z-index set in the wider
           breakpoint above), rather than starting 65px down where the navbar
           clipped the drawer's logo. */
        margin-top: 1px !important;
    }

    body.pagelayout-incourse .main-inner {
        padding: 10px !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .message-bubble p {
        font-size: 13px !important;
    }
}





@media (max-width:680px) {

    body#page-mod-assign-view .secondary-navigation {
        margin-top: 35px !important;
    }

    #section_listing.mobile-sidebar-open,
    .discussion-sidebar.mobile-sidebar-open {
        width: 300px !important;
        transition: all .5s ease-in-out;
    }

    div#course_main {
        margin-top: 64px !important;
        transition: all .5s ease-in-out;
    }

    .message-bubble {
        flex-direction: column;
    }

}

@media (max-width:615px) {
    .drawer-toggler.drawer-right-toggle button {
        top: 204px;
    }
}

@media (max-width:350px) {
    .secondary-navigation a.nav-link {
        /* padding: 5px; */
        font-size: 14px;
        height: auto;
    }
}
/* ==========================================================================
   Login page (split-screen: brand panel + login card)
   -- Requires theme images: pix/logo_white.svg and pix/login_bg.jpg
   ========================================================================== */

/* Left brand panel. The photo now comes from the theme's login background
   setting (applied to .login-layout-left). No padding here so the overlay can
   be full-bleed; the logo is offset instead. Panel hidden below lg. */
.login-layout-left {
    position: relative;
    overflow: hidden;
    padding: 0;
    background-color: var(--moringa-navy);
}

/* Fill the aside so the overlay can cover the whole panel. Override the parent
   theme's content max-width (which otherwise constrains this to ~40% width,
   leaving the overlay covering only the left strip). */
.moringa-login-panel {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none !important;
    padding: 0;
    background: transparent;
}

/* Navy overlay: as a pseudo-element on the panel itself, so it always covers
   the exact photo area top-to-bottom (a nested div couldn't be relied on to
   reach the bottom). High specificity to beat any parent-theme ::before. */
body.pagelayout-login #page .login-layout-left::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(color-mix(in srgb, var(--moringa-navy) 78%, transparent),
                                color-mix(in srgb, var(--moringa-navy) 55%, transparent));
}

/* Panel content sits above the overlay. */
.moringa-login-panel {
    z-index: 1;
}

.moringa-login-bg {
    display: none; /* overlay now handled by .login-layout-left::before */
}

/* Logo: centred horizontally, near the top, above the overlay. */
.moringa-login-brand {
    position: absolute;
    top: 3rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    text-align: center;
}

/* Explicit width (not just max-width) so the SVG scales up past the .icon size. */
/* Logo. Rendered by the pix helper, which adds .icon. .icon pins a fixed 16px
   height that squashes the wide logo — override it with height:auto, and include
   an ID (#page) in the selector to outrank any id-scoped .icon rule. Also force
   natural aspect ratio so the SVG can't be stretched. */
body.pagelayout-login #page .moringa-login-brand img,
body.pagelayout-login #page .moringa-login-brand img.icon {
    width: 280px !important;
    max-width: 70%;
    height: auto !important;
    min-height: 70px;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
    vertical-align: middle;
}

/* Remove the login background attribution caption ("AI-generated image"), which
   the parent theme injects as a ::after pseudo-element with hard-coded content.
   Match its exact selector so the generated content is suppressed. */
body.pagelayout-login #page .login-layout-left::after {
    content: none !important;
    display: none !important;
}

/* Right side: centre the card on a white field. */
.login-layout-right {
    background-color: var(--moringa-white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-layout-right-content {
    width: 100%;
}

.login-container {
    max-width: 460px;
    margin: 0 auto;
    padding: 4rem;
}

/* The login card. */
.moringa-loginform {
    background-color: var(--moringa-white);
    border: 1px solid var(--moringa-grey-100);
    border-radius: var(--moringa-radius-lg);
    box-shadow: 0 12px 40px color-mix(in srgb, var(--moringa-navy) 10%, transparent);
    padding: 2.5rem;
}

.moringa-login-title {
    color: var(--moringa-orange);
    font-weight: 700;
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.moringa-login-subtitle {
    color: var(--moringa-navy);
    font-size: 0.95rem;
}

/* Field labels: bold navy; required asterisk uses .text-danger in markup. */
.moringa-loginform .form-label {
    font-weight: 700;
    color: var(--moringa-navy);
    margin-bottom: 0.4rem;
}

.moringa-loginform .form-control {
    border-radius: var(--moringa-radius-pill);
    border: 1px solid var(--moringa-grey-300);
    padding: 0.6rem 1rem;
}

.moringa-loginform .form-control:focus {
    border-color: var(--moringa-orange);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--moringa-orange) 20%, transparent);
}

.moringa-loginform .login-form-rememberusername .form-check-label {
    color: var(--moringa-navy);
    font-weight: 600;
}

/* Login button inherits orange from $primary; make it pill + bold. */
.moringa-loginform .login-form-submit .btn-primary {
    border-radius: var(--moringa-radius-pill);
    padding: 0.6rem 1rem;
    font-weight: 700;
}

.moringa-loginform .login-forgotpassword a {
    color: var(--moringa-navy);
    font-weight: 700;
    text-decoration: underline;
}

/* "OR LOGIN WITH" separator with flanking rules. */
.moringa-loginform .login-separator {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--moringa-grey-600);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
}

.moringa-loginform .login-separator::before,
.moringa-loginform .login-separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--moringa-grey-300);
}

.moringa-loginform .login-separator::before { margin-right: 1rem; }
.moringa-loginform .login-separator::after { margin-left: 1rem; }

/* Identity provider ("Use Google") button. */
.moringa-loginform .login-identityprovider-btn {
    border-radius: var(--moringa-radius-pill);
    border-color: var(--moringa-grey-300);
    color: var(--moringa-navy);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.moringa-loginform .login-cookiesnotice .btn-link {
    color: var(--moringa-navy);
    font-size: 0.85rem;
}

/* Forgot password page: email-only. Hide the entire "Search by username"
   section — the fieldset wraps its legend, header and field, so this removes
   it before paint (no flicker), keeping only the email search. */
body#page-login-forgot_password #id_searchbyusername {
    display: none !important;
}

/* ==========================================================================
   Login-flow pages: white background + mobile polish + reset password page
   ========================================================================== */

/* White page background on login-flow pages (login + forgot/reset password),
   replacing Moove's default grey. Left panel keeps its own navy background. */
body.pagelayout-login,
body.pagelayout-login #page,
body.pagelayout-login #topofscroll,
body.pagelayout-login #region-main-box {
    background: var(--moringa-white) !important;
}

/* Small screens: brand panel is already hidden (d-none d-lg-flex); make the
   card full-bleed and lighter. Applies to both login and reset pages. */
@media (max-width: 575.98px) {
    .login-container {
        padding: 1rem;
    }
    .moringa-loginform,
    body#page-login-forgot_password .login-container {
        padding: 1.5rem;
        border: none;
        box-shadow: none;
    }
}

/* --- Reset password page: match the login card design ------------------- */
/* Card container. */
body#page-login-forgot_password .login-container {
    background: var(--moringa-white);
    border: 1px solid var(--moringa-grey-100);
    border-radius: var(--moringa-radius-lg);
    box-shadow: 0 12px 40px color-mix(in srgb, var(--moringa-navy) 10%, transparent);
    padding: 2.5rem;
}

/* Heading -> orange, centred ("Reset Password"). */
body#page-login-forgot_password .login-container h1,
body#page-login-forgot_password .login-container h2 {
    color: var(--moringa-orange);
    text-align: center;
    font-weight: 700;
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

/* Field label + input to match login. */
body#page-login-forgot_password .login-container label {
    font-weight: 700;
    color: var(--moringa-navy);
}
body#page-login-forgot_password .login-container input[type="text"],
body#page-login-forgot_password .login-container input[type="email"] {
    border-radius: var(--moringa-radius-pill);
    border: 1px solid var(--moringa-grey-300);
    padding: 0.6rem 1rem;
}
body#page-login-forgot_password .login-container input:focus {
    border-color: var(--moringa-orange);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--moringa-orange) 20%, transparent);
}

/* Search button -> pill (already orange via $primary). */
body#page-login-forgot_password .login-container button[type="submit"],
body#page-login-forgot_password .login-container .btn-primary {
    border-radius: var(--moringa-radius-pill);
    padding: 0.6rem 1.4rem;
    font-weight: 700;
}

/* ==========================================================================
   Auth pages: white button text, compact sizing, reset-page back button
   ========================================================================== */

/* Primary buttons: white text (Bootstrap auto-picks a dark contrast colour on
   the orange otherwise). Uses Bootstrap's own button vars so all states follow.
   Applies site-wide for brand consistency. */
.btn-primary {
    --bs-btn-color: var(--moringa-white);
    --bs-btn-hover-color: var(--moringa-white);
    --bs-btn-active-color: var(--moringa-white);
    --bs-btn-disabled-color: var(--moringa-white);
}
/* Outline-primary turns solid orange on hover -> keep its text white too. */
.btn-outline-primary {
    --bs-btn-hover-color: var(--moringa-white);
    --bs-btn-active-color: var(--moringa-white);
}

/* --- Compact sizing on auth pages (login + reset) ---------------------- */
body.pagelayout-login {
    font-size: 0.9375rem;
}

.moringa-login-title,
body#page-login-forgot_password .login-container h1,
body#page-login-forgot_password .login-container h2 {
    font-size: 1.4rem;
}

.moringa-login-subtitle {
    font-size: 0.85rem;
}

.moringa-loginform .form-label,
body#page-login-forgot_password .login-container label {
    font-size: 0.85rem;
}

.moringa-loginform .form-control,
body#page-login-forgot_password .login-container input[type="text"],
body#page-login-forgot_password .login-container input[type="email"] {
    font-size: 0.9rem;
    padding: 0.5rem 0.9rem;
}

/* mform section headers on the reset page (e.g. "Search by email address"). */
body#page-login-forgot_password .login-container legend,
body#page-login-forgot_password .login-container .fheader,
body#page-login-forgot_password .login-container h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--moringa-navy);
}

/* --- Reset page: injected "Go Back to Login" button ---------------------- */
body#page-login-forgot_password .moringa-backtologin {
    border-top: none;
    padding-top: 0rem;
}

body#page-login-forgot_password .moringa-backtologin .btn {
    border-radius: var(--moringa-radius-pill);
    border-color: var(--moringa-grey-300);
    color: var(--moringa-navy);
    font-weight: 600;
    padding: 0.5rem 1.4rem;
}

/* "Reset Password" title (injected via JS), centred orange. */
body#page-login-forgot_password .moringa-reset-title {
    color: var(--moringa-orange);
    text-align: center;
    font-weight: 700;
    font-size: 1.75rem;
    margin-bottom: 1.25rem;
}

/* Stack the email field: label above a full-width input (the mform default
   puts them side-by-side in a 3/9 column split). */
body#page-login-forgot_password .login-container .fitem > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}
body#page-login-forgot_password .login-container .fitem .col-form-label {
    justify-content: flex-start;
    text-align: left;
    padding-bottom: 0.35rem;
}

/* ===============================
   Module > Week > Lesson tree
================================= */

/* Collapsed by default; JS toggles .expanded on the parent node, the
   active chain (module/week containing the open activity) starts open. */
.course-tree-children {
    display: none;
}

.course-tree-node.expanded > .course-tree-children {
    display: block;
}

/* Chevron: down (collapsed) -> up (expanded), matching the design.
   Base icon is fa-chevron-right, so rotate 90deg = down, 270deg = up. */
.course-tree-section .tree-arrow i {
    transform: rotate(90deg);
    transition: transform .15s ease-in-out;
}
.course-tree-node.expanded > .course-tree-section .tree-arrow i {
    transform: rotate(270deg);
}

/* Chevron sits at the far right of the row - the legacy inline rule gives
   .course-tree-section-link width:100%, which would leave no room for a
   trailing arrow, so it needs to share the row instead. */
#section_listing .course-tree-section-link {
    width: auto;
    flex: 1;
    min-width: 0;
}


#section_listing .course-module-header {
    background: var(--moringa-navy);
    border-radius: 8px;
    margin-bottom: 6px;
}

#section_listing .course-module-header .course-tree-section-link {
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 12px 10px;
}

#section_listing .course-module-header .course-tree-section-link:hover {
    color: #fff;
}

#section_listing .course-module-header .tree-arrow {
    color: #fff;
}

/* Edit-mode pencil beside the chevron (module_tree.mustache) - links to the
   module's editable course page. */
#section_listing .course-module-header .course-module-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin-right: 4px;
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    text-decoration: none;
}

#section_listing .course-module-header .course-module-edit:hover,
#section_listing .course-module-header .course-module-edit:focus-visible {
    background: rgba(255, 255, 255, .15);
    color: #fff;
}

/* Non-enrolled sibling course: same navy family, dimmed to read as inert. */
#section_listing .course-module-node.is-locked .course-module-header {
    background: var(--moringa-navy-800, #1c2c4c);
}

#section_listing .course-module-node.is-locked .course-tree-section-link {
    color: rgba(255, 255, 255, .75);
    cursor: default;
}

#section_listing .course-module-node.is-locked .course-tree-section-link .fa-lock {
    color: rgba(255, 255, 255, .75);
}

.course-module-node > .course-tree-children {
    margin-left: 0;
    border-left: 0;
    padding-left: 12px;
}

/* Numbered leaf lesson row (deepest level = subsection) */
#section_listing .course-tree-leaf .course-tree-lesson {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 4px;
    border-bottom: 1px dotted #d7dce2;
}

#section_listing .course-tree-leaf .lesson-check {
    width: 20px;
    min-width: 20px;
    display: flex;
    justify-content: center;
}

#section_listing .course-tree-leaf .lesson-check input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--moringa-cyan);
}

#section_listing .course-tree-leaf .lesson-play-icon {
    color: var(--moringa-orange);
    font-size: 15px;
}

#section_listing .course-tree-leaf .course-tree-lesson-link {
    flex: 1;
    color: #526174;
    text-decoration: none;
    font-size: 13px;
}

#section_listing .course-tree-leaf.is-active .course-tree-lesson-link {
    color: var(--moringa-orange);
    font-weight: 700;
}

#section_listing .course-tree-leaf.is-completed .course-tree-lesson-link {
    color: var(--moringa-navy);
}

#section_listing .course-tree-leaf.is-locked .course-tree-lesson-link {
    color: #a9b1bc;
    pointer-events: none;
}

.course-page-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--moringa-navy);
    margin: 0 0 6px;
}

/* Phase locked notice page (theme/moringa/phase_locked.php) */
.moringa-phase-locked-card {
    max-width: 480px;
    margin: 60px auto;
    padding: 40px 30px;
    text-align: center;
    background: #fdfdfd;
    border: 1px dashed #dcdcdc;
    border-radius: 8px;
}

.moringa-phase-locked-icon {
    font-size: 32px;
    color: var(--moringa-orange, #f6a821);
    margin-bottom: 14px;
}

.moringa-phase-locked-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--moringa-navy);
    margin: 0 0 6px;
}

.moringa-phase-locked-course {
    font-size: 14px;
    color: #666666;
    margin: 0 0 18px;
}

.moringa-phase-locked-reason {
    font-size: 14px;
    color: #333333;
    max-width: 380px;
    margin: 0 auto 8px;
    line-height: 1.5;
}

.moringa-phase-locked-card .moringa-btn-outline {
    display: inline-block;
    margin-top: 16px;
}

.lesson-overview-label {
    font-weight: 700;
    color: var(--moringa-navy);
    margin: 0 0 10px;
}

.lesson-overview-bar {
    margin-bottom: 4px;
    gap: 14px;
    margin-left: 15px;
    margin-right: 15px;
}

@media screen and (max-width: 767px) {
    .lesson-overview-bar {
        margin-left: 0;
        margin-right: 0;
    }
    
}

.lesson-overview-bar .lesson-overview-label {
    margin: 0;
}

.focus-mode-launch-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--moringa-radius-pill);
    font-weight: 600;
    white-space: nowrap;
}

/* Resource cards fallback (section with no subsections) */
#lesson_listing .lesson-list .lesson-item {
    border: 1px solid color-mix(in srgb, var(--moringa-navy) 12%, transparent);
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 14px 16px;
}

#lesson_listing .lesson-list .lesson-item a.btn {
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    border-radius: var(--moringa-radius-pill, 999px);
    padding: 6px 18px;
}

#lesson_listing .lesson-list .lesson-item a.btn:hover {
    color: #fff;
}

#lesson_listing .lesson-list .lesson-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--moringa-navy);
    text-transform: none;
}

#lesson_listing .lesson-list .activity-date {
    font-size: 13px;
    color: #7a8699;
    font-weight: 400;
    margin: 2px 0 0;
}

/* Non-previewable resource fallback (theme/moringa/resource_download.php) */
.resource-download-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 60px 24px;
}

.resource-download-icon img {
    width: 56px;
    height: 56px;
    margin-bottom: 8px;
}

.resource-download-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--moringa-navy);
    margin: 0;
}

.resource-download-message {
    color: #7a8699;
    font-size: 14px;
    margin: 0 0 12px;
}

.resource-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: var(--moringa-radius-pill, 999px);
}
/* ==========================================================================
   Auth pages, mobile: show the admin site logo above the card title (inside
   the login card). The desktop brand panel stays hidden on mobile; visibility
   is handled by the d-lg-none class on the element in loginform.mustache.
   ========================================================================== */
.moringa-login-cardlogo {
    text-align: center;
    margin-bottom: 1rem;
}
.moringa-login-cardlogo img {
    max-width: 200px;
    max-height: 64px;
    width: auto;
    height: auto;
}


/* ==========================================================================
   Course view, mobile: the Content/Discussion tabs are relocated out of the
   sidebar drawer into the main content flow (by JS in mycourse.mustache) and
   styled as pills, per the mobile design (Content active = orange).
   ========================================================================== */
@media (max-width: 991px) {
    /* Tabs are relocated into #content_main (a flex column), so they render as
       a full-width row above the lesson content. */
    .cst_tabbers-mobile {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        list-style: none;
        border: none;
        background: transparent;      /* no gray container behind the buttons */
        margin: 0 0 16px;             /* space before the panel/content below */
        padding: 8px 16px 12px 16px;
    }
    .cst_tabbers-mobile li {
        margin: 0;
        padding: 0;
        flex-grow: inherit !important;
    }
    .cst_tabbers-mobile button.nav-link {
        border: none;
        border-radius: 100px;
        background: #e9ecef;          /* light gray for the inactive tab */
        color: var(--moringa-navy);
        font-weight: 600;
        padding: 8px 18px;
    }
    .cst_tabbers-mobile button.nav-link.active {
        background: var(--moringa-orange);
        color: #fff;
    }
    .cst_tabbers-mobile button.nav-link i {
        margin-right: 6px;
    }
}

/* ==========================================================================
   Course view, mobile: remove the gray band behind the relocated tabs, and
   keep any activity content within the device width (or internally scrollable).
   ========================================================================== */
@media (max-width: 991px) {
    /* The <ul> is already transparent; the gray comes from the content
       container showing through where the tab row sits. Make it transparent —
       #region-main is already transparent and activity content has its own bg. */
    .cst_tabbers-mobile {
        background: transparent !important;
    }
    .pagelayout-incourse #course_main #content_main,
    .pagelayout-incourse .cst_wrapper_parent {
        background: transparent !important;
    }
    /* Inactive tab = light gray, active stays orange. */
    .cst_tabbers-mobile button.nav-link:not(.active) {
        background: #e9ecef !important;
    }

    /* Content must fit the viewport or scroll internally (no page distortion). */
    #course_main #content_main #region-main,
    #course_main #content_main .module_view_section,
    #course_main #content_main #activity-content {
        max-width: 100%;
        overflow-x: auto;
    }
    #course_main #content_main iframe,
    #course_main #content_main embed,
    #course_main #content_main object,
    #course_main #content_main .resourcecontent.resourcepdf,
    #course_main #content_main iframe#resourceobject {
        max-width: 100% !important;
        width: 100% !important;
    }
    #course_main #content_main img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ==========================================================================
   Course drawer (Image 3): week/sub-section panels + header
   ========================================================================== */
/* Every branch header is a clickable row (link + chevron). */
#section_listing .course-tree-section {
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* Week / sub-section branches: light-blue panels (modules stay navy). */
#section_listing .course-tree-section:not(.course-module-header) {
    background: var(--moringa-light-blue, #eef7fc);
    border-radius: 8px;
    margin-bottom: 6px;
}
#section_listing .course-tree-section:not(.course-module-header) .course-tree-section-link {
    color: var(--moringa-navy);
    font-weight: 700;
    font-size: 14px;
    padding: 10px;
}
#section_listing .course-tree-section:not(.course-module-header) .tree-arrow {
    color: var(--moringa-navy);
    padding-right: 8px;
}

/* Drawer header: course title + close (X). Mobile affordance — the sidebar is
   always visible on desktop, so the header is hidden there. */
.course-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}
.course-drawer-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--moringa-navy);
}
.course-drawer-close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--moringa-grey-100, #eef2f7);
    color: var(--moringa-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
@media (min-width: 992px) {
    .course-drawer-header {
        display: none;
    }
}
/* ==========================================================================
   Course view, mobile: centre the course title, and size/centre the custom
   arrow icon in the drawer toggle.
   ========================================================================== */
@media (max-width: 991px) {
    .course-page-title {
        text-align: center;
    }
    /* Centre the custom arrow icon inside the round toggle. */
    .mobile-sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mobile-sidebar-toggle img,
    .mobile-sidebar-toggle .icon {
        width: 20px !important;
        height: 20px !important;
        margin: 0 !important;
    }
}
/* ==========================================================================
   Assignment overview (mod_assign) redesign.
   Rendered by theme_moringa\output\mod_assign\renderer via the
   mod_assign_overview / mod_assign_status templates. The two cards sit
   flush against each other (no top border / margin on the bottom card) so
   they read as one continuous surface.
   ========================================================================== */
.moringa-assign-coursetitle {
    max-width: 900px;
    margin: 0 auto 20px;
}
.moringa-assign-card {
    background: var(--moringa-white);
    border: 1px solid var(--moringa-grey-200);
    border-radius: var(--moringa-radius-lg, 16px);
    padding: 32px;
    max-width: 900px;
    margin: 0 auto;
}
.moringa-assign-card--top {
    padding-bottom: 24px;
}
.moringa-assign-card--bottom {
    border: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: -1px;
    padding-top: 0px;
}

.moringa-assign-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.moringa-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: var(--moringa-radius-pill, 999px);
}
.moringa-badge--type {
    background: rgba(250, 81, 15, 0.12);
    color: var(--moringa-orange);
}
.moringa-badge--week {
    background: rgba(10, 150, 193, 0.12);
    color: var(--moringa-cyan);
}
.moringa-badge--team {
    background: var(--moringa-grey-100);
    color: var(--moringa-navy);
}

.moringa-assign-title {
    color: var(--moringa-navy);
    font-weight: 700;
    font-size: 24px;
    margin: 0 0 24px;
}

.moringa-assign-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.moringa-meta-item {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--moringa-grey-200);
    border-radius: var(--moringa-radius, 12px);
    padding: 14px 16px;
}
.moringa-meta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--moringa-grey-50);
    color: var(--moringa-navy);
}
.moringa-meta-label {
    color: var(--moringa-grey-600);
    font-size: 12px;
    margin-bottom: 2px;
}
.moringa-meta-value {
    color: var(--moringa-navy);
    font-weight: 700;
    font-size: 14px;
}

.moringa-assign-section {
    margin-top: 8px;
}
.moringa-assign-section h3 {
    color: var(--moringa-navy);
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 12px;
}
.moringa-assign-intro {
    color: var(--moringa-grey-800);
    font-size: 15px;
    line-height: 1.6;
}

.moringa-assign-rubric table.criteria {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin-top: 8px;
}
.moringa-assign-rubric table.criteria td.description {
    width: 25%;
}
.moringa-assign-rubric table.criteria td.levels {
    width: 75%;
}
.moringa-assign-rubric table.criteria td.levels table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
.moringa-assign-rubric table.criteria th,
.moringa-assign-rubric table.criteria td {
    border: 1px solid var(--moringa-grey-200);
    padding: 12px;
    text-align: left;
    vertical-align: top;
    font-size: 14px;
}
.moringa-assign-rubric table.criteria th {
    background: var(--moringa-grey-50);
    color: var(--moringa-navy);
    font-weight: 700;
}

.moringa-assign-submitbar {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}
/* Back button sits at the far left; margin-right:auto keeps the submit button
   (or the closed-message) pinned to the right, and preserves the right-aligned
   layout unchanged when there is no back button. */
.moringa-btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-right: auto;
}
.moringa-btn-submit {
    background: var(--moringa-orange);
    color: var(--moringa-white);
    font-weight: 500;
    font-size: 15px;
    padding: 10px 25px;
    border-radius: var(--moringa-radius-pill, 999px);
    border: none;
}
.moringa-btn-submit:hover {
    background: var(--moringa-navy);
    color: var(--moringa-white);
}
.moringa-btn-submit:disabled {
    background: var(--moringa-grey-300, #d0d5dd);
    color: var(--moringa-grey-600);
    cursor: not-allowed;
}
.moringa-btn-submit:disabled:hover {
    background: var(--moringa-grey-300, #d0d5dd);
}
.moringa-assign-closed {
    color: var(--moringa-grey-600);
    font-size: 14px;
    margin: 0;
}

/* ==========================================================================
   Quiz overview (mod_quiz) redesign (local_quizstart/view.php). Rendered by
   theme_moringa\output\mod_quiz_renderer::render_moringa_quiz_overview() via
   the mod_quiz_overview template. Reuses .moringa-meta-item/-icon/-label/
   -value from the assignment overview above - same info-card look, different
   data.
   ========================================================================== */
.moringa-quiz-card {
    background: var(--moringa-white);
    border: 1px solid var(--moringa-grey-200);
    border-radius: var(--moringa-radius-lg, 16px);
    padding: 32px;
    max-width: 900px;
    margin: 0 auto;
}
.moringa-quiz-title {
    color: var(--moringa-navy);
    font-weight: 700;
    font-size: 24px;
    margin: 0 0 8px;
}
.moringa-quiz-intro {
    color: var(--moringa-grey-600);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
}
.moringa-quiz-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding-top: 24px;
    margin-bottom: 24px;
    border-top: 1px solid var(--moringa-grey-200);
}
.moringa-quiz-section {
    margin-top: 8px;
}
.moringa-quiz-section h3 {
    color: var(--moringa-navy);
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 12px;
}
.moringa-quiz-timewarning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(250, 81, 15, 0.1);
    color: var(--moringa-orange);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    padding: 12px 16px;
    border-radius: var(--moringa-radius, 12px);
    margin: 16px 0;
}
.moringa-quiz-timewarning .fa-exclamation-triangle {
    margin-top: 2px;
}
.moringa-quiz-instructions {
    list-style: none;
    margin: 0;
    padding: 0;
}
.moringa-quiz-instructions li {
    position: relative;
    color: var(--moringa-grey-800);
    font-size: 15px;
    line-height: 1.6;
    padding-left: 20px;
    margin-bottom: 8px;
}
.moringa-quiz-instructions li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--moringa-orange);
}
.moringa-quiz-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
}
.moringa-btn-startquiz {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.moringa-quiz-backlink {
    color: var(--moringa-grey-600);
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
}

/* .moringa-btn-outline itself is already defined below (shared with the
   assignment "Submitted" screen's Edit/Remove buttons) - reused as-is here
   for the "Previous" attempt-nav button and the timer's Hide/Show toggle. */

/* ==========================================================================
   Quiz results page (local_quizstart/results.php) redesign. Rendered by
   theme_moringa\output\mod_quiz_renderer::render_moringa_quiz_results() via
   the mod_quiz_results template. Reuses .moringa-meta-item/-icon/-label/
   -value from the quiz overview card above for the Score/Time Taken/
   Attempts tiles, and .moringa-btn-submit/-outline/-startquiz and
   .moringa-quiz-backlink/-preflight for the actions.
   ========================================================================== */
.moringa-quizresults-card {
    background: var(--moringa-white);
    border: 1px solid var(--moringa-grey-200);
    border-radius: var(--moringa-radius-lg, 16px);
    padding: 40px;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}
.moringa-quizresults-title {
    color: var(--moringa-navy);
    font-weight: 700;
    font-size: 28px;
    margin: 0 0 16px;
}
.moringa-quizresults-percentage {
    color: var(--moringa-navy);
    font-weight: 800;
    font-size: 56px;
    line-height: 1;
    margin: 0 0 32px;
}
.moringa-quizresults-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
    text-align: left;
}
.moringa-quizresults-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 24px;
}
.moringa-quizresults-reviewlocked {
    text-align: left;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}
.moringa-quizresults-actions .btn {
    padding: 12px 32px;
}

/* ==========================================================================
   Quiz attempt page (mod_quiz/attempt.php, one question per page) redesign.
   Rendered by theme_moringa\output\mod_quiz_renderer::attempt_page() via the
   mod_quiz_attempt_header/mod_quiz_attempt_navigation templates, plus CSS
   re-skinning of the question engine's own markup (core_question_renderer's
   .que/.info/.content/.formulation structure, and qtype_multichoice's/
   qtype_truefalse's .answer rows) - the question HTML itself, and every
   qtype's actual input controls, are still core's, so grading/behaviour
   logic is untouched.
   ========================================================================== */
.moringa-quiz-attempt-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto 16px;
}
.moringa-quiz-attempt-title {
    color: var(--moringa-navy);
    font-weight: 700;
    font-size: 24px;
    margin: 0;
}

/* Timer pill (mod_quiz/timer theme override) - #quiz-timer-wrapper etc ids
   are core's own, selected directly by M.mod_quiz.timer (mod/quiz/module.js) -
   only the classes here change how they look. */
.moringa-quiz-timer-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
}
/* #quiz-timer (an ID selector) picks up a background/colour from elsewhere
   in core's own CSS - matched on id+class here, with !important, so this
   brand styling reliably wins regardless of that rule's specificity or load
   order. */
#quiz-timer.moringa-quiz-timer {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(250, 81, 15, 0.1) !important;
    color: var(--moringa-orange) !important;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: var(--moringa-radius-pill, 999px);
}
.moringa-quiz-timer-toggle {
    padding: 10px 20px;
}

.moringa-quiz-attempt-progress-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    max-width: 900px;
    margin: 0 auto 8px;
}
.moringa-quiz-attempt-progress-label {
    color: var(--moringa-navy);
    font-weight: 700;
    font-size: 15px;
}
.moringa-quiz-attempt-progress-percent {
    color: var(--moringa-grey-600);
    font-size: 14px;
}
.moringa-quiz-attempt-progress-bar {
    max-width: 900px;
    height: 6px;
    margin: 0 auto 24px;
    background: var(--moringa-grey-200);
    border-radius: var(--moringa-radius-pill, 999px);
    overflow: hidden;
}
.moringa-quiz-attempt-progress-fill {
    height: 100%;
    background: var(--moringa-orange);
    border-radius: var(--moringa-radius-pill, 999px);
    transition: width 0.2s ease;
}

/* The question itself - core_question_renderer::question()'s markup
   (question/engine/renderer.php). Every .que is one question. */
#responseform {
    max-width: 900px;
    margin: 0 auto;
}
.que {
    position: relative;
    background: var(--moringa-white);
    border: 1px solid var(--moringa-grey-200);
    border-radius: var(--moringa-radius-lg, 16px);
    padding: 32px;
    margin-bottom: 24px;
}
.que .info h3.no {
    display: inline-block;
    background: var(--moringa-navy);
    color: var(--moringa-white);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: var(--moringa-radius-pill, 999px);
    margin: 0 0 16px;
}
.que .info h3.no .qno {
    font-size: inherit;
}
/* State/mark text (e.g. "Not yet answered") isn't part of this design, but
   stays available to screen readers rather than being removed outright. */
.que .info .state,
.que .info .grade {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.que .info .questionflag {
    position: absolute;
    top: 28px;
    right: 32px;
}
.que .info .questionflag .questionflagimage {
    width: 20px;
    height: 20px;
}
/* question/flags.js (M.core_question_flags) replaces the server-rendered
   label+checkbox with its own <a class="aabtn">, containing the flag icon
   followed by bare "Flag question"/"Unflag question" text - not wrapped in
   its own element, so it can't be hidden with a text-only selector.
   font-size: 0 hides that text without touching the icon, which is sized in
   absolute px above rather than relative to font-size; the text stays
   present (and readable to screen readers, via the link's own accessible
   name - see aria-label on the <a> itself) for anyone not relying on it
   being visible. !important because mod/quiz's own styles.css targets the
   same element with a same-class-count-but-more-elements selector
   (body.path-mod-quiz .que .info .questionflag a), which specificity ranks
   above this one despite looking less specific at a glance. */
.que .info .questionflag .aabtn {
    font-size: 0 !important;
}
.que .content {
    clear: both;
}
.que .qtext {
    color: var(--moringa-navy);
    font-weight: 700;
    font-size: 19px;
    line-height: 1.4;
    margin-bottom: 20px;
}
/* The "Select one:"/"Select one or more:" instruction reads fine to screen
   readers as the fieldset's legend, but the design doesn't show it. */
.que fieldset.ablock > legend.prompt {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Lettered-option rows - shared by qtype_multichoice (theme_moringa's
   single_renderer/multi_renderer strip the "A. " to a bare "A" so it fits
   this badge) and qtype_truefalse (no per-choice numbering of its own, so
   the "A"/"B" badge is added here purely via CSS ::before, keyed off row
   position). */
.que.multichoice .answer > div,
.que.truefalse .answer > div {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--moringa-grey-200);
    border-radius: var(--moringa-radius, 12px);
    padding: 14px 44px 14px 14px;
    margin-bottom: 12px;
    cursor: pointer;
}
.que.multichoice .answer > div:last-child,
.que.truefalse .answer > div:last-child {
    margin-bottom: 0;
}
.que .answer input[type="radio"],
.que .answer input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.que.multichoice .answernumber {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: var(--moringa-grey-100);
    color: var(--moringa-navy);
    font-weight: 700;
    font-size: 13px;
    border-radius: 6px;
}
.que.truefalse .answer > div::before {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: var(--moringa-grey-100);
    color: var(--moringa-navy);
    font-weight: 700;
    font-size: 13px;
    border-radius: 6px;
}
.que.truefalse .answer > div:nth-child(1)::before {
    content: 'A';
}
.que.truefalse .answer > div:nth-child(2)::before {
    content: 'B';
}
.que.multichoice .answer .flex-fill,
.que.truefalse .answer label {
    color: var(--moringa-grey-800);
    font-size: 15px;
    margin: 0;
}
/* qtype_truefalse's <label> only wraps the word "True"/"False" itself -
   unlike multichoice, which has its own JS (qtype_multichoice/answers)
   making its whole answer-label div clickable, true/false relies on the
   browser's native label-click-toggles-its-input behaviour, which only
   fires for clicks that land on the label text. Stretched to fill the row
   as a flex child (the row is already display:flex from the .answer > div
   rule above) so clicking anywhere in the row - matching the row's own
   cursor:pointer affordance - actually hits the label. */
.que.truefalse .answer label {
    flex: 1;
    align-self: stretch;
    display: flex;
    align-items: center;
    cursor: pointer;
}
/* Selected, still-attempting state (no correctness known yet). */
.que.multichoice .answer > div:has(input:checked),
.que.truefalse .answer > div:has(input:checked) {
    background: rgba(10, 150, 193, 0.08);
    border-color: var(--moringa-cyan);
}
.que.multichoice .answer > div:has(input:checked) .answernumber,
.que.truefalse .answer > div:has(input:checked)::before {
    background: var(--moringa-cyan);
    color: var(--moringa-white);
}
/* Review-mode correctness (options.correctness true - only ever set once a
   student's own attempt is being reviewed, per mod_quiz's per-quiz "Review
   options" - core adds these classes itself, see qtype_*::feedback_class()). */
.que.multichoice .answer > div.correct,
.que.truefalse .answer > div.correct {
    background: rgba(0, 166, 81, 0.08);
    border-color: var(--moringa-green, #00a651);
}
.que.multichoice .answer > div.correct .answernumber,
.que.truefalse .answer > div.correct::before {
    background: var(--moringa-green, #00a651);
    color: var(--moringa-white);
}
.que.multichoice .answer > div.incorrect,
.que.truefalse .answer > div.incorrect,
.que.multichoice .answer > div.partiallycorrect,
.que.truefalse .answer > div.partiallycorrect {
    background: rgba(220, 53, 69, 0.08);
    border-color: #dc3545;
}
.que.multichoice .answer > div.incorrect .answernumber,
.que.truefalse .answer > div.incorrect::before,
.que.multichoice .answer > div.partiallycorrect .answernumber,
.que.truefalse .answer > div.partiallycorrect::before {
    background: #dc3545;
    color: var(--moringa-white);
}
.que .answer .feedbackspan,
.que .answer img.icon {
    display: none;
}

/* Every other bundled question type (short answer, essay, numerical,
   calculated, matching, cloze, description, ...) keeps its own native
   controls - just brought into the same brand spacing/colour language. */
.que fieldset.ablock input[type="text"],
.que fieldset.ablock input[type="number"],
.que fieldset.ablock textarea,
.que fieldset.ablock select {
    border: 1px solid var(--moringa-grey-200);
    border-radius: var(--moringa-radius, 12px);
    padding: 10px 14px;
    font-size: 15px;
}
.que fieldset.ablock input[type="text"]:focus,
.que fieldset.ablock input[type="number"]:focus,
.que fieldset.ablock textarea:focus,
.que fieldset.ablock select:focus {
    border-color: var(--moringa-cyan);
    outline: none;
    box-shadow: 0 0 0 3px rgba(10, 150, 193, 0.15);
}
.que .outcome,
.que .comment {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--moringa-grey-200);
    font-size: 14px;
}

.moringa-quiz-attempt-navigation {
    display: flex;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
}
.moringa-quiz-attempt-navigation .mod_quiz-next-nav {
    margin-left: auto;
}
/* Moove's own scss/moove/_quiz.scss @extends .btn/.btn-primary onto
   .mod_quiz-next-nav, which compiles those rules' selectors to include
   "#page-mod-quiz-attempt .mod_quiz-next-nav" - an id-scoped selector that
   outranks .moringa-btn-submit alone (a single class) regardless of load
   order, overriding this button back to Bootstrap's default primary-button
   look (square-ish corners, Bootstrap's own primary colour) instead of the
   orange pill every other .moringa-btn-submit in the theme gets. !important
   here to win regardless, same reasoning as .questionflag .aabtn further up. */
#mod_quiz-next-nav.moringa-btn-submit {
    background: var(--moringa-orange) !important;
    color: var(--moringa-white) !important;
    font-weight: 700 !important;
    padding: 12px 32px !important;
    border-radius: var(--moringa-radius-pill, 999px) !important;
    border: none !important;
}
.moringa-quiz-attempt-backlink-row {
    text-align: center;
    margin: 16px auto 0;
}

/* mod/quiz/attempt.php adds its own question-navigation panel (the numbered
   question grid + "Finish attempt" button) to the side-pre block region as a
   "fake block" before this theme's layout ever runs - not part of this
   design. Hidden rather than suppressed server-side so the flag-sync JS that
   targets it (M.mod_quiz.nav.update_flag_state, mod/quiz/module.js) still
   has a real element to update. */
.moringa-quiz-attempt-chrome #theme_boost-drawers-blocks,
.moringa-quiz-attempt-chrome .drawer-toggler.drawer-right-toggle {
    display: none !important;
}

/* ==========================================================================
   Quiz "Review Your Answers" summary page (mod_quiz/summary.php) redesign.
   Rendered by theme_moringa\output\mod_quiz_renderer::summary_page() via the
   mod_quiz_summary template. Reuses .moringa-quiz-attempt-title-row/-title
   from the attempt page above for the title+timer row.
   ========================================================================== */
.moringa-summary-subtitle {
    max-width: 900px;
    margin: 0 auto 16px;
    color: var(--moringa-grey-600);
    font-size: 15px;
}
.moringa-summary-chip {
    display: table;
    max-width: 900px;
    margin: 0 auto 20px;
    background: var(--moringa-navy);
    color: var(--moringa-white);
    font-weight: 700;
    font-size: 13px;
    padding: 8px 18px;
    border-radius: var(--moringa-radius-pill, 999px);
}
.moringa-summary-questions {
    max-width: 900px;
    margin: 0 auto;
}
.moringa-summary-card {
    position: relative;
    background: var(--moringa-white);
    border: 1px solid var(--moringa-cyan);
    border-radius: var(--moringa-radius-lg, 16px);
    padding: 24px;
    margin-bottom: 16px;
}
.moringa-summary-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.moringa-summary-card-badges {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.moringa-badge--qnum {
    display: inline-block;
    background: var(--moringa-navy);
    color: var(--moringa-white);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: var(--moringa-radius-pill, 999px);
    text-decoration: none;
}
.moringa-badge--answered,
.moringa-badge--notanswered {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.moringa-badge--answered {
    color: var(--moringa-cyan);
}
.moringa-badge--notanswered {
    color: var(--moringa-grey-600);
}
.moringa-summary-card-icon {
    font-size: 18px;
    line-height: 1;
}
.moringa-summary-card-icon .fa-flag {
    color: var(--moringa-cyan);
}
.moringa-summary-card-text {
    color: var(--moringa-navy);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 12px;
}
.moringa-summary-card-response {
    background: rgba(10, 150, 193, 0.08);
    border-radius: var(--moringa-radius, 12px);
    padding: 12px 16px;
    font-size: 14px;
}
.moringa-summary-card-response-label {
    color: var(--moringa-cyan);
    font-weight: 700;
    margin-right: 6px;
}
.moringa-summary-card-response-text {
    color: var(--moringa-grey-800);
}

.moringa-summary-actionbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    max-width: 900px;
    margin: 8px auto 0;
    padding: 16px 24px;
    background: var(--moringa-white);
    border: 1px solid var(--moringa-grey-200);
    border-radius: var(--moringa-radius-lg, 16px);
}
.moringa-summary-actionbar-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--moringa-grey-600);
    font-size: 14px;
    margin: 0;
}
.moringa-summary-actionbar-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ==========================================================================
   Quiz "Answer Review" page (mod_quiz/review.php) redesign. Rendered by
   theme_moringa\output\mod_quiz_renderer::moringa_review_content()/
   review_next_navigation() via the mod_quiz_review/mod_quiz_review_footer
   templates. Reuses .moringa-quiz-attempt-title-row/-title from the attempt
   page above for the title row, and .moringa-summary-actionbar/-info/
   -buttons from the summary page above for the footer bar - only the
   question cards themselves (still core's own .que markup - see the
   docblock on moringa_review_content()) and the percentage badge/filter
   tabs below are specific to this page, scoped to .moringa-quiz-review-chrome
   so the differently-designed attempt page isn't affected.
   ========================================================================== */
.moringa-review-percentage {
    display: inline-block;
    border: 1px solid var(--moringa-cyan);
    color: var(--moringa-cyan);
    font-weight: 700;
    font-size: 15px;
    padding: 6px 20px;
    border-radius: var(--moringa-radius-pill, 999px);
    flex-shrink: 0;
}
.moringa-review-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 900px;
    margin: 0 auto 24px;
}
.moringa-review-tab {
    background: var(--moringa-white);
    color: var(--moringa-navy);
    font-weight: 700;
    font-size: 14px;
    border: 1px solid var(--moringa-grey-300);
    padding: 10px 20px;
    border-radius: var(--moringa-radius-pill, 999px);
    cursor: pointer;
}
.moringa-review-tab.active {
    background: var(--moringa-navy);
    color: var(--moringa-white);
    border-color: var(--moringa-navy);
}
.moringa-review-questions {
    max-width: 900px;
    margin: 0 auto;
}

/* Core's own review-mode output inside each question (correctness classes
   on .que itself, the answer-option highlighting) is otherwise untouched
   from the attempt page's .que styling above - only the bits that page
   never shows (state text is screen-reader-only there, since nothing is
   graded yet) are un-hidden and restyled here for review.

   The question-number heading isn't core's own <h3 class="no"> here - this
   site's actual active theme is Moove (theme_moringa extends it, and has no
   core_question_renderer override of its own), and Moove ships its own
   question_renderer::info()/number() (theme/moove/classes/output/core/
   question_renderer.php) producing <h4 class="h3 w-100 mb-2"> instead, with
   a Bootstrap "w-100" utility (width: 100% !important) that would otherwise
   force the badge onto its own full-width row instead of sitting inline
   next to .state - the !important width override below is what undoes
   that, not decoration. */
.moringa-quiz-review-chrome .que .info h4.h3 {
    display: inline-block;
    width: auto !important;
    background: var(--moringa-cyan);
    color: var(--moringa-white);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: var(--moringa-radius-pill, 999px);
    margin: 0 10px 16px 0;
}
.moringa-quiz-review-chrome .que .info .state {
    position: static;
    display: inline-block;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0 0 16px;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: 0;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    vertical-align: middle;
}
.moringa-quiz-review-chrome .que.correct .info .state {
    color: var(--moringa-green, #00a651);
}
.moringa-quiz-review-chrome .que.incorrect .info .state,
.moringa-quiz-review-chrome .que.partiallycorrect .info .state {
    color: #dc3545;
}
.moringa-quiz-review-chrome .que .generalfeedback,
.moringa-quiz-review-chrome .que .specificfeedback,
.moringa-quiz-review-chrome .que .rightanswer {
    background: var(--moringa-grey-50);
    border-radius: var(--moringa-radius, 12px);
    padding: 16px 20px;
    margin-top: 12px;
    font-size: 14px;
    color: var(--moringa-grey-800);
    line-height: 1.6;
}
/* The answer row's own real correctness icon (a green/red <i> Moove already
   renders per-option in review mode) is enough on its own - suppress the
   CSS-drawn checkmark the attempt page adds for "this option is currently
   selected" (::after on :has(input:checked), further up this file), which
   would otherwise still fire here too since a reviewed attempt's previously-
   selected option is still `checked`, just now `disabled`, and would sit
   right on top of core's own icon. */
.moringa-quiz-review-chrome .que.multichoice .answer > div:has(input:checked)::after,
.moringa-quiz-review-chrome .que.truefalse .answer > div:has(input:checked)::after {
    content: none;
}

/* Bespoke submit-confirmation popup - see the docblock on
   mod_quiz_renderer::summary_page() for why this isn't core's
   mod_quiz/submission_confirmation modal. */
.moringa-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(16, 31, 60, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: 16px;
}
.moringa-modal-card {
    background: var(--moringa-white);
    border-radius: var(--moringa-radius-lg, 16px);
    padding: 32px;
    max-width: 420px;
    width: 100%;
    text-align: center;
}
.moringa-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    background: rgba(250, 81, 15, 0.12);
    color: var(--moringa-orange);
    font-size: 22px;
    border-radius: 50%;
}
.moringa-modal-title {
    color: var(--moringa-navy);
    font-weight: 700;
    font-size: 20px;
    margin: 0 0 8px;
}
.moringa-modal-subtitle {
    color: var(--moringa-grey-600);
    font-size: 14px;
    margin: 0 0 16px;
}
.moringa-modal-warning {
    background: rgba(250, 81, 15, 0.1);
    color: var(--moringa-orange);
    font-size: 13px;
    font-weight: 700;
    padding: 10px 14px;
    border-radius: var(--moringa-radius, 12px);
    margin: 0 0 16px;
}
.moringa-modal-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.moringa-modal-actions .moringa-btn-outline,
.moringa-modal-actions .moringa-btn-submit {
    padding: 10px 20px;
    font-size: 13px;
    white-space: nowrap;
}
.moringa-modal-field-input {
    display: block;
    width: 100%;
    border-radius: var(--moringa-radius, 12px);
    border: 1px solid var(--moringa-grey-300);
    padding: 10px 14px;
    font-size: 14px;
    margin: 0 0 16px;
}
.moringa-modal-field-input:focus {
    outline: none;
    border-color: var(--moringa-orange);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--moringa-orange) 20%, transparent);
}

/* Attempt-picker popup - opened from the quiz results card's "Review
   Answers" button once a student has more than one reviewable attempt, in
   place of that button linking straight to the single most recent one. */
.moringa-modal-card--attempts {
    max-width: 360px;
    text-align: left;
}
.moringa-modal-card--attempts .moringa-modal-title,
.moringa-modal-card--attempts .moringa-modal-subtitle {
    text-align: center;
}
.moringa-attempts-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.moringa-attempts-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--moringa-grey-200, #e5e7eb);
    border-radius: var(--moringa-radius, 12px);
    color: var(--moringa-navy);
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.moringa-attempts-list-item:hover,
.moringa-attempts-list-item:focus {
    border-color: var(--moringa-orange);
    background: rgba(250, 81, 15, 0.06);
}
.moringa-attempts-list-item--latest {
    border-color: var(--moringa-orange);
}
.moringa-attempts-list-label {
    font-weight: 700;
    font-size: 14px;
}
.moringa-attempts-list-score {
    color: var(--moringa-grey-600);
    font-size: 13px;
}

/* ==========================================================================
   Assignment "Submission Received" confirmation page (local_assignstart/
   submitted.php). Rendered by theme_moringa\output\mod_assign_renderer::
   render_moringa_assign_submitted() via the mod_assign_submitted template.
   ========================================================================== */
.moringa-submitted-card {
    background: var(--moringa-white);
    border: 1px solid var(--moringa-grey-200);
    border-radius: var(--moringa-radius-lg, 16px);
    padding: 40px;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}
.moringa-submitted-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.12);
    color: var(--moringa-success);
    font-size: 28px;
}
.moringa-submitted-title {
    color: var(--moringa-navy);
    font-weight: 700;
    font-size: 24px;
    margin: 0 0 8px;
}
.moringa-submitted-subtitle {
    color: var(--moringa-grey-600);
    font-size: 15px;
    margin: 0 0 24px;
}
.moringa-submitted-info {
    text-align: left;
    background: var(--moringa-grey-50);
    border-radius: var(--moringa-radius, 12px);
    padding: 8px 20px;
    margin-bottom: 20px;
}
.moringa-submitted-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--moringa-grey-200);
}
.moringa-submitted-row:last-child {
    border-bottom: none;
}
.moringa-submitted-label {
    color: var(--moringa-grey-600);
    font-size: 14px;
    flex-shrink: 0;
}
.moringa-submitted-value {
    color: var(--moringa-navy);
    font-weight: 700;
    font-size: 14px;
    text-align: right;
}
.moringa-submitted-badge {
    display: inline-block;
    background: rgba(34, 197, 94, 0.12);
    color: var(--moringa-success);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: var(--moringa-radius-pill, 999px);
}
.moringa-submitted-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    background: rgba(250, 204, 21, 0.15);
    color: var(--moringa-navy);
    font-size: 14px;
    border-radius: var(--moringa-radius, 12px);
    padding: 14px 18px;
    margin-bottom: 24px;
}
.moringa-submitted-banner i {
    color: var(--moringa-warning);
    font-size: 18px;
}
.moringa-submitted-waitingname {
    display: inline-block;
    background: var(--moringa-white);
    border-radius: var(--moringa-radius-pill, 999px);
    padding: 2px 10px;
    margin: 2px 4px 2px 0;
    font-weight: 700;
}
.moringa-submitted-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
/* Three actions (Edit / Remove / Return to course) now share this row -
   shrink text/padding relative to the buttons elsewhere in the theme so
   each label stays on one line instead of wrapping as the buttons narrow. */
.moringa-submitted-actions .btn {
    padding: 10px 16px;
    font-size: 13px;
    white-space: nowrap;
}
.moringa-btn-outline {
    background: var(--moringa-white);
    color: var(--moringa-navy);
    font-weight: 500;
    padding: 10px 25px;
    font-size: 15px;
    border-radius: var(--moringa-radius-pill, 999px);
    border: 1px solid var(--moringa-grey-300);
}
.moringa-btn-outline:hover {
    background: var(--moringa-grey-50) !important;
    color: var(--moringa-navy) !important;
    background: var(--moringa-grey-50);
    color: var(--moringa-navy) !important;
}
.moringa-btn-outline-danger {
    background: var(--moringa-white);
    color: var(--moringa-danger);
    font-weight: 700;
    padding: 12px 32px;
    border-radius: var(--moringa-radius-pill, 999px);
    border: 1px solid var(--moringa-danger);
}
.moringa-btn-outline-danger:hover {
    background: rgba(220, 38, 38, 0.08);
    color: var(--moringa-danger);
}
.moringa-icon-danger {
    background: rgba(220, 38, 38, 0.12);
    color: var(--moringa-danger);
}
.moringa-btn-danger {
    background: var(--moringa-danger);
    color: var(--moringa-white);
    font-weight: 700;
    padding: 12px 32px;
    border-radius: var(--moringa-radius-pill, 999px);
    border: none;
}
.moringa-btn-danger:hover {
    background: #b91c1c;
    color: var(--moringa-white);
}
.moringa-submitted-actions .moringa-inline-form {
    margin: 0;
}
/* Inline "Remove submission?" modal on the submitted card - the modal itself
   is just a positioning/backdrop shell, .moringa-submitted-card supplies the
   visible card chrome (border, radius, padding), so the modal's own default
   chrome is stripped to avoid a double box. */
.moringa-remove-modal .modal-content {
    background: transparent;
    border: none;
    box-shadow: none;
}
.moringa-remove-modal .moringa-submitted-card {
    margin: 0;
}

/* ==========================================================================
   Assignment graded-feedback page (local_assignstart/feedback.php). Rendered
   by theme_moringa\output\mod_assign_renderer::render_moringa_assign_feedback()
   via the mod_assign_feedback template.
   ========================================================================== */
.moringa-feedback-card {
    background: var(--moringa-white);
    border: 1px solid var(--moringa-grey-200);
    border-radius: var(--moringa-radius-lg, 16px);
    box-shadow: 0 12px 40px color-mix(in srgb, var(--moringa-navy) 10%, transparent);
    padding: 40px;
    max-width: 800px;
    margin: 0 auto;
}
.moringa-feedback-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.moringa-badge--graded {
    background: rgba(34, 197, 94, 0.12);
    color: var(--moringa-success);
}
.moringa-feedback-title {
    color: var(--moringa-navy);
    font-weight: 700;
    font-size: 24px;
    margin: 10px 0 0;
}
.moringa-feedback-scorebox {
    text-align: right;
    flex-shrink: 0;
}
.moringa-feedback-score {
    color: var(--moringa-orange);
    font-weight: 700;
    font-size: 40px;
    line-height: 1;
}
.moringa-feedback-score--text {
    font-size: 24px;
}
.moringa-feedback-gradeddate {
    color: var(--moringa-grey-600);
    font-size: 13px;
    margin-top: 4px;
}
.moringa-feedback-divider {
    border: none;
    border-top: 1px solid var(--moringa-grey-200);
    margin: 24px 0;
}
.moringa-feedback-section h3 {
    color: var(--moringa-navy);
    font-weight: 700;
    font-size: 18px;
    margin: 0 0 16px;
}
.moringa-feedback-instructor {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.moringa-feedback-graderinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    width: 90px;
    text-align: center;
}
.moringa-feedback-graderinfo img,
.moringa-feedback-graderinfo .userpicture {
    border-radius: 50%;
}
.moringa-feedback-gradername {
    color: var(--moringa-navy);
    font-weight: 700;
    font-size: 13px;
}
.moringa-feedback-comment {
    flex: 1;
    background: var(--moringa-grey-50);
    border-radius: var(--moringa-radius, 12px);
    padding: 16px 20px;
    color: var(--moringa-grey-800);
    font-size: 14px;
    font-style: italic;
    line-height: 1.6;
}
.moringa-feedback-comment p:last-child {
    margin-bottom: 0;
}
.moringa-feedback-tablewrap {
    overflow-x: auto;
}
.moringa-feedback-rubrictable {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.moringa-feedback-rubrictable th,
.moringa-feedback-rubrictable td {
    border-bottom: 1px solid var(--moringa-grey-200);
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
}
.moringa-feedback-rubrictable th {
    background: var(--moringa-grey-50);
    color: var(--moringa-navy);
    font-weight: 700;
    font-size: 13px;
}
.moringa-feedback-rowscore {
    display: inline-block;
    background: var(--moringa-grey-100);
    color: var(--moringa-navy);
    font-weight: 700;
    padding: 2px 10px;
    border-radius: var(--moringa-radius-pill, 999px);
}
.moringa-feedback-totalrow td {
    background: var(--moringa-grey-50);
    font-weight: 700;
    border-bottom: none;
}
.moringa-feedback-rowscore--total {
    background: transparent;
    color: var(--moringa-orange);
    padding: 0;
}
.moringa-feedback-filecard {
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--moringa-grey-200);
    border-radius: var(--moringa-radius, 12px);
    padding: 16px 20px;
}
.moringa-feedback-fileicon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--moringa-grey-50);
    color: var(--moringa-navy);
    font-size: 18px;
}
.moringa-feedback-filebody {
    flex: 1;
    min-width: 0;
}
.moringa-feedback-filename {
    color: var(--moringa-navy);
    font-weight: 700;
    font-size: 14px;
}
.moringa-feedback-annotbadge {
    display: inline-block;
    background: rgba(250, 81, 15, 0.12);
    color: var(--moringa-orange);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: var(--moringa-radius-pill, 999px);
    margin-top: 6px;
}
.moringa-feedback-viewbtn {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 20px;
    font-size: 13px;
}
.moringa-feedback-actions {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

/* ==========================================================================
   Assignment submission form (mod_assign editsubmissionform) redesign.
   Rendered by theme_moringa\output\mod_assign_renderer::render_assign_form()
   via the mod_assign_submission_form template. The tab bar itself is built
   client-side by javascript/assign-submission-tabs.js, once it knows which
   submission plugins actually rendered fields into the native form.
   ========================================================================== */
.moringa-submit-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid var(--moringa-grey-200);
    margin-bottom: 24px;
}
.moringa-submit-tabs[hidden] {
    display: none;
}
.moringa-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 0 12px;
    font-weight: 700;
    font-size: 15px;
    color: var(--moringa-grey-600);
    cursor: pointer;
}
.moringa-tab.active {
    color: var(--moringa-orange);
    border-bottom-color: var(--moringa-orange);
}
.moringa-tabpanel[hidden] {
    display: none;
}

/* The native "Add submission" section title (and its collapse toggle) is
   redundant once the card already has a "Submit Assignment" heading and
   (when tabbed) an active tab label saying the same thing. Both the toggler
   and the fieldset's own legend rely on a ".visually-hidden" utility class
   this site's compiled Bootstrap doesn't actually define, so hiding them
   outright (rather than trusting that class) is what keeps the text from
   showing up here. */
.moringa-assign-formhtml legend,
.moringa-assign-formhtml .ftoggler {
    /* !important: the toggler also carries Bootstrap's .d-flex utility,
       which sets display:flex !important and would otherwise win. */
    display: none !important;
}

/* Collapse formslib's label column throughout the card - inside tab panels
   the active tab button already says what kind of submission this is (so a
   second "File submissions" / "Online text" label would just be noise), and
   everywhere else (e.g. the save/cancel row) it's simply unlabelled, so it'd
   otherwise just leave a blank ~25%-wide gutter down the left of the card. */
.moringa-assign-formhtml .fitem > .col-md-3 {
    /* !important: this column also carries Bootstrap's .d-flex utility,
       which sets display:flex !important and would otherwise win. */
    display: none !important;
}
.moringa-assign-formhtml .fitem > .col-md-9 {
    flex: 0 0 100%;
    max-width: 100%;
}
.moringa-assign-formhtml .fitem {
    margin-bottom: 12px;
}

/* Online URL repeat rows: a plain text input with a small round remove
   button next to it. */
.moringa-tabpanel input[type="text"] {
    border: 1px solid var(--moringa-grey-200);
    border-radius: var(--moringa-radius, 12px);
    padding: 10px 14px;
    flex: 1 1 auto;
}
/* The onlineurl-remove-btn / onlineurl-add-btn classes (passed as element
   attributes in assignsubmission_onlineurl::get_form_elements()) land on the
   fitem wrapper div for a grouped element, but on both the wrapper and the
   <input> itself for a plain one - style the actual <input> either way. */
.onlineurl-remove-btn,
.onlineurl-add-btn {
    margin: 0;
}
.onlineurl-remove-btn input[type="submit"] {
    background: var(--moringa-grey-50);
    color: var(--moringa-grey-600);
    border: none;
    border-radius: var(--moringa-radius-pill, 999px);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    flex: 0 0 auto;
    margin-left: 8px;
    white-space: nowrap;
}
.onlineurl-remove-btn input[type="submit"]:hover {
    background: var(--moringa-grey-200);
}
.onlineurl-add-btn input[type="submit"] {
    background: none;
    border: none;
    color: var(--moringa-orange);
    font-weight: 700;
    padding: 4px 0;
}

/* File upload dropzone - restyles mod_assign's native filemanager rather
   than replacing it, so drag/drop, multi-file and the picker JS all keep
   working unmodified. */
.moringa-tabpanel .filemanager .fp-content {
    border: 2px dashed var(--moringa-grey-200);
    border-radius: var(--moringa-radius, 12px);
    background: var(--moringa-grey-50);
}

/* Online text submissions (Atto editor) container. */
.moringa-tabpanel .editor_atto {
    border: 1px solid var(--moringa-grey-200);
    border-radius: var(--moringa-radius, 12px);
    overflow: hidden;
}

/* Save/Cancel sit in a formslib group, so the actual flex row is two levels
   below .felement (.felement > div > .d-flex) - and "order" only works on
   elements that are direct children of that flex row, not on the buttons
   themselves, which are nested another level inside each .fitem. */
.moringa-assign-formhtml .felement:has(input[name="submitbutton"]) .d-flex,
.moringa-assign-formhtml .felement:has(input[name="submitbutton2"]) .d-flex {
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 24px;
}
.moringa-assign-formhtml .fitem:has(input[name="submitbutton"]),
.moringa-assign-formhtml .fitem:has(input[name="submitbutton2"]) {
    order: 2;
}
.moringa-assign-formhtml input[name="submitbutton"],
.moringa-assign-formhtml input[name="submitbutton2"] {
    background: var(--moringa-orange);
    color: var(--moringa-white);
    font-weight: 600;
    font-size: 15px;
    padding: 10px 25px;
    border-radius: var(--moringa-radius-pill, 999px);
    border: none;
}
/* Cancel: plain underlined text, no button chrome - Moodle already tags its
   fitem with "btn-cancel", so it doesn't need a name-based selector. */
.moringa-assign-formhtml .fitem.btn-cancel {
    order: 1;
}
.moringa-assign-formhtml input[name="cancel"] {
    background: none;
    border: none;
    color: var(--moringa-navy);
    font-weight: 600;
    text-decoration: underline;
    padding: 0;
}
/* ==========================================================================
   Assignment-flow standalone pages (local_assignstart) — responsive rules.
   The overview / submitted / feedback cards above had no @media coverage, so
   on phones the info grid stayed 2-up, the action rows stayed side-by-side,
   and card padding stayed at desktop values. These blocks are the small-screen
   overrides for those cards.
   ========================================================================== */
@media (max-width: 767px) {
    /* Tighter card chrome on small screens. */
    .moringa-assign-card,
    .moringa-submitted-card,
    .moringa-feedback-card {
        padding: 20px;
        border-radius: var(--moringa-radius, 12px);
    }
    .moringa-assign-title,
    .moringa-submitted-title,
    .moringa-feedback-title {
        font-size: 20px;
    }

    /* Badges: a single-line pill is still fully rounded here (14px > half its
       height), but if a long section-name badge wraps to two lines it becomes
       a rounded rectangle instead of the circular blob a 999px radius produces
       on a multi-line box. */
    .moringa-badge {
        border-radius: 14px;
    }

    /* Overview rubric can be wide; let it scroll rather than overflow the card. */
    .moringa-assign-rubric {
        overflow-x: auto;
    }

    /* Submit form: the Save/Cancel row is spread edge-to-edge on desktop
       (space-between); centre it on mobile, with a gap so the two don't touch. */
    .moringa-assign-formhtml .felement:has(input[name="submitbutton"]) .d-flex,
    .moringa-assign-formhtml .felement:has(input[name="submitbutton2"]) .d-flex {
        justify-content: center;
        gap: 16px;
    }

    /* Overview: stack the four info tiles into one column. */
    .moringa-assign-meta {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Overview: stack the actions full-width (Back on top, Submit below). */
    .moringa-assign-submitbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-top: 20px;
    }
    .moringa-btn-back {
        margin-right: 0;
    }
    .moringa-assign-submitbar .btn,
    .moringa-assign-submitbar .moringa-btn-submit {
        width: 100%;
        text-align: center;
    }

    /* Submitted: stack the (up to three) actions full-width instead of
       cramming them across one row. */
    .moringa-submitted-actions {
        flex-direction: column;
    }
    .moringa-submitted-actions .btn {
        width: 100%;
        white-space: normal;
    }

    /* Feedback: drop the large score under the title instead of beside it,
       and stack the grader column above the comment. */
    .moringa-feedback-top {
        flex-direction: column;
        gap: 8px;
    }
    .moringa-feedback-scorebox {
        text-align: left;
    }
    .moringa-feedback-instructor {
        flex-direction: column;
        gap: 12px;
    }
    .moringa-feedback-graderinfo {
        flex-direction: row;
        align-items: center;
        width: auto;
        gap: 10px;
    }
    .moringa-feedback-actions .btn,
    .moringa-feedback-viewbtn {
        width: 100%;
        text-align: center;
    }

    /* Submit form: let the runtime-built tab bar (Link/URL, File Upload,
       Text Entry) wrap instead of overflowing on narrow screens. */
    .moringa-submit-tabs {
        gap: 16px;
        flex-wrap: wrap;
    }
}

/* Small phones: let the submitted key/value rows wrap the value under its
   label so long file names / timestamps don't overflow the card. */
@media (max-width: 480px) {
    .moringa-submitted-row {
        flex-direction: column;
        gap: 2px;
    }
    .moringa-submitted-value {
        text-align: left;
    }
}

/* ==========================================================================
   Universal breadcrumb.

   Brands Moodle's NATIVE breadcrumb (ol.breadcrumb > li.breadcrumb-item) on
   every page, so the pill look lives in one place instead of being hand-built
   per page. This replaces the .moringa-breadcrumb HTML+inline-style+JS that
   was injected on My Courses (/my/courses.php) - once this is in, that page's
   native breadcrumb ("Dashboard > My courses") renders as the pill and the
   custom injection can be removed. Assignment/standalone pages, course pages,
   dashboard, etc. all pick this up automatically because they all render the
   native breadcrumb through full_header.
   ========================================================================== */
.breadcrumb {
    /* BS5 reads its divider from this custom prop; we also hard-set the
       ::before content below in case a parent theme overrides it. */
    --bs-breadcrumb-divider: '\203A'; /* > */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 2px;
    padding: 10px 16px 10px 20px;
    background-color: color-mix(in srgb, var(--moringa-navy) 3%, transparent);
    border-radius: 10px;
    font-size: 12px;
    color: color-mix(in srgb, var(--moringa-navy) 65%, transparent);
    list-style: none;
    line-height: 1.5rem;
    justify-content: flex-start;
}
.moringa-course-breadcrumb {
    margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
    .moringa-course-breadcrumb {
        display: none;
    }
    
}
.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
}
.breadcrumb-item a {
    color: var(--moringa-orange);
    text-decoration: none;
    font-weight: 300;
}
.breadcrumb-item a:hover,
.breadcrumb-item a:focus {
    text-decoration: underline;
}
/* Current (last) crumb: muted navy, not a link. */
.breadcrumb-item.active {
    color: color-mix(in srgb, var(--moringa-navy) 65%, transparent);
}
/* Swap Bootstrap's default "/" divider for the > used elsewhere in the brand,
   and give it the same 8px breathing room the old .separator had. */
.breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
}
.breadcrumb-item + .breadcrumb-item::before {
    content: '\203A';
    float: none;
    padding: 0;
    margin: 0 8px;
    color: color-mix(in srgb, var(--moringa-navy) 45%, transparent);
}

#page-header {
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
}

/* --------------------------------------------------------------------------
   My Courses (/my/courses.php) — rules migrated out of that core file's inline
   <style>/JS so the page no longer has to hand-inject anything. The universal
   breadcrumb above covers the trail; these cover the rest of what the inline
   block did (dropdown chrome, header spacing, and hiding the empty header
   actions row the old JS used to remove).
   -------------------------------------------------------------------------- */
body.page-mycourses button#groupingdropdown,
body.page-mycourses button#sortingdropdown,
body.page-mycourses button#displaydropdown {
    font-weight: normal !important;
    font-size: 14px !important;
    color: var(--moringa-navy) !important;
    border: 1px solid color-mix(in srgb, var(--moringa-navy) 20%, transparent) !important;
}
body.page-mycourses #page-header {
    margin-bottom: 4px;
}
body.page-mycourses #region-main {
    padding-top: 8px;
}
/* The old moveBreadcrumb() JS removed this row; do it in CSS instead (no
   MutationObserver, no layout thrash). */
body.page-mycourses [data-region="header-actions-container"] {
    display: none;
}
/* ==========================================================================
   Incourse course-tree sidebar + activity loader.

   Migrated out of the inline <style> that layout/mycourse.php used to echo
   after the footer. It now loads as part of the theme sheet on every page;
   the classes only appear in the incourse DOM, so there are no matching
   elements elsewhere. Brand hits have been unified to tokens (navy/orange);
   neutrals, light tints and status colours are kept literal to preserve the
   exact look. Note: the #section_listing-scoped .course-tree-* rules earlier
   in this file are more specific and remain authoritative wherever both apply.
   ========================================================================== */
.module_view_section {
    position: relative;
}
.activity-loader {
    position: absolute;
    inset: 0;
    background: var(--moringa-navy);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9;
}
.activity-loader.hide {
    display: none;
}
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #ddd;
    border-top: 5px solid var(--moringa-orange);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Course tree */
.course-sidebar {
    width: 100%;
}
.course-tree,
.course-tree-children {
    list-style: none;
    margin: 0;
    padding: 0;
}
.course-tree-section {
    display: flex;
    align-items: center;
    min-height: 42px;
    background: #f7f8fa;
    border-bottom: 1px solid #e2e5e9;
}
.course-tree-section-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 8px;
    color: #23324d;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}
.course-tree-section-link:hover {
    color: var(--moringa-orange);
}
.tree-arrow {
    width: 25px;
    min-width: 25px;
    text-align: center;
    color: #526174;
}
.tree-arrow i {
    font-size: 11px;
}
.course-tree-children {
    margin-left: 18px;
}
.course-tree-activity {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 5px 8px 5px 5px;
    border-bottom: 1px dotted #d7dce2;
}
.course-tree-activity-link {
    flex: 1;
    color: #526174;
    text-decoration: none;
    font-size: 13px;
}
.course-tree-activity-link:hover {
    color: var(--moringa-orange);
}
.activity-check {
    width: 25px;
    min-width: 25px;
    display: flex;
    justify-content: center;
}
.activity-check input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #00a651;
    cursor: default;
}
.activity-status {
    width: 20px;
    text-align: center;
}
.activity-status i {
    color: #777;
    font-size: 12px;
}
.course-tree-node.is-active > .course-tree-activity {
    background: #fff3ed;
    border-left: 3px solid var(--moringa-orange);
}
.course-tree-node.is-active > .course-tree-activity .course-tree-activity-link {
    color: var(--moringa-orange);
    font-weight: 600;
}
.course-tree-node.is-active > .course-tree-section {
    background: #eef4ff;
}
.tree-status {
    font-size: 10px;
    padding: 3px 6px;
    border-radius: 8px;
    white-space: nowrap;
}
.tree-status.completed {
    color: #008844;
    background: #e6f7ed;
}
.tree-status.inprogress {
    color: #a35a00;
    background: #fff0d6;
}
/* ==========================================================================
   Lesson listing — submitted-assignment state.
   A green left accent on the item, a "Submitted" pill next to the action, and
   the action row laid out to hold badge + "View Submission" together. Driven by
   .lesson-item--submitted / .lesson-status-submitted from mycourse.mustache.
   ========================================================================== */
#lesson_listing .lesson-list .lesson-item--submitted,
#lesson_listing .lesson-list .lesson-item--completed {
    border-left: 3px solid var(--moringa-success);
}
#lesson_listing .lesson-list .lesson-item--submitted .lesson-action,
#lesson_listing .lesson-list .lesson-item--completed .lesson-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 10px;
}
#lesson_listing .lesson-list .lesson-status-submitted,
#lesson_listing .lesson-list .lesson-status-completed {
    display: inline-flex;
    align-items: center;
    color: var(--moringa-success);
    background: color-mix(in srgb, var(--moringa-success) 12%, transparent);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: var(--moringa-radius-pill, 999px);
    white-space: nowrap;
}

/* Submitted item on phones: stack it so the name gets a full row (no mid-word
   wrap) and the badge + "View Submission" drop to their own row, grouped left,
   with the button on a single line instead of squeezing into a tall oval. */
@media (max-width: 575.98px) {
    #lesson_listing .lesson-list .lesson-item--submitted,
    #lesson_listing .lesson-list .lesson-item--completed {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    #lesson_listing .lesson-list .lesson-item--submitted .lesson-action,
    #lesson_listing .lesson-list .lesson-item--completed .lesson-action {
        width: 100%;
        justify-content: flex-start;
    }
    #lesson_listing .lesson-list .lesson-item--submitted .lesson-action .btn,
    #lesson_listing .lesson-list .lesson-item--completed .lesson-action .btn {
        white-space: nowrap;
    }
}

/* Mobile: make the whole lesson card a tap target. A stretched-link overlay on
   the action link covers the card, so tapping anywhere opens the item. Locked
   rows have no action link, so they correctly stay non-tappable. (The current
   item isn't in the list on activity pages, so its non-link states never apply
   here.) */
@media (max-width: 991px) {
    #lesson_listing .lesson-list .lesson-item {
        position: relative;
    }
    #lesson_listing .lesson-list .lesson-item .lesson-action a.btn::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
    }
}

/* "View Focus Mode" button: keep a gap between icon and label on desktop, then
   on mobile hide the label so the button collapses to just its icon (the link's
   aria-label keeps it accessible) instead of crowding the content title. */
.focus-mode-launch-btn .focus-mode-icon {
    margin-right: 6px;
}
@media (max-width: 767px) {
    .focus-mode-launch-btn .focus-mode-label {
        display: none;
    }
    .focus-mode-launch-btn .focus-mode-icon {
        margin-right: 0;
    }
}
/* ==========================================================================
   Quiz overview + results cards — responsive (local_quizstart view.php /
   results.php). The base .moringa-quiz-* / .moringa-quizresults-* rules are
   fixed multi-column grids at desktop padding; below 768px stack them, shrink
   the padding/headings, and make the results actions full-width. Mirrors the
   assignment card responsive treatment.
   ========================================================================== */
@media (max-width: 767px) {
    .moringa-quiz-card,
    .moringa-quizresults-card {
        padding: 20px;
        border-radius: var(--moringa-radius, 12px);
    }
    .moringa-quiz-title {
        font-size: 20px;
    }
    .moringa-quizresults-title {
        font-size: 22px;
    }
    .moringa-quizresults-percentage {
        font-size: 44px;
        margin-bottom: 24px;
    }
    .moringa-quiz-meta {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .moringa-quiz-actions .btn {
        width: 100%;
        justify-content: center;
    }
    .moringa-quizresults-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .moringa-quizresults-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .moringa-quizresults-actions .btn {
        width: 100%;
    }
}

/* ==========================================================================
   Quiz "Answer Review" page (mod_quiz_review) on phones.
   Two fixes: the All/Correct/Incorrect filter tabs were a non-wrapping flex row
   that overflowed off the right edge; and each question header's "QUESTION n"
   badge + state text ran under the absolutely-positioned flag icon. Wrap the
   tabs, and keep the header clear of the flag.
   ========================================================================== */
@media (max-width: 767px) {
    .moringa-review-tabs {
        flex-wrap: wrap;
        gap: 4px;
    }
    .moringa-review-tab {
        padding: 8px 16px;
        font-size: 13px;
    }
    /* Pull the flag tight to the card edge and reserve room on the state so
       the "QUESTION n"/CORRECT header no longer overlaps it. */
    .moringa-quiz-review-chrome .que .info .questionflag {
        top: 16px;
        right: 14px;
    }
    .moringa-quiz-review-chrome .que .info .state {
        margin-right: 40px;
    }
}
/* Show the navbar logo on mobile. The .navbar-brand link is `d-none d-md-flex`
   (hidden below 768px), but the navbar's own mobile CSS already sizes/centres it
   for small screens - so just un-hide it here. Cleaner alternative: change that
   class to `d-flex` in navbar.mustache. */
@media (max-width: 767px) {
    .moringa-navbar .navbar-brand {
        display: flex !important;
    }
}

/* ==========================================================================
   Lesson listing — uniform item layout (round 6 polish)
   One consistent shape for every card, regardless of state or CTA:
     [ icon (48px, left) ][ name + date — flexes to fill ][ badge + CTA — right ]
   and one badge style (light-green fill, green text, no border) for every
   completed/submitted state. Appended last so it settles the earlier, more
   scattered .lesson-item rules in this file.
   ========================================================================== */

/* Icon column: fixed size, never shrinks, glyph centred. */
#lesson_listing .lesson-list .lesson-item {
    gap: 12px;
}
#lesson_listing .lesson-list .lesson-left {
    flex: 1 1 auto;
    min-width: 0;
    gap: 12px;
}
#lesson_listing .lesson-list .lesson-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#lesson_listing .lesson-list .lesson-name {
    min-width: 0;
}

/* Action column: badge + CTA sit together on one line, pinned right, and the
   column never shrinks or wraps - so a quiz, a submitted assignment and a
   completed lesson all place their controls identically. */
#lesson_listing .lesson-list .lesson-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 10px;
}

/* Single completed/submitted badge: light-green fill, green text, NO border. */
#lesson_listing .lesson-list .lesson-status-submitted,
#lesson_listing .lesson-list .lesson-status-completed {
    border: 0;
    color: var(--moringa-success);
    background: color-mix(in srgb, var(--moringa-success) 12%, transparent);
}

/* Phones: the card stacks (name row, then a full-width action row). Keep the
   badge above the CTA and left-aligned so every state reads the same way. */
@media (max-width: 575.98px) {
    #lesson_listing .lesson-list .lesson-item--submitted .lesson-action,
    #lesson_listing .lesson-list .lesson-item--completed .lesson-action {
        flex-direction: row;
        align-items: normal;
        gap: 8px;
    }
}


/* ==========================================================================
   Quiz review — full-width content on first paint (fixes the right-hand gap).
   The review page (pagetype mod-quiz-review) isn't mapped to the theme's
   full-width incourse layout, so it uses Boost's drawers layout. Quiz pages
   carry a right-hand "Quiz navigation" block drawer, and on the drawers grid
   the content width depends on that drawer's reserved column. The column width
   is only settled after the drawers JS runs, so the FIRST paint reserves it
   (a large empty gap on the right) and only a reload renders at full width.
   Collapse both drawer columns on this page so the content is full-width from
   first paint; the drawers still open as overlays via their toggles. Scoped to
   the review page only, so the attempt page's navigation is untouched. The
   theme's existing .main-inner:100% override was scoped to <=768px only.
   ========================================================================== */
body#page-mod-quiz-review #page.drawers {
    grid-template-columns: 0 minmax(0, 1fr) 0 !important;
}
body#page-mod-quiz-review #page.drawers .main-inner {
    max-width: 100% !important;
    margin-inline: 0 !important;
}

/* ==========================================================================
   Google Meet — live-session card (mod_googlemeet view). Redesign of the
   activity's main content to match the approved "Main Live Session Card":
   navy gradient header, three info cards (date / time / meet id), a prominent
   Join button, a pre-session checklist, and an attendance footer. Fully
   responsive (3-up -> 1-up under 768px). Markup: theme override template
   theme/moringa/templates/mod_googlemeet/view.mustache.
   ========================================================================== */
.gm-session-card {
    --gm-line: color-mix(in srgb, var(--moringa-navy) 10%, transparent);
    --gm-muted: color-mix(in srgb, var(--moringa-navy) 55%, transparent);
    max-width: 1000px;
    margin-inline: auto;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 50px -24px color-mix(in srgb, var(--moringa-navy) 45%, transparent);
}

.gm-session-header {
    position: relative;
    padding: 24px 32px 20px;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(130% 150% at 88% 0%, color-mix(in srgb, var(--moringa-orange) 22%, transparent), transparent 46%),
        radial-gradient(120% 140% at 5% 100%, color-mix(in srgb, var(--moringa-cyan) 22%, transparent), transparent 50%),
        linear-gradient(135deg, #0a1730, #1b3a63);
}
.gm-session-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
}
.gm-session-badge svg,
.gm-session-badge img { width: 16px; height: 16px; flex-shrink: 0; }
.gm-session-title { margin: 0; font-size: 24px; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.gm-session-subtitle { margin: 8px 0 0; font-size: 15px; color: rgba(255, 255, 255, .72); }

.gm-session-body { padding: 26px 32px 0px; }

.gm-session-info {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.gm-info-card {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--moringa-grey-50);
    border: 1px solid var(--gm-line);
    border-radius: 14px;
}
.gm-info-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gm-info-icon svg { width: 20px; height: 20px; }
.gm-info-icon.is-date { background: color-mix(in srgb, var(--moringa-orange) 12%, #fff); color: var(--moringa-orange); }
.gm-info-icon.is-time { background: color-mix(in srgb, var(--moringa-cyan) 14%, #fff); color: var(--moringa-cyan); }
.gm-info-icon.is-meet { background: color-mix(in srgb, var(--moringa-green) 14%, #fff); color: var(--moringa-green); }
.gm-info-body { min-width: 0; flex: 1; }
.gm-info-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gm-muted);
    margin-bottom: 5px;
}
.gm-info-value { font-size: 14px; font-weight: 700; color: var(--moringa-navy); line-height: 1.25; }
.gm-info-note { font-size: 11.5px; color: var(--gm-muted); margin-top: 4px; line-height: 1.35; }
.gm-utc {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 6px;
    color: var(--moringa-cyan);
    background: color-mix(in srgb, var(--moringa-cyan) 12%, #fff);
    vertical-align: middle;
}

.gm-meet-code-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gm-meet-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--moringa-navy);
    padding: 4px 9px;
    border-radius: 7px;
    background: #fff;
    border: 1px solid var(--gm-line);
}
.gm-copy-btn {
    border: 0;
    background: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--moringa-cyan);
}
.gm-copy-btn svg { width: 13px; height: 13px; }
.gm-copy-btn.is-copied { color: var(--moringa-green); }

.gm-join-wrap {
    display: flex;
    justify-content: center;
    padding: 24px 0;
    margin-top: 22px;
    border-top: 1px solid var(--gm-line);
}
.gm-join-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--moringa-orange), color-mix(in srgb, var(--moringa-orange) 78%, #ff8a3d));
    box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--moringa-orange) 75%, transparent);
    transition: transform .15s ease, box-shadow .15s ease;
}
.gm-join-btn svg { width: 20px; height: 20px; }
.gm-join-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px -10px color-mix(in srgb, var(--moringa-orange) 80%, transparent);
    color: #fff;
    text-decoration: none;
}
.gm-join-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--moringa-orange) 45%, transparent); outline-offset: 2px; }

.gm-checklist { padding: 22px 0 6px; border-top: 1px solid var(--gm-line); text-align: center; }
.gm-checklist-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gm-muted);
    margin-bottom: 14px;
}
.gm-checklist-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--moringa-cyan); }
.gm-checklist-items { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.gm-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: 13.5px;
    color: var(--moringa-navy);
    background: #fff;
    border: 1px solid var(--gm-line);
    border-radius: 10px;
}
.gm-check svg { width: 15px; height: 15px; color: var(--moringa-green); flex-shrink: 0; }

.gm-session-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 18px -32px 0;
    padding: 14px 20px;
    font-size: 13px;
    color: var(--gm-muted);
    text-align: center;
    background: var(--moringa-grey-50);
    border-top: 1px solid var(--gm-line);
}
.gm-session-foot svg { width: 16px; height: 16px; color: var(--moringa-orange); flex-shrink: 0; }

@media (max-width: 768px) {
    .gm-session-header { padding: 26px 20px 22px; }
    .gm-session-title { font-size: 24px; }
    .gm-session-subtitle { font-size: 14px; }
    .gm-session-body { padding: 20px 18px 0px; }
    .gm-session-info { grid-template-columns: 1fr; gap: 12px; }
    .gm-session-foot { margin-inline: -18px; }
}
@media (max-width: 480px) {
    .gm-join-btn { width: 100%; justify-content: center; }
    .gm-check { width: 100%; justify-content: flex-start; }
}
/* ==========================================================================
   Form autocomplete selection chips
   Core renders selected items as `.badge.bg-secondary`. Bootstrap's utility
   uses !important, so we match it with a scoped, higher-specificity selector.
   Other bg-secondary badges across the theme are unaffected.
   ========================================================================== */
.form-autocomplete-selection .badge.bg-secondary {
    background-color: transparent !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}

/* Suggestions dropdown: match the search input width and align under it */
.felement[data-fieldtype="autocomplete"] .form-autocomplete-input,
.form-autocomplete-suggestions {
    width: 270px;
    max-width: 100%;
}

/* Active/hovered suggestion: soft cyan tint instead of solid primary orange */
.form-autocomplete-suggestions li[aria-selected="true"],
.form-autocomplete-suggestions li:hover {
    background-color: color-mix(in srgb, var(--moringa-cyan) 12%, transparent) !important;
    color: var(--moringa-navy) !important;
}

/* Hide the blank placeholder suggestion (from the empty <option>). Required
   fields are still validated server-side, so an empty pick is caught.
   !important is needed: core filters suggestions with jQuery .show(), which
   writes an inline display value that beats a plain stylesheet rule. */
.form-autocomplete-suggestions li[data-value=""] {
    display: none !important;
}

/* No focus ring/outline on individual suggestions; the tint marks the active one */
.form-autocomplete-suggestions li:focus,
.form-autocomplete-suggestions li:focus-visible,
.form-autocomplete-suggestions:focus,
.form-autocomplete-suggestions li[aria-selected="true"] {
    outline: 0 !important;
    box-shadow: none !important;
}
.aabtn.focus, .aabtn:focus, .btn-link.focus, .btn-link:focus, .nav-link.focus, .nav-link:focus, .editor_atto_toolbar button.focus, .editor_atto_toolbar button:focus, .editor_atto_toolbar .atto_toolbar_row.focus, .editor_atto_toolbar .atto_toolbar_row:focus, [role="button"].focus, [role="button"]:focus, .list-group-item-action.focus, .list-group-item-action:focus, input[type="checkbox"].focus, input[type="checkbox"]:focus, input[type="radio"].focus, input[type="radio"]:focus, input[type="file"].focus, input[type="file"]:focus, input[type="image"].focus, input[type="image"]:focus, .visually-hidden-focusable.focus, .visually-hidden-focusable:focus, a.dropdown-toggle.focus, a.dropdown-toggle:focus, .moodle-dialogue-base .closebutton.focus, .moodle-dialogue-base .closebutton:focus, button.btn-close.focus, button.btn-close:focus, .form-autocomplete-selection.focus, .form-autocomplete-selection:focus, [role="treeitem"]:not([aria-expanded="true"]).focus, [role="treeitem"]:not([aria-expanded="true"]):focus {
  outline: 0;
  box-shadow: none !important;
}

/* ==========================================================================
   Form inputs: focus state
   Replaces Bootstrap's heavy primary-colour focus shadow (orange in this
   theme) on every input with a crisp cyan border. The border colour change
   is kept as the visible focus indicator for keyboard users.
   ========================================================================== */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus,
textarea:focus,
select:focus {
    outline: 0 !important;
    box-shadow: none !important;
    border-color: var(--moringa-cyan) !important;
}
/* ==========================================================================
   File picker dialogue (YUI moodle-dialogue.filepicker)
   ========================================================================== */

/* Placement + sizing.
   YUI writes inline top/left/width/height (e.g. 873x558 at top:39px), so the
   dialogue can run past the viewport with nothing to scroll. We pin it to the
   viewport centre, size it to its content, and cap it at the screen height;
   anything taller scrolls inside the body instead.
   Trade-off: !important on top/left means the dialogue can no longer be
   dragged, so the move cursor on the header is reset too.
   z-index: YUI's inline 9999 ties with the right drawer and can lose to the
   fixed header. Scoped to the file picker only; raising every dialogue (or the
   shared mask) would break YUI's own stacking order. */
.moodle-dialogue-base .moodle-dialogue.filepicker {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: min(760px, calc(100vw - 32px)) !important;
    height: auto !important;
    max-height: calc(100vh - 32px);
    z-index: 10060 !important;
}

/* Shell: flex column so the header stays put and the body scrolls */
.moodle-dialogue.filepicker .moodle-dialogue-wrap {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 32px);
    border: 0;
    border-radius: var(--moringa-radius-lg, 16px);
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(16, 31, 60, 0.28);
    background: var(--moringa-white);
}
.moodle-dialogue.filepicker .moodle-dialogue-hd {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--moringa-white);
    border-bottom: 1px solid var(--moringa-grey-200);
    cursor: default !important;
}
.moodle-dialogue.filepicker .moodle-dialogue-hd h5:empty {
    display: none;
}
.moodle-dialogue.filepicker .moodle-dialogue-hd h3 {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--moringa-navy);
}
.moodle-dialogue.filepicker .moodle-dialogue-hd .closebutton {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    opacity: 0.7;
    transition: background-color .15s, opacity .15s;
}
.moodle-dialogue.filepicker .moodle-dialogue-hd .closebutton:hover {
    opacity: 1;
    background-color: var(--moringa-grey-100);
}
.moodle-dialogue.filepicker .moodle-dialogue-bd {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    overflow-y: auto;
    padding: 0;
    background: var(--moringa-grey-50);
}
.moodle-dialogue.filepicker .moodle-dialogue-ft:empty {
    display: none;
}
.moodle-dialogue.filepicker .file-picker {
    margin: 0;
}

/* Left column: repository list */
.moodle-dialogue.filepicker .fp-repo-area {
    padding: 12px 8px !important;
    gap: 2px;
}
.moodle-dialogue.filepicker .fp-repo .nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--moringa-radius, 10px);
    color: var(--moringa-navy) !important;
    font-size: 0.8125rem;
    font-weight: 500;
    background: transparent !important;
    transition: background-color .15s;
}
.moodle-dialogue.filepicker .fp-repo .nav-link:hover {
    background: var(--moringa-grey-100) !important;
}
.moodle-dialogue.filepicker .fp-repo.active .nav-link {
    background: color-mix(in srgb, var(--moringa-orange) 12%, transparent) !important;
    color: var(--moringa-orange) !important;
    font-weight: 600;
}

/* Right column: content card */
.moodle-dialogue.filepicker .fp-repo-items {
    margin: 10px 10px 10px 0;
    border: 1px solid var(--moringa-grey-200);
    border-radius: var(--moringa-radius-lg, 16px);
    background: var(--moringa-white);
    box-shadow: none;
    overflow: hidden;
}
.moodle-dialogue.filepicker .fp-navbar {
    background: var(--moringa-white) !important;
    border-color: var(--moringa-grey-200) !important;
    padding: 6px 10px !important;
}
/* Content area sizes to its content (the upload form is short); file
   listings in the other tabs scroll inside the card */
.moodle-dialogue.filepicker .fp-content {
    height: auto !important;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

/* Toolbar + view switcher: light outline buttons instead of slate fills */
.moodle-dialogue.filepicker .fp-toolbar .btn-secondary,
.moodle-dialogue.filepicker .fp-viewbar .btn-secondary {
    padding: 3px 7px;
    background: var(--moringa-white) !important;
    border: 1px solid var(--moringa-grey-200) !important;
    color: var(--moringa-grey-600) !important;
    box-shadow: none !important;
}
.moodle-dialogue.filepicker .fp-toolbar .btn-secondary:hover,
.moodle-dialogue.filepicker .fp-viewbar .btn-secondary:hover {
    background: var(--moringa-grey-50) !important;
    color: var(--moringa-navy) !important;
}
.moodle-dialogue.filepicker .fp-viewbar .btn-secondary.checked {
    background: color-mix(in srgb, var(--moringa-navy) 8%, transparent) !important;
    color: var(--moringa-navy) !important;
}
/* On the upload tab the view switcher does nothing, so fade it out */
.moodle-dialogue.filepicker .fp-viewbar.disabled {
    opacity: 0.45;
}

/* Upload form: top-aligned instead of vertically centred in a table cell */
.moodle-dialogue.filepicker .fp-upload-form,
.moodle-dialogue.filepicker .fp-upload-form .fp-content-center {
    display: block;
    height: auto;
}
.moodle-dialogue.filepicker .fp-upload-form {
    padding: 16px 18px;
}
.moodle-dialogue.filepicker .fp-formset > .mb-3 {
    margin-bottom: 12px !important;
}
.moodle-dialogue.filepicker .fp-formset label,
.moodle-dialogue.filepicker .fp-formset .col-form-label {
    display: block;
    margin-bottom: 4px;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--moringa-navy);
}
.moodle-dialogue.filepicker .fp-formset .form-control {
    border-radius: var(--moringa-radius, 10px);
    border-color: var(--moringa-grey-300);
    min-height: 38px;
    font-size: 0.875rem;
}

/* File input as a dashed dropzone-style field */
.moodle-dialogue.filepicker .fp-file .px-3 {
    padding: 0 !important;
}
.moodle-dialogue.filepicker .fp-file input[type="file"] {
    width: 100%;
    padding: 12px;
    border: 2px dashed var(--moringa-grey-300);
    border-radius: var(--moringa-radius, 10px);
    background: var(--moringa-grey-50);
    color: var(--moringa-grey-600);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.moodle-dialogue.filepicker .fp-file input[type="file"]:hover,
.moodle-dialogue.filepicker .fp-file input[type="file"]:focus-visible {
    border-color: var(--moringa-cyan);
    background: color-mix(in srgb, var(--moringa-cyan) 5%, var(--moringa-white));
    outline: 0;
}
.moodle-dialogue.filepicker .fp-file input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 6px 14px;
    border: 1px solid var(--moringa-orange);
    border-radius: var(--moringa-radius-pill, 999px);
    background: var(--moringa-white);
    color: var(--moringa-orange);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.moodle-dialogue.filepicker .fp-file input[type="file"]:hover::file-selector-button {
    background: var(--moringa-orange);
    color: var(--moringa-white);
}

/* Primary action: right-aligned like a dialogue footer */
.moodle-dialogue.filepicker .fp-upload-form .mdl-align {
    text-align: right;
    padding-top: 12px;
    border-top: 1px solid var(--moringa-grey-200);
}
.moodle-dialogue.filepicker .fp-upload-btn {
    padding: 8px 20px;
    border-radius: var(--moringa-radius-pill, 999px);
    font-size: 0.875rem;
    font-weight: 600;
}

/* Tablet and below: repo list becomes a horizontal pill row */
@media (max-width: 991px) {
    .moodle-dialogue-base .moodle-dialogue.filepicker {
        width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 16px);
    }
    .moodle-dialogue.filepicker .moodle-dialogue-wrap {
        max-height: calc(100vh - 16px);
    }
    .moodle-dialogue.filepicker .fp-repo-area {
        flex-direction: row !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 8px !important;
        border-bottom: 1px solid var(--moringa-grey-200);
    }
    .moodle-dialogue.filepicker .fp-repo .nav-link {
        white-space: nowrap;
    }
    .moodle-dialogue.filepicker .fp-repo-items {
        margin: 8px;
    }
}

/* ==========================================================================
   YUI alert / confirm dialogues (M.core.alert, M.core.confirm) plus the
   file picker's own small dialogues, which are separate YUI widgets:
   .fp-msg ("No files attached" etc.) and .fp-dlg (overwrite/rename prompt).
   ========================================================================== */

/* Stacking + placement.
   YUI gives these a computed inline z-index (e.g. 1024), which now sits under
   the file picker's forced 10060. They are always "on top of something", so
   they go one layer higher. Identified by their .confirmation-dialogue body,
   since the widget itself carries no distinguishing class.
   Like the picker, they are centred in the viewport and height-capped so a
   long message (e.g. a big accepted-types list) can't run off screen. */
.moodle-dialogue-base .moodle-dialogue:has(.confirmation-dialogue, .fp-msg, .fp-dlg) {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: min(440px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 32px);
    z-index: 10070 !important;
}

.moodle-dialogue:has(.confirmation-dialogue, .fp-msg, .fp-dlg) .moodle-dialogue-wrap {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 32px);
    border: 0;
    border-radius: var(--moringa-radius-lg, 16px);
    overflow: hidden;
    background: var(--moringa-white);
    box-shadow: 0 0 0 100vmax rgba(16, 31, 60, 0.35),
                0 24px 64px rgba(16, 31, 60, 0.35);
}

/* Header */
.moodle-dialogue:has(.confirmation-dialogue, .fp-msg, .fp-dlg) .moodle-dialogue-hd {
    flex: 0 0 auto;
    padding: 16px 20px 0;
    background: var(--moringa-white);
    border: 0;
}
.moodle-dialogue:has(.confirmation-dialogue, .fp-msg, .fp-dlg) .moodle-dialogue-hd h5:empty,
.moodle-dialogue:has(.confirmation-dialogue, .fp-msg, .fp-dlg) .moodle-dialogue-hd:empty {
    display: none;
}
.moodle-dialogue:has(.confirmation-dialogue, .fp-msg, .fp-dlg) .moodle-dialogue-hd h5 {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--moringa-navy);
}

/* Body */
.moodle-dialogue:has(.confirmation-dialogue, .fp-msg, .fp-dlg) .moodle-dialogue-bd {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 8px 20px 16px;
    overflow: hidden;
}
.moodle-dialogue:has(.confirmation-dialogue, .fp-msg, .fp-dlg) .moodle-dialogue-ft:empty {
    display: none;
}
.moodle-dialogue .confirmation-dialogue {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.moodle-dialogue .confirmation-message {
    min-height: 0;
    overflow-y: auto;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--moringa-grey-600);
    overflow-wrap: anywhere; /* long generated filenames */
}

/* Accepted-types list: compact scrollable panel, extension on the right */
.moodle-dialogue .confirmation-message .form-filetypes-descriptions {
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--moringa-grey-200);
    border-radius: var(--moringa-radius, 10px);
    background: var(--moringa-grey-50);
}
.moodle-dialogue .confirmation-message .form-filetypes-descriptions ul {
    margin: 0;
    padding: 4px 0;
}
.moodle-dialogue .confirmation-message .form-filetypes-descriptions li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 5px 12px;
    font-size: 0.8125rem;
    color: var(--moringa-navy);
}
.moodle-dialogue .confirmation-message .form-filetypes-descriptions li + li {
    border-top: 1px solid var(--moringa-grey-200);
}
.moodle-dialogue .confirmation-message .form-filetypes-descriptions small {
    flex-shrink: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    color: var(--moringa-grey-600) !important;
}

/* Buttons: right-aligned (core's .text-xs-right is a Bootstrap 4 class
   that no longer exists in BS5, which is why OK sat on the left) */
.moodle-dialogue .confirmation-buttons {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.moodle-dialogue .confirmation-buttons .btn {
    margin: 0 !important;
    min-width: 88px;
    padding: 8px 20px;
    border-radius: var(--moringa-radius-pill, 999px);
    font-size: 0.875rem;
    font-weight: 600;
}
.moodle-dialogue .confirmation-buttons .btn-secondary {
    background: var(--moringa-white) !important;
    border: 1px solid var(--moringa-grey-300) !important;
    color: var(--moringa-navy) !important;
}

/* File picker message (.fp-msg) and overwrite prompt (.fp-dlg) */
.moodle-dialogue .file-picker.fp-msg,
.moodle-dialogue .file-picker.fp-dlg {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding-top: 8px;
}
.moodle-dialogue .fp-msg .fp-msg-text,
.moodle-dialogue .fp-dlg .fp-dlg-text {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--moringa-navy);
    overflow-wrap: anywhere;
}
.moodle-dialogue .fp-msg-error .fp-msg-text::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--moringa-orange) 14%, transparent);
    color: var(--moringa-orange);
    font-size: 0.75rem;
    font-weight: 700;
    vertical-align: 1px;
}
.moodle-dialogue .fp-msg .fp-msg-butok {
    align-self: flex-end;
}
.moodle-dialogue .fp-dlg .fp-dlg-buttons {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.moodle-dialogue .fp-msg .btn,
.moodle-dialogue .fp-dlg .btn {
    margin: 16px 0 0 !important;
    min-width: 88px;
    padding: 8px 20px;
    border-radius: var(--moringa-radius-pill, 999px);
    font-size: 0.875rem;
    font-weight: 600;
}
.moodle-dialogue .fp-dlg .fp-dlg-buttons .btn {
    margin: 0 !important;
}
.moodle-dialogue .fp-dlg .btn-secondary {
    background: var(--moringa-white) !important;
    border: 1px solid var(--moringa-grey-300) !important;
    color: var(--moringa-navy) !important;
}

/* File details / select dialogue (.fp-select), opened by clicking a file in
   Recent or Private files. Same stacking + centring treatment, wider body. */
.moodle-dialogue-base .moodle-dialogue:has(.fp-select) {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 32px)) !important;
    height: auto !important;
    max-height: calc(100vh - 32px);
    z-index: 10070 !important;
}
.moodle-dialogue:has(.fp-select) .moodle-dialogue-wrap {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 32px);
    border: 0;
    border-radius: var(--moringa-radius-lg, 16px);
    overflow: hidden;
    background: var(--moringa-white);
    box-shadow: 0 0 0 100vmax rgba(16, 31, 60, 0.35),
                0 24px 64px rgba(16, 31, 60, 0.35);
}
.moodle-dialogue:has(.fp-select) .moodle-dialogue-bd {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    overflow-y: auto;
}

/* ==========================================================================
   Activity availability badge ("Hidden from students", "Available but not
   shown on course page", ...)
   Core renders it two ways - as a plain <span> for the information badge,
   and as a dropdown-dialog toggle <button> staff can click in edit mode -
   both carrying `.text-dark`, whose Bootstrap utility colour is !important:
   dark text on the theme's dark secondary pill, so it's unreadable. Match
   the utility's !important for any secondary badge with .text-dark.
   Excluded: the form autocomplete chips, which also use .badge.bg-secondary
   but have a transparent background (see "Form autocomplete selection
   chips" above) and must keep their dark text.
   ========================================================================== */
.badge.bg-secondary.text-dark:not(.form-autocomplete-selection .badge),
.badge.bg-secondary.text-dark.dropdown-toggle:not(.form-autocomplete-selection .badge):hover,
.badge.bg-secondary.text-dark.dropdown-toggle:not(.form-autocomplete-selection .badge):focus,
.badge.bg-secondary.text-dark.dropdown-toggle:not(.form-autocomplete-selection .badge)[aria-expanded="true"] {
    color: var(--moringa-white, #fff) !important;
}

/* Eye icon and the dropdown caret follow the text colour. */
.badge.bg-secondary.text-dark:not(.form-autocomplete-selection .badge) .icon {
    color: inherit;
}

.badge.bg-secondary.text-dark.dropdown-toggle:not(.form-autocomplete-selection .badge)::after {
    border-top-color: currentColor;
}
/* ==========================================================================
   Hidden-from-students indicators (staff only - students never receive hidden
   items). Sidebar rows get a dimmed name + eye-slash icon (course_tree /
   module_tree.mustache); the lesson list and the activity header get a
   "Hidden from students" pill (mycourse.mustache).
   ========================================================================== */
#section_listing .course-tree-node.is-hidden > .course-tree-section .section-name,
#section_listing .course-tree-leaf.is-hidden .course-tree-lesson-link {
    opacity: .6;
    font-style: italic;
}

.course-tree-hidden-icon {
    color: #64748b;
    font-size: 12px;
    margin-left: 6px;
}

#section_listing .course-module-header .course-tree-hidden-icon {
    color: rgba(255, 255, 255, .8);
}

.lesson-status-hidden {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
    padding: 3px 10px;
    border-radius: var(--moringa-radius-pill, 999px);
    background: color-mix(in srgb, #64748b 14%, transparent);
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

#lesson_listing .lesson-list .lesson-item--hidden {
    border-left: 3px dashed #94a3b8;
}

#lesson_listing .lesson-list .lesson-item--hidden .lesson-icon {
    opacity: .6;
}

/* ==========================================================================
   "Submission Received" card - rich submission rows
   (local/assignstart/submitted.php, theme_moringa/mod_assign_submitted).
   The key/value rows above are one flex line: label left, value right-
   aligned. Fine for a date or a name; not for what submission plugins put
   in the value - a list of (long) links, file lists, online text, or core's
   comments widget. Those rows stack: label on top, content full width
   below, and each kind of content gets a proper component.
   ========================================================================== */
.moringa-submitted-card .moringa-submitted-row:has(ul, ol, .fileuploadsubmission, .no-overflow, .comment-link, .comment-ctrl, textarea) {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.moringa-submitted-card .moringa-submitted-row:has(ul, ol, .fileuploadsubmission, .no-overflow, .comment-link, .comment-ctrl, textarea) .moringa-submitted-value {
    width: 100%;
    min-width: 0;
    text-align: left;
    font-weight: 500;
}

/* Every value may shrink, so nothing pushes the card wider than itself. */
.moringa-submitted-card .moringa-submitted-value {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* --- Links (link submissions) and files: one card per item -------------- */
.moringa-submitted-card .moringa-submitted-value ul,
.moringa-submitted-card .moringa-submitted-value ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.moringa-submitted-card .moringa-submitted-value li:has(> a),
.moringa-submitted-card .moringa-submitted-value .fileuploadsubmission {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 10px 14px;
    background: var(--moringa-white);
    border: 1px solid var(--moringa-grey-200);
    border-radius: var(--moringa-radius, 12px);
    transition: border-color 0.15s ease;
}

.moringa-submitted-card .moringa-submitted-value li:has(> a):hover,
.moringa-submitted-card .moringa-submitted-value .fileuploadsubmission:hover {
    border-color: var(--moringa-orange);
}

/* Link icon in front of each link item. */
.moringa-submitted-card .moringa-submitted-value li:has(> a)::before {
    content: "\f0c1"; /* fa-link */
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--moringa-cyan) 12%, transparent);
    color: var(--moringa-cyan);
    font-family: "Font Awesome 6 Free", "FontAwesome";
    font-weight: 900;
    font-size: 13px;
}

/* The URL / file name: one line, cut with an ellipsis instead of breaking
   into a ragged right-aligned block. The full address is still the href. */
.moringa-submitted-card .moringa-submitted-value li > a,
.moringa-submitted-card .moringa-submitted-value .fileuploadsubmission a {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--moringa-orange);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.moringa-submitted-card .moringa-submitted-value li > a:hover,
.moringa-submitted-card .moringa-submitted-value .fileuploadsubmission a:hover {
    text-decoration: underline;
}

/* File plugin: its own icon + the upload time on the right. */
.moringa-submitted-card .moringa-submitted-value .fileuploadsubmission .icon,
.moringa-submitted-card .moringa-submitted-value .fileuploadsubmission img {
    flex: 0 0 auto;
    margin: 0;
}

.moringa-submitted-card .moringa-submitted-value .fileuploadsubmissiontime {
    flex: 0 0 auto;
    color: var(--moringa-muted);
    font-size: 12px;
    font-weight: 500;
}

/* Online text: normal reading text, not bold right-aligned. */
.moringa-submitted-card .moringa-submitted-value .no-overflow {
    color: var(--moringa-text);
    font-weight: 400;
    line-height: 1.55;
}

/* --- Submission comments (core comment widget) --------------------------- */
/* Toggle: "> Comments (0)" as a compact pill. */
.moringa-submitted-card .comment-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--moringa-grey-200);
    border-radius: var(--moringa-radius-pill, 999px);
    background: var(--moringa-white);
    color: var(--moringa-navy);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.moringa-submitted-card .comment-link:hover,
.moringa-submitted-card .comment-link:focus-visible {
    border-color: var(--moringa-orange);
    color: var(--moringa-orange);
    text-decoration: none;
}

.moringa-submitted-card .comment-link .icon,
.moringa-submitted-card .comment-link img {
    margin: 0;
    width: 12px;
    height: 12px;
    font-size: 11px;
}

.moringa-submitted-card .comment-ctrl {
    margin-top: 12px;
    text-align: left;
}

/* Existing comments: bubbles. */
.moringa-submitted-card .comment-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.moringa-submitted-card .comment-list li.first:empty {
    display: none;
}

.moringa-submitted-card .comment-list .comment-message {
    padding: 10px 14px;
    background: var(--moringa-white);
    border: 1px solid var(--moringa-grey-200);
    border-radius: var(--moringa-radius, 12px);
}

.moringa-submitted-card .comment-message-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--moringa-muted);
}

.moringa-submitted-card .comment-message-meta .picture img,
.moringa-submitted-card .comment-message-meta .userpicture {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.moringa-submitted-card .comment-message .text {
    color: var(--moringa-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.moringa-submitted-card .comment-delete a {
    color: var(--moringa-muted);
}

/* New comment: full-width field, then the actions. */
.moringa-submitted-card .comment-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: none;
}

.moringa-submitted-card .comment-area .db,
.moringa-submitted-card .comment-area textarea {
    width: 100%;
    max-width: none;
}

.moringa-submitted-card .comment-area textarea {
    display: block;
    min-height: 88px;
    padding: 10px 14px;
    border: 1px solid var(--moringa-grey-300, #d0d5dd);
    border-radius: var(--moringa-radius, 12px);
    background: var(--moringa-white);
    color: var(--moringa-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    resize: vertical;
}

.moringa-submitted-card .comment-area textarea:focus {
    border-color: var(--moringa-cyan);
    outline: none;
    box-shadow: var(--moringa-focus-ring);
}

/* "Save comment | Cancel": primary pill + quiet text link, no "|". */
.moringa-submitted-card .comment-area .fd {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    font-size: 0;           /* hides the literal " | " text node between the links */
}

.moringa-submitted-card .comment-area .fd > span {
    display: none;          /* ...and the separator span, where core wraps it */
}

.moringa-submitted-card .comment-area .fd a {
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.moringa-submitted-card .comment-area .fd a[id^="comment-action-post"] {
    padding: 8px 18px;
    border-radius: var(--moringa-radius-pill, 999px);
    background: var(--moringa-orange);
    color: var(--moringa-white);
}

.moringa-submitted-card .comment-area .fd a[id^="comment-action-post"]:hover {
    background: color-mix(in srgb, var(--moringa-orange) 88%, var(--moringa-navy));
    color: var(--moringa-white);
}

.moringa-submitted-card .comment-area .fd a[id^="comment-action-cancel"] {
    color: var(--moringa-muted);
}

.moringa-submitted-card .comment-area .fd a[id^="comment-action-cancel"]:hover {
    color: var(--moringa-navy);
}

.moringa-submitted-card .comment-pagination:empty {
    display: none;
}