/*
 * Mindoe theme styles (ported from the Alpha custom SCSS, 2026-10-27).
 *
 * Plain CSS, served by the web server as is (added to every page by theme_mindoe_page_init() in lib.php,
 * after Boost's compiled CSS). Edit and reload the browser: no SCSS compile, no cache purge.
 * Colours: var(--bs-primary) follows the theme's brand colour setting; --mindoe-text is the Mindoe ink.
 *
 * @package   theme_mindoe
 * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

:root {
    --mindoe-text: #43434f;
    --mindoe-text-rgb: 67, 67, 79;
    --mindoe-lavender: #f0f1fe;
    --mindoe-shadow-rgb: 38, 34, 140;
}

/* Poppins (SIL OFL 1.1, fonts/OFL.txt), self-hosted: no calls to Google. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Poppins-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/Poppins-ExtraBold.ttf') format('truetype'); }

/* ---- General look ----------------------------------------------------------------------------- */
.btn { border-radius: 47px; }
::selection { background-color: rgba(var(--bs-primary-rgb), .18); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--mindoe-text); font-weight: 700; }
/* No Moodle footer anywhere: the round "?" button (bottom right) and its panel - docs, support, "logged in as",
   mobile app, "Powered by Moodle" - which phones get as a block under the page. The button is part of Boost's footer
   template (no setting removes it). Only hidden: the page's JavaScript printed inside it still runs, and the
   developer debug strip (shown only with debugging on) stays. */
#page-footer .btn-footer-popover,
#page-footer .btn-footer-communication,
#page-footer [data-region="footer-content-popover"] { display: none !important; }
/* Developer debug output (only with debugging on: "Purge all caches", reactive instances, performance info): a small
   deep-indigo card at the end of the page instead of a black slab flush with the bottom of the window. */
#page-footer { background: transparent !important; }
#page-footer .footer-content-debugging {
    background: #1e1b4b !important;
    border-radius: 18px;
    box-shadow: 0 20px 40px -28px rgba(var(--mindoe-shadow-rgb), .7);
    color: rgba(255, 255, 255, .7) !important;
    font-size: 13px;
    line-height: 1.5;
    margin: 8px 23px 32px; /* Lined up with the content cards: #region-main sits 8px inside the footer, plus its 15px pad. */
    overflow: hidden;
}
@media (max-width: 767.98px) {
    #page-footer .footer-content-debugging { margin-left: 8px; margin-right: 8px; }
}
/* Boost always prints the debug area; its content (purge link, reactive panel, performance info) is only there for site
   admins in developer mode. Everyone else would get an empty card. */
#page-footer .footer-content-debugging:not(:has(.footer-dark-inner > *)) { display: none; }
/* Pages with Moodle's sticky bar at the bottom (activity Done/Next, form Save/Cancel): the card ends above the bar. */
body.hasstickyfooter #page-footer .footer-content-debugging { margin-bottom: calc(32px + var(--sticky-footer-total-height, 4rem)); }
#page-footer .footer-dark-inner { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 12px 16px !important; }
#page-footer .footer-dark-inner::before {
    background: #a5a2f7;
    content: "";
    flex: none;
    height: 18px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5M13.5 4l-3 16'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5M13.5 4l-3 16'/%3E%3C/svg%3E") center / contain no-repeat;
    width: 18px;
}
#page-footer .footer-dark-inner a { color: #c9c6f6; }
#page-footer .footer-dark-inner a:hover { color: #fff; }
#page-footer .footer-dark-inner .purgecaches a {
    background: rgba(255, 255, 255, .1);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-weight: 600;
    padding: 5px 12px;
    text-decoration: none;
    transition: background-color .15s ease-out;
}
#page-footer .footer-dark-inner .purgecaches a:hover { background: rgba(255, 255, 255, .2); }
#page-footer .footer-dark-inner > .py-1 { padding: 0 !important; }

/* ---- Header (Boost navbar, Moodle 5.3 nav pills) ---------------------------------------------- */
/* White bar, brand gradient hairline on top (indigo → lilac → peach, the Mindoe palette), indigo nav pills.
   The bar spans the window; its content sits in a 1140px column, aligned with the front-page content. */
.navbar.fixed-top {
    background-color: #fff !important; /* Boost sets .bg-body with !important. */
    border-bottom: 1px solid rgba(var(--mindoe-text-rgb), .08);
    box-shadow: 0 10px 28px -20px rgba(var(--mindoe-shadow-rgb), .45);
}
.navbar.fixed-top::before {
    background: linear-gradient(90deg, var(--bs-primary) 0%, #9f9ef6 55%, #feedba 100%);
    content: '';
    height: 3px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.navbar.fixed-top > .container-fluid { margin-left: auto; margin-right: auto; max-width: 1140px; }
/* 72px bar ($navbar-height in lib.php): logo, pills and buttons scaled to it. */
.navbar.fixed-top .navbar-brand { margin-right: 28px !important; }
.navbar.fixed-top .navbar-brand .logo { height: 26px; max-height: none; width: auto; }
.navbar.fixed-top .primary-navigation .navigation .nav-link,
.navbar.fixed-top .primarynav-navbar .nav-item { height: 72px; }
.navbar.fixed-top .primarynav-navbar .more-nav { gap: 2px; }
.navbar.fixed-top .mds-nav-pill { height: 40px !important; padding: 0 18px !important; }
/* Boost hides the logo below md (d-none d-md-flex); on phones the bar would otherwise be just the menu button. */
.navbar.fixed-top .navbar-brand.d-none { display: flex !important; }
.navbar.fixed-top .usermenu .login a {
    align-items: center;
    background-color: var(--bs-primary);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 15px;
    font-weight: 500;
    height: 44px;
    padding: 0 26px;
    text-decoration: none;
    transition: background-color .15s ease-out, box-shadow .15s ease-out;
}
.navbar.fixed-top .usermenu .login a:hover {
    background-color: color-mix(in srgb, var(--bs-primary) 85%, #000);
    box-shadow: 0 8px 18px -10px rgba(var(--bs-primary-rgb), .8);
}
.navbar.fixed-top .usermenu .login a:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 3px; }
/* Front page: the hero has its own Log in button, so the header one waits until that has scrolled away
   (body.mindoe-cta-passed is set by the script in core_renderer::main_content()). Only in the site home's own
   layout: Moodle's error pages share its page id. */
.navbar.fixed-top .usermenu .login { transition: opacity .25s ease-out, translate .35s cubic-bezier(.16, 1, .3, 1), visibility .35s; }
#page-site-index.pagelayout-frontpage:not(.mindoe-cta-passed) .navbar.fixed-top .usermenu .login { opacity: 0; translate: 0 -6px; visibility: hidden; }

/* Menu button: two rounded strokes in the Mindoe ink instead of Bootstrap's three grey lines. */
.navbar.fixed-top .navbar-toggler {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    transition: background-color .15s ease-out;
    width: 44px;
}
.navbar.fixed-top .navbar-toggler:hover { background-color: var(--mindoe-lavender); }
.navbar.fixed-top .navbar-toggler:focus-visible { box-shadow: none; outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.navbar.fixed-top .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='none' stroke='%2343434f' stroke-linecap='round' stroke-width='2.2' d='M4 8.5h16M4 15.5h10'/%3e%3c/svg%3e");
    height: 24px;
    width: 24px;
}
.navbar.fixed-top .userinitials { background-color: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary); font-weight: 600; }
.navbar.fixed-top .userfirstname { color: var(--mindoe-text); font-weight: 500; }
/* Dropdown menus everywhere (header, admin bar "More", user menu, action menus in pages): one design - a white
   rounded panel with a soft shadow, 14px medium items (a step below the 15px nav), lavender + indigo on hover. */
#page-wrapper .dropdown-menu {
    background-color: #fff; /* Bootstrap uses the body background (lavender) here. */
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 16px;
    box-shadow: 0 20px 44px -24px rgba(var(--mindoe-shadow-rgb), .45);
    min-width: 200px;
    padding: 8px;
}
#page-wrapper .dropdown-menu .dropdown-item {
    border-radius: 10px;
    color: var(--mindoe-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    padding: 8px 12px;
}
#page-wrapper .usermenu .dropdown-menu .dropdown-item { padding-right: 28px; } /* Room for Moodle's sub-menu arrows. */
#page-wrapper .dropdown-menu .dropdown-item:hover,
#page-wrapper .dropdown-menu .dropdown-item:focus { background-color: var(--mindoe-lavender); color: var(--bs-primary); }
#page-wrapper .dropdown-menu .dropdown-item.active,
#page-wrapper .dropdown-menu .dropdown-item:active { background-color: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary); }
/* Destructive items (Delete, Remove…: .text-danger): red at rest, and on hover a soft red tint with red text. Moodle
   turns their text white (!important) for a red background, which on the lavender hover above left Delete invisible. */
#page-wrapper .dropdown-menu .dropdown-item.text-danger { color: #d93a3a !important; }
#page-wrapper .dropdown-menu .dropdown-item.text-danger:is(:hover, :focus, :active) { background-color: #fdeeee; color: #c42d2d !important; }
#page-wrapper .dropdown-menu .dropdown-item.text-danger .icon { color: inherit !important; }
/* Menus that mark the current choice (header "Courses", language, Course overview filters…): Moodle draws a check in
   the item's ::before at .4rem, which our 12px padding put under the text. Every item of such a menu gets room for
   it, so the labels stay aligned; the current one is tinted, bold and indigo. */
#page-wrapper .dropdown-menu:has(.dropdown-item:is([aria-current]:not([aria-current="false"]), [aria-selected="true"])) .dropdown-item { padding-left: 34px; position: relative; }
#page-wrapper .dropdown-menu .dropdown-item:is([aria-current]:not([aria-current="false"]), [aria-selected="true"]) {
    background-color: rgba(var(--bs-primary-rgb), .06);
    color: var(--bs-primary);
    font-weight: 600;
}
#page-wrapper .dropdown-menu .dropdown-item:is([aria-current]:not([aria-current="false"]), [aria-selected="true"])::before { color: var(--bs-primary); left: 12px; }
#page-wrapper .dropdown-menu .dropdown-divider { border-color: rgba(var(--mindoe-text-rgb), .08); margin: 6px 4px; }
/* Focus: no ring after a click (Moodle/Bootstrap draw a 4px one), a slim indigo outline for keyboard users. */
#page-wrapper .dropdown-menu .dropdown-item:focus { box-shadow: none; outline: 0; }
#page-wrapper .dropdown-menu .dropdown-item:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: -2px; }

/* Notifications popover (bell): the dropdown panel look - rounded white panel, header with round icon buttons,
   roomy rows with hairlines, unread rows tinted indigo with a dot, "See all" as a quiet footer link. */
/* Moodle sizes the list as "panel height - 55px" for its 25px header; a flex column lets header and footer take
   their own height and the list the rest. */
#page-wrapper .popover-region .popover-region-container {
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 16px;
    box-shadow: 0 20px 44px -24px rgba(var(--mindoe-shadow-rgb), .45);
    display: flex;
    flex-direction: column;
    margin-top: 2px;
    overflow: hidden;
}
#page-wrapper .popover-region .popover-region-content-container { flex: 1 1 auto; height: auto; min-height: 0; }
#page-wrapper .popover-region:not(.collapsed) .popover-region-toggle::before,
#page-wrapper .popover-region:not(.collapsed) .popover-region-toggle::after { display: none; }
/* The bell: a 44px round button (20px icon) with a lavender hover and an indigo keyboard focus ring, like the other
   header buttons; the unread count sits on its top-right corner. */
#page-wrapper .navbar .popover-region { align-items: center; display: flex; }
#page-wrapper .navbar .popover-region-toggle {
    align-items: center;
    border-radius: 50%;
    color: var(--mindoe-text);
    display: flex;
    height: 44px;
    justify-content: center;
    margin: 0 4px 0 10px;
    padding: 0;
    position: relative;
    transition: background-color .15s ease-out, color .15s ease-out;
    width: 44px;
}
#page-wrapper .navbar .popover-region-toggle .icon { font-size: 20px; height: 20px; margin: 0; width: 20px; }
#page-wrapper .navbar .popover-region-toggle:hover,
#page-wrapper .navbar .popover-region:not(.collapsed) .popover-region-toggle { background-color: var(--mindoe-lavender); color: var(--bs-primary); }
#page-wrapper .navbar .popover-region-toggle:focus { box-shadow: none; outline: 0; }
#page-wrapper .navbar .popover-region-toggle:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
#page-wrapper .popover-region .count-container {
    border: 2px solid #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
    min-width: 18px;
    padding: 0 4px;
    right: 0;
    text-align: center;
    top: 2px;
}
/* The title and the buttons are floats in Moodle's markup, which collapsed the header to its padding: a flex row. */
#page-wrapper .popover-region .popover-region-header-container {
    align-items: center;
    border-bottom: 1px solid rgba(var(--mindoe-text-rgb), .08);
    display: flex;
    flex: none;
    height: auto;
    justify-content: space-between;
    padding: 12px 10px 12px 18px;
}
#page-wrapper .popover-region .popover-region-header-text { color: var(--mindoe-text); font-size: 15px; font-weight: 600; line-height: 1.3; margin: 0; }
#page-wrapper .popover-region .popover-region-header-actions { align-items: center; display: flex; gap: 2px; }
#page-wrapper .popover-region .popover-region-header-actions .btn {
    align-items: center;
    border: 0;
    border-radius: 50%;
    color: rgba(var(--mindoe-text-rgb), .6);
    display: inline-flex;
    height: 32px;
    justify-content: center;
    padding: 0;
    width: 32px;
}
#page-wrapper .popover-region .popover-region-header-actions .btn .icon { color: inherit; margin: 0; }
#page-wrapper .popover-region .popover-region-header-actions .btn:hover { background-color: var(--mindoe-lavender); color: var(--bs-primary); }
#page-wrapper .popover-region .popover-region-header-actions .btn:focus { box-shadow: none; }
#page-wrapper .popover-region .popover-region-header-actions .btn:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 1px; }
#page-wrapper .popover-region .content-item-container {
    background-color: #fff;
    border: 0;
    border-bottom: 1px solid rgba(var(--mindoe-text-rgb), .06);
    padding: 12px 18px;
    position: relative;
    transition: background-color .15s ease-out;
}
#page-wrapper .popover-region .content-item-container:hover { background-color: var(--mindoe-lavender); color: var(--mindoe-text); }
/* Boost turns the time white on hover (for its indigo fill): quiet grey on the lavender one. */
#page-wrapper .popover-region .content-item-container:hover .timestamp { color: rgba(var(--mindoe-text-rgb), .55); }
#page-wrapper .popover-region .content-item-container.unread { background-color: rgba(var(--bs-primary-rgb), .04); padding-left: 30px; }
#page-wrapper .popover-region .content-item-container.unread:hover { background-color: var(--mindoe-lavender); }
#page-wrapper .popover-region .content-item-container.unread::before {
    background: var(--bs-primary);
    border-radius: 50%;
    content: '';
    height: 7px;
    left: 14px;
    position: absolute;
    top: 19px;
    width: 7px;
}
#page-wrapper .popover-region .content-item-container .context-link { color: var(--mindoe-text); text-decoration: none; }
#page-wrapper .popover-region .notification-message { color: var(--mindoe-text); font-size: 13px; line-height: 1.45; }
#page-wrapper .popover-region .content-item-footer { margin-top: 4px; }
#page-wrapper .popover-region .timestamp { color: rgba(var(--mindoe-text-rgb), .55); font-size: 12px; line-height: 1.4; }
#page-wrapper .popover-region .content-item-container .view-more { bottom: 12px; font-size: 12px; font-weight: 500; right: 18px; }
#page-wrapper .popover-region .see-all-link { flex: none; text-decoration: none; }
#page-wrapper .popover-region .popover-region-footer-container {
    background: #fff;
    border-top: 1px solid rgba(var(--mindoe-text-rgb), .08);
    height: auto;
    padding: 12px 0;
    transition: background-color .15s ease-out;
}
#page-wrapper .popover-region .see-all-link:hover .popover-region-footer-container { background-color: var(--mindoe-lavender); }
#page-wrapper .popover-region .popover-region-seeall-text { font-size: 14px; font-weight: 500; }
#page-wrapper .popover-region .empty-message { color: rgba(var(--mindoe-text-rgb), .6); font-size: 13px; padding: 24px 18px; }

/* Nested sub-menus (e.g. More → Content): they open inline inside the panel as an indented group - not a panel in
   a panel - the toggle stays highlighted with its chevron flipped, and the items slide in with an indigo dot. */
@keyframes mindoe-submenu-in {
    from { opacity: 0; translate: 0 -4px; }
    to { opacity: 1; translate: 0 0; }
}
#page-wrapper .dropdown-menu .dropdown-submenu > .dropdown-toggle::after { transition: rotate .2s ease-out; }
#page-wrapper .dropdown-menu .dropdown-submenu > .dropdown-toggle.show { background-color: var(--mindoe-lavender); color: var(--bs-primary); }
#page-wrapper .dropdown-menu .dropdown-submenu > .dropdown-toggle.show::after { rotate: 180deg; }
#page-wrapper .dropdown-menu .dropdown-submenu > .dropdown-menu {
    animation: mindoe-submenu-in .25s cubic-bezier(.16, 1, .3, 1) both;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 4px 0 2px;
    min-width: 0;
    padding: 0 0 0 10px;
    position: static;
}
#page-wrapper .dropdown-menu .dropdown-submenu > .dropdown-menu .dropdown-item {
    align-items: center;
    background-color: transparent;
    color: rgba(var(--mindoe-text-rgb), .8);
    display: flex;
    gap: 10px;
}
#page-wrapper .dropdown-menu .dropdown-submenu > .dropdown-menu .dropdown-item::before {
    background: rgba(var(--bs-primary-rgb), .35);
    border-radius: 50%;
    content: '';
    flex: none;
    height: 5px;
    transition: background-color .15s ease-out, scale .2s cubic-bezier(.16, 1, .3, 1);
    width: 5px;
}
#page-wrapper .dropdown-menu .dropdown-submenu > .dropdown-menu .dropdown-item:hover { background-color: var(--mindoe-lavender); color: var(--bs-primary); }
#page-wrapper .dropdown-menu .dropdown-submenu > .dropdown-menu .dropdown-item:hover::before { background: var(--bs-primary); scale: 1.4; }
@media (prefers-reduced-motion: reduce) {
    #page-wrapper .dropdown-menu .dropdown-submenu > .dropdown-menu { animation: none; }
}
/* Bootstrap 5 draws a dark border on a .btn while its menu is open (.btn.show); the user menu gets the nav pills'
   open look instead. */
#page-wrapper #user-menu-toggle {
    align-self: center;
    border-color: transparent;
    border-radius: 999px;
    height: 46px;
    padding: 0 12px 0 5px;
    transition: background-color .15s ease-out;
}
#page-wrapper #user-menu-toggle.show,
#page-wrapper #user-menu-toggle:hover { background-color: var(--mindoe-lavender); border-color: transparent; }
#page-wrapper #user-menu-toggle:focus { box-shadow: none; outline: 0; }
#page-wrapper #user-menu-toggle:focus-visible { border-radius: 12px; outline: 2px solid var(--bs-primary); outline-offset: -6px; }
/* Moodle moves focus onto the user menu's panel (a tabindex="-1" container), which drew the browser's blue box. */
#page-wrapper .usermenu .carousel-item:focus { outline: 0; }

/* Edit mode switch (Moodle's React mds-switch): a nav pill holding the label and a Mindoe switch - a lavender track
   with a white thumb that springs across; switched on, the track fills with the brand gradient and the thumb shows an
   indigo tick. Colours through the switch's own variables; the transparent input covers the whole control, so hover
   is keyed off it. */
.navbar .editmode-switch-form {
    --mds-bg-switch-track-default: #e3e1fb;
    --mds-bg-switch-track-hover: #d4d1fb;
    --mds-bg-switch-thumb-default: #fff;
    --mds-bg-switch-thumb-hover: #fff;
    --mds-bg-interactive-primary-default: var(--bs-primary);
    --mds-bg-interactive-primary-hover: var(--bs-primary);
    --mds-bg-interactive-primary-default-light: #fff;
}
.navbar .editmode-switch-form .mds-switch-control {
    align-items: center;
    border-radius: 999px;
    gap: 10px;
    height: 40px;
    padding: 0 10px 0 16px;
    transition: background-color .15s ease-out;
}
.navbar .editmode-switch-form .mds-switch-input:not(:disabled):hover + .mds-switch-control { background-color: var(--mindoe-lavender); }
.navbar .editmode-switch-form .mds-switch-label { color: var(--mindoe-text); font-size: 15px; font-weight: 500; line-height: 1.2; }
.navbar .editmode-switch-form .mds-switch-input:not(:disabled):hover + .mds-switch-control .mds-switch-label,
.navbar .editmode-switch-form .mds-switch-input:checked + .mds-switch-control .mds-switch-label { color: var(--bs-primary); }
.navbar .editmode-switch-form .mds-switch-indicator { flex: none; height: 24px; width: 42px; }
.navbar .editmode-switch-form .mds-switch-track {
    box-shadow: inset 0 1px 2px rgba(var(--mindoe-shadow-rgb), .12);
    padding: 3px;
    transition: background-color .2s ease-out;
}
.navbar .editmode-switch-form .mds-switch-input:checked + .mds-switch-control .mds-switch-track {
    background-image: linear-gradient(90deg, var(--bs-primary), #8b88f5);
    box-shadow: 0 6px 14px -8px rgba(var(--bs-primary-rgb), .8);
}
.navbar .editmode-switch-form .mds-switch-thumb {
    box-shadow: 0 2px 6px -1px rgba(var(--mindoe-shadow-rgb), .4);
    color: var(--bs-primary);
    height: 18px;
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background-color .15s ease-out;
    width: 18px;
}
.navbar .editmode-switch-form .mds-switch-input:checked + .mds-switch-control .mds-switch-thumb { transform: translateX(18px); }
[dir="rtl"] .navbar .editmode-switch-form .mds-switch-input:checked + .mds-switch-control .mds-switch-thumb { transform: translateX(-18px); }
/* Off: a plain white thumb (no "x"); on: the tick in indigo. */
.navbar .editmode-switch-form .mds-switch-icon-item--unchecked { opacity: 0; }
.navbar .editmode-switch-form .mds-switch-input:focus-visible + .mds-switch-control { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.navbar .editmode-switch-form .mds-switch-input:focus-visible + .mds-switch-control .mds-switch-focus-ring { outline: 0; }
@media (prefers-reduced-motion: reduce) {
    .navbar .editmode-switch-form .mds-switch-thumb { transition: none; }
}

/* Nav pills: primary navigation (navbar) and secondary navigation (course/admin tabs). */
#page-wrapper .mds-nav-pill {
    align-items: center;
    border-radius: 999px;
    color: var(--mindoe-text);
    display: inline-flex;
    font-size: 15px;
    font-weight: 500;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    transition: background-color .15s ease-out, color .15s ease-out;
}
#page-wrapper .mds-nav-pill:hover,
#page-wrapper .mds-nav-pill[aria-expanded="true"] { background-color: var(--mindoe-lavender); color: var(--bs-primary); }
#page-wrapper .mds-nav-pill:focus-visible { box-shadow: none; outline: 2px solid var(--bs-primary); outline-offset: 2px; }
#page-wrapper .mds-nav-pill.mds-nav-pill--selected,
#page-wrapper .secondary-navigation .mds-nav-pill.active { background-color: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary); }
#page-wrapper .mds-nav-pill .mds-nav-pill__indicator { background-color: var(--bs-primary); }

/* Links: Boost keeps its keyboard-focus look (black text on a light fill with a dark bar under it) on a link after it is
   clicked, e.g. "Tags" on the profile. Nothing for a mouse click; a lavender ring when focus comes from the keyboard. */
:is(.aalink, #page-footer a:not([class]), .arrow_link, a:not([class]), .activityinstance > a):is(.focus, :focus) {
    background-color: transparent;
    box-shadow: none;
    color: var(--bs-link-hover-color);
}
:is(.aalink, #page-footer a:not([class]), .arrow_link, a:not([class]), .activityinstance > a):focus-visible {
    background-color: #ebe9fd;
    border-radius: 6px;
    box-shadow: 0 0 0 3px #ebe9fd;
    color: var(--bs-primary);
}

/* ---- Buttons ---------------------------------------------------------------------------------- */
/* Outline buttons (Moodle's filter, sort, "Show" and similar menu buttons): Bootstrap fills them dark grey on hover
   and while open or pressed. Instead a lavender hover, and one "active control" look for open/pressed - white,
   indigo border and a soft ring, like a focused field - used by every dropdown button in the theme. */
#page-wrapper .btn-outline-secondary:hover { background-color: var(--mindoe-lavender); border-color: rgba(var(--bs-primary-rgb), .25); color: var(--bs-primary); }
#page-wrapper .btn-outline-secondary:is(.show, :active, [aria-expanded="true"]) {
    background-color: #fff;
    border-color: rgba(var(--bs-primary-rgb), .45);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .12);
    color: var(--bs-primary);
}

/* Secondary buttons (Cancel, Download, Reset…): a lavender pill in the brand colour instead of Bootstrap grey. */
/* #e7e5fc, a step deeper than the page's lavender, so the pill also shows on the lavender page background. */
.btn-secondary { background-color: #e7e5fc; border-color: transparent; color: var(--bs-primary); }
.btn-secondary:hover,
.btn-secondary:focus { background-color: #dcd9fb; border-color: transparent; color: var(--bs-primary); }
.btn-secondary:active,
.btn-secondary.show { background-color: #d4d1fb !important; border-color: transparent !important; color: var(--bs-primary) !important; }
.btn-primary { box-shadow: 0 10px 22px -14px rgba(var(--bs-primary-rgb), .8); }
.btn-primary:hover { box-shadow: 0 14px 26px -14px rgba(var(--bs-primary-rgb), .9); }
.badge { border-radius: 999px; font-weight: 600; }

/* ---- Page heading and breadcrumbs (pages without a hero) -------------------------------------- */
#page-header h1 { color: var(--mindoe-text); font-weight: 800; letter-spacing: -.025em; }
#page-header .breadcrumb { background: transparent; font-size: 14px; margin-bottom: 6px; padding: 0; }
#page-header .breadcrumb-item a { color: rgba(var(--mindoe-text-rgb), .6); text-decoration: none; transition: color .15s ease-out; }
#page-header .breadcrumb-item a:hover { color: var(--bs-primary); }
#page-header .breadcrumb-item + .breadcrumb-item::before { color: rgba(var(--mindoe-text-rgb), .3); content: "›"; }
#page-header .breadcrumb-item:last-child,
#page-header .breadcrumb-item [aria-current="page"] { color: var(--mindoe-text); font-weight: 500; }
/* Plain headings inside the page content ("Permissions in …", "Upload a backup file", "Course backup area"): Bootstrap
   sizes them 30px and 26px, as loud as the page title in Poppins. Section-heading sizes instead. :where() keeps this
   at element specificity, so every heading with a class or a theme rule of its own keeps its size. */
:where(#region-main) h2 { font-size: 22px; font-weight: 700; letter-spacing: -.015em; }
:where(#region-main) h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
:where(#region-main) h4 { font-size: 16px; font-weight: 700; }

/* ---- Form fields (all Moodle forms) ----------------------------------------------------------- */
/* White rounded fields with a soft border and the indigo focus ring of the login page; checkboxes and radios in the
   brand colour. Low specificity on purpose: the theme's own fields (login, search trays) keep their looks. */
.form-control,
.form-select,
.custom-select {
    border: 1px solid rgba(var(--mindoe-text-rgb), .16);
    border-radius: 12px;
    color: var(--mindoe-text);
    transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
.form-control:not(textarea),
.form-select,
.custom-select { min-height: 42px; }
.form-control:hover,
.form-select:hover,
.custom-select:hover { border-color: rgba(var(--mindoe-text-rgb), .28); }
.form-control:focus,
.form-select:focus,
.custom-select:focus { background-color: #fff; border-color: rgba(var(--bs-primary-rgb), .55); box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .12); }
.form-control::placeholder { color: rgba(var(--mindoe-text-rgb), .45); }
.form-control:disabled,
.form-control[readonly],
.form-select:disabled { background-color: #f6f6fb; }
.form-select:disabled { color: rgba(var(--mindoe-text-rgb), .5); }
input[type="checkbox"],
input[type="radio"] { accent-color: var(--bs-primary); }
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.form-check-input:focus { border-color: rgba(var(--bs-primary-rgb), .55); box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .12); }
.col-form-label,
.form-label { color: rgba(var(--mindoe-text-rgb), .85); font-weight: 500; }
.form-text,
.form-control-feedback { font-size: 13px; }

/* Moodle forms (mform): each section is a white card; the section heading with its expand/collapse button. */
#region-main .mform fieldset.collapsible,
#region-main .mform > fieldset:not(.hidden):not([class*="d-none"]):has(> legend) {
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 24px;
    box-shadow: 0 20px 40px -38px rgba(var(--mindoe-shadow-rgb), .5);
    margin-bottom: 16px;
    padding: 14px 24px 8px;
}
#region-main .mform fieldset.collapsible legend,
#region-main .mform > fieldset > legend { float: none; font-size: 20px; font-weight: 700; margin-bottom: 8px; width: 100%; }
#region-main .mform fieldset.collapsible legend a { color: var(--mindoe-text); text-decoration: none; }
/* The visible section heading is an h3 after the (visually hidden) legend: card-title size, not 28px. A closed
   section is just its heading row, evenly padded. */
#region-main .mform fieldset:is(.collapsible, .fitem) > .d-flex h3 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
/* The hidden legend took a pixel above the heading row: out of the flow. A closed section: even padding, so its
   heading row sits in the middle (the card rule above set 8px at the bottom). */
#region-main .mform fieldset.collapsible > legend.visually-hidden { position: absolute; }
#region-main .mform fieldset.collapsible.collapsed:not(.hidden):has(> legend) { padding-bottom: 12px; padding-top: 12px; }
#region-main .mform fieldset.collapsible.collapsed > .d-flex { margin-bottom: 0 !important; }
#region-main .mform .ftoggler .btn-icon,
#region-main .mform .icons-collapse-expand {
    background: var(--mindoe-lavender);
    border: 0;
    border-radius: 50%;
    color: var(--bs-primary);
}
#region-main .mform .collapsible-actions a { font-weight: 600; text-decoration: none; }

/* A field's help (?) and required (!) icons right after its label's last word, not pushed to the far edge of the
   label column;
   the help icon in the brand colour instead of Bootstrap's teal. */
.mform .col-form-label.d-flex { display: block !important; text-wrap: pretty; }
.mform .col-form-label.d-flex > p { display: inline; } /* Labels of grouped fields (dates) are paragraphs. */
.mform .col-form-label .form-label-addon { display: inline-flex !important; margin-left: 6px !important; vertical-align: -1px; }
.mform .col-form-label .form-label-addon .help-icon { margin: 0 !important; }
.mform .col-form-label .help-icon .icon { color: var(--bs-primary) !important; opacity: .8; }
.mform .col-form-label .help-icon:hover .icon { opacity: 1; }
/* The required (*) and help (?) marks at a label's size, so they fit after it on one line in narrow label columns
   (Add a new course: "Course full name ! ?" broke onto two lines). */
.mform .col-form-label .form-label-addon .icon { font-size: 13px; height: 14px; width: 14px; }
/* Required fields: a small coral asterisk after the label instead of Moodle's red "!" disc, which read as an error on
   every required field. The same asterisk opens the "Required" note under the form, which is a soft coral pill. The
   glyph is a mask, so it takes the text colour of whatever holds it. */
.mform .col-form-label .form-label-addon > .text-danger { align-items: center; display: inline-flex; margin-right: 6px; }
/* The asterisk hugs the label ("Migrate from*"); the help icon keeps its usual distance after it. */
.mform .col-form-label .form-label-addon:has(> .text-danger:first-child) { margin-left: 3px !important; }
.mform :is(.col-form-label .form-label-addon > .text-danger, .fdescription.required) .icon.fa-circle-exclamation {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 3v18M4.2 7.5l15.6 9M4.2 16.5l15.6-9'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 3v18M4.2 7.5l15.6 9M4.2 16.5l15.6-9'/%3E%3C/svg%3E") center / contain no-repeat;
    background: currentColor;
    color: #d6453a !important;
    height: 9px;
    margin: 0;
    width: 9px;
}
.mform :is(.col-form-label .form-label-addon > .text-danger, .fdescription.required) .icon.fa-circle-exclamation::before { content: none; display: none; }
.mform .col-form-label .form-label-addon > .text-danger .icon.fa-circle-exclamation { transform: translateY(-4px); }
.mform .fdescription.required {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .08);
    border-radius: 999px;
    color: rgba(var(--mindoe-text-rgb), .65);
    display: inline-flex;
    font-size: 12px;
    font-weight: 500;
    gap: 7px;
    margin-top: 4px;
    padding: 5px 12px 5px 10px;
}
/* Inside a form card (category settings, preferences) the chip sits on white: a lavender one instead. */
#region-main [role="main"] > form.mform:has(> div.fitem:not(.femptylabel)) .fdescription.required { background: var(--mindoe-lavender); border-color: transparent; }
/* A page heading's help icon (Upload courses ?, My badges ?): brand colour, a little air (Moodle: teal, touching). */
#region-main h2 > .help-icon { margin-left: 8px !important; vertical-align: 2px; }
#region-main h2 > .help-icon .icon { color: var(--bs-primary) !important; font-size: 16px; opacity: .8; }
/* Text editor (TinyMCE): rounded and in the fields' hairline instead of a thick grey frame. */
.tox.tox-tinymce { border: 1px solid rgba(var(--mindoe-text-rgb), .16) !important; border-radius: 16px !important; }
.tox.tox-tinymce:focus-within { border-color: rgba(var(--bs-primary-rgb), .55) !important; box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .12); }

/* File manager (course image, attachments, any multi-file field): one rounded box - a quiet toolbar band with white
   square tool buttons and a segmented view switch, then the files area with the theme's dashed lavender drop zone
   (Moodle: two grey-bordered cards and a grey dashed box). */
.filemanager .fp-restrictions { color: rgba(var(--mindoe-text-rgb), .6); font-size: 13px; margin-bottom: 8px !important; text-align: left; }
/* "Accepted file types: Image files used on the web .gif .jpe…" under it: a quiet note, not body text. */
.filetypes-descriptions-intro, .form-filetypes-descriptions { color: rgba(var(--mindoe-text-rgb), .6); font-size: 13px; }
.filetypes-descriptions-intro { margin-top: 10px !important; }
.form-filetypes-descriptions small { color: inherit !important; font-family: var(--bs-font-monospace); font-size: 12px; }
.filemanager .fp-navbar.card {
    background: #fafaff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .1);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    padding: 8px 10px;
}
.filemanager .fp-toolbar .btn,
.filemanager .fp-viewbar .btn {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .1);
    border-radius: 10px;
    color: var(--bs-primary);
    display: inline-flex;
    height: 32px;
    justify-content: center;
    min-width: 34px;
    padding: 0 8px;
}
.filemanager .fp-toolbar .btn:hover,
.filemanager .fp-viewbar .btn:hover { background: var(--mindoe-lavender); }
.filemanager .fp-viewbar { background: #e7e5fc; border-radius: 12px; gap: 2px; padding: 3px; }
.filemanager .fp-viewbar .btn { background: transparent; border: 0; border-radius: 9px !important; color: rgba(var(--mindoe-text-rgb), .6); height: 28px; }
.filemanager .fp-viewbar .btn.checked { background: #fff; box-shadow: 0 4px 10px -6px rgba(var(--mindoe-shadow-rgb), .6); color: var(--bs-primary); }
.filemanager .fp-pathbar { font-size: 13px; margin-top: 6px; }
.filemanager .fp-pathbar a { font-weight: 600; text-decoration: none; }
.filemanager .fp-pathbar .icon, .filemanager .fp-pathbar img { color: var(--bs-primary); filter: none; opacity: .7; }
.filemanager .filemanager-container.card { border: 1px solid rgba(var(--mindoe-text-rgb), .1); border-radius: 0 0 18px 18px; padding: 10px; }
.filemanager .fm-empty-container {
    background: #f8f7ff;
    border: 2px dashed rgba(var(--bs-primary-rgb), .25) !important;
    border-radius: 14px;
    color: rgba(var(--mindoe-text-rgb), .7);
    font-size: 14px;
}
.filemanager .dndupload-arrow { color: var(--bs-primary); opacity: .6; }
.filemanager.dndupload-over .fm-empty-container { background: #ebe9fd; border-color: rgba(var(--bs-primary-rgb), .55) !important; }
/* A single-file picker's drop zone (Upload courses): flush with its "Choose a file…" button. */
.filepicker-filelist { margin-left: 0 !important; margin-top: 8px; }
/* Moodle insets the drop zone 10px inside an invisible box: flush with the button's edge and the field's width. */
.filepicker-filelist .filepicker-container { inset: 0 !important; }
/* Forms Moodle prints straight on the page (preferences, category settings…) with their fields loose on it: one white card holding fields and buttons, like the theme's form sections. Forms made
   only of sections (edit profile) keep a card per section. */
#region-main [role="main"] > form.mform:has(> div.fitem:not(.femptylabel)) {
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 24px;
    box-shadow: 0 24px 48px -42px rgba(var(--mindoe-shadow-rgb), .5);
    margin-top: 8px;
    padding: 24px 28px 8px;
}

/* A section inside such a card (Forum tracking): a divided part of it, not a card in a card. */
#region-main [role="main"] > form.mform:has(> div.fitem:not(.femptylabel)) fieldset.collapsible {
    background: transparent;
    border: 0;
    border-radius: 0;
    border-top: 1px solid rgba(var(--mindoe-text-rgb), .08);
    box-shadow: none;
    margin: 8px 0 16px;
    padding: 16px 0 0 !important;
}
#region-main [role="main"] > form.mform:has(> div.fitem:not(.femptylabel)) fieldset.collapsible > .fcontainer { padding-left: 0 !important; }

/* A form made of section cards (Migrate frameworks, Upload courses…): its buttons under the cards start on the cards'
   left edge. Moodle lines them up with the field column, which left them floating a quarter in under the cards. */
#region-main form.mform:not(:has(> div.fitem:not(.femptylabel))) > .fitem.femptylabel:has([type="submit"]) {
    margin-left: 0;
    margin-right: 0;
    margin-top: 4px;
}
#region-main form.mform:not(:has(> div.fitem:not(.femptylabel))) > .fitem.femptylabel:has([type="submit"]) > .col-form-label { display: none !important; }
#region-main form.mform:not(:has(> div.fitem:not(.femptylabel))) > .fitem.femptylabel:has([type="submit"]) > .felement {
    flex: 1 1 100%;
    max-width: 100%;
    padding-left: 0;
}
#region-main form.mform:not(:has(> div.fitem:not(.femptylabel))) > .fitem.femptylabel:has([type="submit"]) .fitem { margin-bottom: 0 !important; }

/* Its buttons at the body size (Moodle makes them 10% larger). */
#sticky-footer .btn { font-size: var(--bs-body-font-size); }
/* Sticky form/activity footer (Save/Cancel, Done/Next): a frosted white bar. */
#sticky-footer,
.stickyfooter {
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    background: rgba(255, 255, 255, .86) !important;
    border-top: 1px solid rgba(var(--mindoe-text-rgb), .06) !important;
    box-shadow: 0 -16px 32px -28px rgba(var(--mindoe-shadow-rgb), .5);
}

/* ---- Tables (generaltable: lists, reports, admin) --------------------------------------------- */
/* A white card with a quiet small-caps header and lavender row hover, instead of grey stripes on the lavender page.
   Rounded through the corner cells (no overflow:hidden, so action menus inside cells are not clipped). */
#region-main table.generaltable {
    --bs-table-bg: #fff;
    --bs-table-striped-bg: #fff;
    --bs-table-hover-bg: rgba(var(--bs-primary-rgb), .04);
    background: #fff;
    border-collapse: separate;
    border-radius: 20px;
    border-spacing: 0;
    box-shadow: 0 0 0 1px rgba(var(--mindoe-text-rgb), .06), 0 20px 40px -36px rgba(var(--mindoe-shadow-rgb), .5);
}
#region-main table.generaltable.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: transparent; }
#region-main table.generaltable > :is(thead, tbody, tfoot) > tr > :is(th, td) {
    border-bottom: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-top: 0;
    padding: 12px 16px;
    vertical-align: middle;
}
#region-main table.generaltable > thead > tr > th,
#region-main table.generaltable > tbody > tr.header > th {
    background: #fafaff;
    color: rgba(var(--mindoe-text-rgb), .6);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#region-main table.generaltable > thead > tr > th a { color: inherit; text-decoration: none; }
#region-main table.generaltable > thead > tr > th a:hover { color: var(--bs-primary); }
#region-main table.generaltable > thead > tr:first-child > :first-child { border-top-left-radius: 20px; }
#region-main table.generaltable > thead > tr:first-child > :last-child { border-top-right-radius: 20px; }
#region-main table.generaltable > tbody:last-child > tr:last-child > * { border-bottom: 0; }
#region-main table.generaltable > tbody:last-child > tr:last-child > :first-child { border-bottom-left-radius: 20px; }
#region-main table.generaltable > tbody:last-child > tr:last-child > :last-child { border-bottom-right-radius: 20px; }
#region-main table.generaltable > tbody > tr { transition: background-color .15s ease-out; }

/* ---- Report pages (activity reports, participants, grades, logs…) ----------------------------- */
/* The report toolbar (Moodle's tertiary navigation: report picker, Download…) as one white bar, like the catalogue's
   chips bar; the catalogue keeps its own row of pills. */
#region-main .tertiary-navigation:not(.mindoe-catalogue .tertiary-navigation) {
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 24px;
    box-shadow: 0 20px 40px -36px rgba(var(--mindoe-shadow-rgb), .5);
    margin-bottom: 18px;
    padding: 8px !important;
}
#region-main .tertiary-navigation:not(.mindoe-catalogue .tertiary-navigation) > .d-flex { align-items: center; flex-wrap: wrap; gap: 8px; }
#region-main .tertiary-navigation:not(.mindoe-catalogue .tertiary-navigation) .navitem { margin: 0 !important; }
#region-main .tertiary-navigation:not(.mindoe-catalogue .tertiary-navigation) .navitem.ms-auto { margin-left: auto !important; }
#region-main .tertiary-navigation:not(.mindoe-catalogue .tertiary-navigation) .form-select {
    background-color: var(--mindoe-lavender);
    border-color: transparent;
    border-radius: 999px;
    font-weight: 500;
    min-height: 40px;
    padding-left: 18px;
}
#region-main .tertiary-navigation:not(.mindoe-catalogue .tertiary-navigation) .form-select:hover { background-color: #e7e5fc; }
#region-main .tertiary-navigation:not(.mindoe-catalogue .tertiary-navigation) .btn { min-height: 40px; }
/* The page picker of the toolbar (Permissions ▾, Backup ▾, Restore ▾): Moodle shows it as a 22px heading. The same
   lavender pill as the report picker; the "Course reuse" variant's row and bottom border made the bar 100px high. */
#region-main .tertiary-navigation:not(.mindoe-catalogue .tertiary-navigation) > .row { margin: 0; padding: 0 !important; }
#region-main .tertiary-navigation.full-width-bottom-border { border-bottom: 1px solid rgba(var(--mindoe-text-rgb), .06); margin-left: 0; margin-right: 0; width: auto; }
#region-main .tertiary-navigation:not(.mindoe-catalogue .tertiary-navigation) .tertiary-navigation-selector .dropdown-toggle {
    align-items: center;
    background: var(--mindoe-lavender);
    border-radius: 999px;
    color: var(--mindoe-text);
    display: inline-flex;
    font-size: 15px;
    font-weight: 600;
    gap: 6px;
    padding: 0 16px 0 18px;
}
#region-main .tertiary-navigation:not(.mindoe-catalogue .tertiary-navigation) .tertiary-navigation-selector .dropdown-toggle:hover { background: #e7e5fc; color: var(--bs-primary); }
/* Gradebook toolbars: "Search users" as a pill field; "Filter by name" and "Collapsed columns" as the same lavender
   pills as the page picker (Moodle: bold 15px text links). */
#region-main .tertiary-navigation .user-search .form-control { background: var(--mindoe-lavender); border-color: transparent; border-radius: 999px !important; min-height: 40px; padding-left: 18px; }
#region-main .tertiary-navigation .user-search .form-control:focus { background: #fff; }
#region-main .tertiary-navigation :is(.initialswidget, .collapsecolumn) {
    background: var(--mindoe-lavender);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600 !important;
    gap: 6px;
    min-height: 40px;
    padding: 0 16px !important;
}
#region-main .tertiary-navigation :is(.initialswidget, .collapsecolumn):hover { background: #e7e5fc; color: var(--bs-primary); }

/* Filters (participants and other report builder lists: "Match Any / Select…", Add condition): Moodle's grey box with
   a bordered white row inside becomes a white card with a lavender row, the remove button a soft round chip. */
#region-main .filter-group.bg-light {
    background: #fff !important;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06) !important;
    border-radius: 24px;
    box-shadow: 0 20px 40px -36px rgba(var(--mindoe-shadow-rgb), .5);
    padding: 10px 12px !important;
}
#region-main .filter-group [data-filterregion="filter"] .bg-white.border {
    background: #f6f5ff !important;
    border: 0 !important;
    border-radius: 16px;
    padding: 6px 10px !important;
}
#region-main .filter-group .form-select { background-color: #fff; }
#region-main .filter-group [data-filteraction="remove"] {
    align-items: center;
    background: #e7e5fc;
    border: 0;
    border-radius: 50%;
    color: var(--bs-primary) !important;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    width: 32px;
}
#region-main .filter-group [data-filteraction="remove"]:hover { background: #dcd9fb; }
#region-main .filter-group [data-filteraction="add"] { color: var(--bs-primary) !important; font-weight: 600; text-decoration: none; }
#region-main .filter-group [data-filteraction="add"] .ps-3 { padding-left: 4px !important; }
#region-main [data-region="participant-count"] { color: rgba(var(--mindoe-text-rgb), .7); font-size: 14px; }

/* Charts (SCORM graph report, quiz statistics…): on a white card; "Show chart data" as a quiet link under it. */
#region-main .chart-area {
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 24px;
    box-shadow: 0 24px 48px -42px rgba(var(--mindoe-shadow-rgb), .5);
    margin-bottom: 20px;
    padding: 20px 24px 16px;
}
/* A user's logs (report/log/user.php): air between the log reader picker and the chart. */
#region-main [role="main"] > .singleselect + .graph { margin-top: 16px; }
#region-main [role="main"] > .singleselect label { color: rgba(var(--mindoe-text-rgb), .7); font-size: 14px; }
#region-main [role="main"] > .singleselect .form-select { background-color: #fff; border-radius: 999px; font-size: 14px; padding-left: 16px; }
#region-main .chart-area .chart-table-expand a { font-size: 14px; font-weight: 600; text-decoration: none; }
/* Its data table is already on the chart's card: flat (no second card edge against the first), the header row a
   rounded band, and air above and below. */
#region-main .chart-area table.generaltable { border: 0; box-shadow: none; font-size: 14px; margin: 16px 0 8px; }
#region-main .chart-area table.generaltable tr:first-child > * {
    background: #fafaff;
    color: rgba(var(--mindoe-text-rgb), .6);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#region-main .chart-area table.generaltable tr:first-child > :first-child { border-radius: 12px 0 0 12px; }
#region-main .chart-area table.generaltable tr:first-child > :last-child { border-radius: 0 12px 12px 0; }
#region-main .chart-area table.generaltable tr:first-child > * { border-bottom: 0; border-top: 0; }
#region-main .chart-area table.generaltable > tbody > tr > th { font-weight: 500; }
#region-main .chart-area table.generaltable > tbody:last-child > tr:last-child > * { border-radius: 0; }

/* SCORM report: the attempts summary as a stat pill. */
#region-main .scormattemptcounts {
    background: #e7e5fc;
    border-radius: 999px;
    color: var(--bs-primary);
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 16px;
    padding: 8px 16px;
}

/* Name filters (initials bars: First name / Last name A–Z): one white card, a row per bar - a small-caps label, the
   letters as round chips, the current one (often "All") in indigo. */
#region-main .initialbar {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    gap: 6px 12px;
    justify-content: flex-start !important;
    margin: 0;
    padding: 10px 16px;
}
#region-main .initialbar.firstinitial { border-bottom: 0; border-radius: 20px 20px 0 0; }
#region-main .initialbar.lastinitial { border-radius: 0 0 20px 20px; box-shadow: 0 20px 40px -36px rgba(var(--mindoe-shadow-rgb), .5); margin-bottom: 16px; }
#region-main .initialbar.firstinitial + .initialbar.lastinitial { border-top: 1px solid rgba(var(--mindoe-text-rgb), .06); }
#region-main .initialbar:not(.firstinitial):not(.lastinitial) { border-radius: 20px; margin-bottom: 16px; }
#region-main .initialbar .initialbarlabel {
    color: rgba(var(--mindoe-text-rgb), .55);
    flex: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    margin: 0 !important;
    min-width: 96px;
    text-transform: uppercase;
}
#region-main .initialbar .initialbargroups { gap: 2px; justify-content: flex-start !important; }
#region-main .initialbar .pagination { flex-wrap: wrap; gap: 2px; margin: 0; }
#region-main .initialbar .page-link {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 999px !important;
    color: var(--mindoe-text);
    display: inline-flex;
    font-size: 13px;
    font-weight: 500;
    height: 30px;
    justify-content: center;
    min-width: 30px;
    padding: 0 8px;
}
#region-main .initialbar .page-link:hover { background: var(--mindoe-lavender); color: var(--bs-primary); }
#region-main .initialbar .page-item.active .page-link { background: var(--bs-primary); color: #fff; font-weight: 600; }
#region-main .initialbar .page-item.disabled .page-link { background: transparent; color: rgba(var(--mindoe-text-rgb), .3); }
/* Report tables scroll sideways inside a rounded frame; the row actions under them sit with some air. */
/* The scrolling frame is the card (white, rounded, ringed) and the table inside it flat: when the table is wider than
   the column (both drawers open, phones), it scrolls inside the card instead of being cut off at an invisible edge. */
#region-main .table-responsive:has(> table.generaltable) {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 0 0 1px rgba(var(--mindoe-text-rgb), .06), 0 20px 40px -36px rgba(var(--mindoe-shadow-rgb), .5);
    margin: 12px 0;
}
#region-main .table-responsive > table.generaltable { box-shadow: none; margin-bottom: 0; }
#region-main table#commands { margin: 8px 0 24px; }
/* Each column's "hide column" (–) control: next to the name and only on hover/keyboard focus, not a row of dashes
   under every header. */
#region-main table.generaltable thead th .commands { display: inline-flex; margin-left: 4px; opacity: 0; transition: opacity .15s ease-out; vertical-align: middle; }
/* ...and never on a line of their own: in a narrow column the (invisible) control wrapped under the name and pushed
   it up, so the column names sat at different heights. Out of the flow, at the header's right edge. */
#region-main table.generaltable > thead > tr > th:has(> .commands) { padding-right: 26px; position: relative; }
#region-main table.generaltable > thead > tr > th > .commands { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
#region-main table.generaltable > thead > tr > th:has(> a) { white-space: nowrap; }
#region-main table.generaltable > thead > tr > th > .icon { margin: 0 0 0 4px; vertical-align: -1px; }
#region-main table.generaltable thead th:is(:hover, :focus-within) .commands { opacity: .7; }
#region-main table.generaltable td.picture img.userpicture,
#region-main table.generaltable .userinitials { border-radius: 50%; }
#region-main table.generaltable .userinitials { background: #e7e5fc; color: var(--bs-primary); font-weight: 600; }
/* Participants: names with room on one or two lines, the email quieter, role and its edit pencil on one line, last
   access as a short two-line value - compact rows also when both drawers leave a narrow column. */
#region-main table#participants { font-size: 14px; }
#region-main table#participants > tbody > tr > :is(th, td) { padding-bottom: 10px; padding-top: 10px; }
#region-main table#participants :is(th, td).c1 { min-width: 230px; }
#region-main table#participants td.c1 a { font-weight: 600; }
#region-main table#participants td.c2 { color: rgba(var(--mindoe-text-rgb), .75); font-size: 13px; }
#region-main table#participants td.c3 .inplaceeditable { white-space: nowrap; }
#region-main table#participants td:is(.c4, .c5) { font-size: 13px; min-width: 110px; }
/* Status: the badge and its info/edit/unenrol icons in one row (they stacked into a 4-line column); a soft badge. */
#region-main table#participants td.c6 > div[data-status] { align-items: center; display: flex; gap: 2px; white-space: nowrap; }
#region-main table#participants td.c6 > div[data-status] > a { color: rgba(var(--mindoe-text-rgb), .55); }
#region-main table#participants td.c6 > div[data-status] > a:hover { color: var(--bs-primary); }
#region-main table#participants .badge.bg-success { background: #e3f4e7 !important; color: #1d7a3b !important; margin-right: 4px; }
/* Under the participants table: "Show all 1868" centred under the pager; the selection actions ("Select all",
   "With selected users… [Choose…]") as one white toolbar with everything on one line (Moodle's mb-3 on the select's
   group lifted it above the button); the second "Enrol users" at the end, clear of it. */
#region-main .userlist a[data-action="showcount"] { display: block; font-size: 14px; font-weight: 600; margin: -4px auto 0; text-align: center; text-decoration: none; width: fit-content; }
#region-main .userlist br:has(+ .buttons) { display: none; }
#region-main .userlist .buttons {
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 24px;
    box-shadow: 0 20px 40px -36px rgba(var(--mindoe-shadow-rgb), .5);
    margin-top: 20px;
    padding: 8px;
}
#region-main .userlist .buttons > .d-flex { align-items: center !important; gap: 8px 16px; }
#region-main .userlist .buttons > .d-flex > .d-flex { align-items: center !important; margin: 0 !important; }
#region-main .userlist .buttons .btn { min-height: 40px; }
#region-main .userlist .buttons .col-form-label { color: rgba(var(--mindoe-text-rgb), .7); font-size: 14px; padding: 0; }
#region-main .userlist .buttons .form-select { border-radius: 999px; margin: 0 !important; min-height: 40px; width: auto; }
#region-main .userlist + .d-flex.justify-content-end { margin-top: 16px; }
/* SCORM basic report: "Started on" / "Last accessed on" as quieter two-line dates, not four-line columns. */
#page-mod-scorm-report #attempts td:is(.c5, .c6) { color: rgba(var(--mindoe-text-rgb), .7); font-size: 13px; min-width: 190px; }

/* Logs (report/log): the filters as one white bar of lavender pills, like the report toolbar; a denser table, the
   time as a quiet one-line date and the long description with room to read. */
#region-main form.logselecform {
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 24px;
    box-shadow: 0 20px 40px -36px rgba(var(--mindoe-shadow-rgb), .5);
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 18px;
    padding: 8px;
}
/* One row: the filters' own wrapper dissolves so "Get these logs" can sit at the end of it. */
#region-main form.logselecform > .d-flex { display: contents; }
#region-main form.logselecform > .mt-2 { margin: 0 0 0 auto !important; }
#region-main form.logselecform .mx-1 { font-size: 14px; }
#region-main form.logselecform .form-select {
    background-color: var(--mindoe-lavender);
    border-color: transparent;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    max-width: 260px;
    min-height: 40px;
    padding-left: 16px;
    width: auto;
}
#region-main form.logselecform .form-select:hover { background-color: #e7e5fc; }
#region-main form.logselecform .btn-primary { min-height: 40px; }
#region-main table.reportlog { font-size: 14px; }
#region-main table.generaltable.reportlog > :is(thead, tbody) > tr > :is(th, td) { padding: 10px 12px; }
#region-main table.reportlog td.c0 { color: rgba(var(--mindoe-text-rgb), .7); font-size: 13px; min-width: 140px; }
#region-main table.reportlog td.c3 { min-width: 170px; }
#region-main table.reportlog td.c6 { color: rgba(var(--mindoe-text-rgb), .8); font-size: 13px; min-width: 220px; }

/* ---- Permissions (admin/roles/permissions.php) ------------------------------------------------- */
/* The capability table as a white card: each component a lavender band, the capability with its code as small mono
   text, the roles as chips (prohibited ones in red) and the add buttons as dashed circles next to them. */
#region-main .capabilitysearchui { gap: 8px; margin: 12px 0 4px; }
#region-main .capabilitysearchui label,
#region-main .advancedoverride label { font-weight: 500; }
#region-main .capabilitysearchui .form-control { border-radius: 999px; margin: 0 !important; padding-left: 16px; width: 240px; }
#region-main .capabilitysearchui .btn-primary { background: #e7e5fc; border: 0; box-shadow: none; color: var(--bs-primary); }
/* Moodle sizes the filter row to the table's width in pixels and centres it: back on the left edge. */
#region-main .capabilitysearchui[style] { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; }
#region-main .capabilitysearchui .form-control { background: #fff; }

/* ---- Check permissions, one user (admin/roles/check.php?reportuser=…) ------------------------------------------ */
/* "Roles for user …": a white card listing each role as an indigo-tinted chip with the context it is held in
   (Moodle: a bulleted list of links), then "Permissions for user …" as the heading of the filter and table below. */
#page-admin-roles-check #region-main .generalbox:has(> #explaincaps) { max-width: none; padding: 0 !important; width: 100%; }
#page-admin-roles-check #region-main .generalbox:has(> #explaincaps) > h3 { font-size: 17px; margin: 20px 0 10px; }
#page-admin-roles-check #region-main .generalbox:has(> #explaincaps) > h3:first-child { margin-top: 18px; }
#page-admin-roles-check #region-main .generalbox:has(> #explaincaps) > ul {
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 20px;
    box-shadow: 0 20px 40px -36px rgba(var(--mindoe-shadow-rgb), .5);
    list-style: none;
    margin: 0 0 8px;
    padding: 6px;
}
#page-admin-roles-check #region-main .generalbox:has(> #explaincaps) > ul > li {
    align-items: center;
    border-radius: 14px;
    color: rgba(var(--mindoe-text-rgb), .6);
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    gap: 6px 10px;
    padding: 10px 12px;
}
#page-admin-roles-check #region-main .generalbox:has(> #explaincaps) > ul > li + li { border-top: 1px solid rgba(var(--mindoe-text-rgb), .06); border-radius: 0; }
#page-admin-roles-check #region-main .generalbox:has(> #explaincaps) > ul > li > a:first-child {
    background: #ebe9fd;
    border-radius: 999px;
    color: #2c2896;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 12px;
    text-decoration: none;
}
#page-admin-roles-check #region-main .generalbox:has(> #explaincaps) > ul > li > a:first-child:hover { background: #dcd9fb; }
#page-admin-roles-check #region-main .generalbox:has(> #explaincaps) > ul > li > a:last-child { color: var(--mindoe-text); font-weight: 500; text-decoration: none; }
#page-admin-roles-check #region-main .generalbox:has(> #explaincaps) > ul > li > a:last-child:hover { color: var(--bs-primary); }
/* The answer per capability ("Yes" / "No", Moodle's own words): green or red, after a dot of the same colour. */
#explaincaps tr.rolecap > td { font-size: 13px; font-weight: 600; white-space: nowrap; width: 1%; }
#explaincaps tr.rolecap > td::before { border-radius: 50%; content: ""; display: inline-block; height: 8px; margin-right: 8px; vertical-align: 1px; width: 8px; }
#explaincaps tr.rolecap.yes > td { color: #1d7a3b; }
#explaincaps tr.rolecap.yes > td::before { background: #2fa35a; box-shadow: 0 0 0 3px #e3f4e7; }
#explaincaps tr.rolecap.no > td { color: #a12a20; }
#explaincaps tr.rolecap.no > td::before { background: #d6453a; box-shadow: 0 0 0 3px #fdeceb; }
#region-main .advancedoverride .form-select { width: auto; }
#region-main table.rolecap {
    --bs-table-bg: #fff;
    --bs-table-striped-bg: #fff;
    --bs-table-hover-bg: rgba(var(--bs-primary-rgb), .04);
    background: #fff;
    border-collapse: separate;
    border-radius: 20px;
    border-spacing: 0;
    box-shadow: 0 0 0 1px rgba(var(--mindoe-text-rgb), .06), 0 20px 40px -36px rgba(var(--mindoe-shadow-rgb), .5);
    font-size: 14px;
    margin-top: 12px;
    width: 100% !important;
}
#region-main table.rolecap tr > :is(th, td) { border-bottom: 1px solid rgba(var(--mindoe-text-rgb), .06); border-top: 0; padding: 12px 16px; vertical-align: middle; }
#region-main table.rolecap tr:first-child > th:not([scope="row"]) {
    background: #fafaff;
    color: rgba(var(--mindoe-text-rgb), .6);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#region-main table.rolecap > :first-child > tr:first-child > :first-child { border-top-left-radius: 20px; }
#region-main table.rolecap > :first-child > tr:first-child > :last-child { border-top-right-radius: 20px; }
#region-main table.rolecap > :last-child > tr:last-child > * { border-bottom: 0; }
#region-main table.rolecap > :last-child > tr:last-child > :first-child { border-bottom-left-radius: 20px; }
#region-main table.rolecap > :last-child > tr:last-child > :last-child { border-bottom-right-radius: 20px; }
#region-main table.rolecap.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: transparent; }
#region-main table.rolecap tr.rolecapheading > td {
    --bs-table-bg-state: transparent;
    background: #f6f5ff;
    color: var(--bs-primary);
    font-size: 12px;
    letter-spacing: .05em;
    padding-bottom: 9px;
    padding-top: 9px;
    text-transform: uppercase;
}
#region-main table.rolecap .cap-desc a { color: var(--mindoe-text); font-weight: 600; text-decoration: none; }
#region-main table.rolecap .cap-desc a:hover { color: var(--bs-primary); }
#region-main table.rolecap .cap-name {
    color: rgba(var(--mindoe-text-rgb), .55);
    display: block;
    font-family: var(--bs-font-monospace);
    font-size: 12px;
    margin-top: 2px;
}
#region-main table.rolecap .risks img { opacity: .75; }
#region-main table.rolecap :is(span.allowed, span.forbidden) {
    align-items: center;
    background: #e7e5fc;
    border-radius: 999px;
    color: #2c2896;
    display: inline-flex !important;
    font-size: 13px;
    font-weight: 500;
    gap: 2px;
    margin: 2px 4px 2px 0;
    padding: 2px 2px 2px 8px;
}
#region-main table.rolecap span.forbidden { background: #fdeceb; color: #a12a20; }
#region-main table.rolecap :is(.preventlink, .unprohibitlink) {
    align-items: center;
    border-radius: 50%;
    color: inherit;
    display: inline-flex;
    height: 24px;
    justify-content: center;
    opacity: .55;
    transition: background-color .15s ease-out, opacity .15s ease-out;
    width: 24px;
}
#region-main table.rolecap :is(.preventlink, .unprohibitlink):hover { background: #fff; opacity: 1; }
#region-main table.rolecap :is(.preventlink, .unprohibitlink) .icon { font-size: 12px; margin: 0; }
#region-main table.rolecap :is(.allowmore, .prohibitmore) { display: inline-block; vertical-align: middle; }
#region-main table.rolecap :is(.allowlink, .prohibitlink) {
    align-items: center;
    border: 1px dashed rgba(var(--bs-primary-rgb), .4);
    border-radius: 50%;
    display: inline-flex;
    height: 28px;
    justify-content: center;
    margin: 2px 0 !important;
    padding: 0 !important;
    width: 28px;
}
#region-main table.rolecap :is(.allowlink, .prohibitlink):hover { background: var(--mindoe-lavender); border-style: solid; }
#region-main table.rolecap :is(.allowlink, .prohibitlink) .icon { font-size: 12px; margin: 0; }
/* Phones: the table scrolls inside its card instead of widening the page; long capability codes may break. */
@media (max-width: 767.98px) {
    #region-main table.rolecap { display: block; overflow-x: auto; }
    #region-main table.rolecap .cap-name { overflow-wrap: anywhere; }
}
/* "Back to …" under the table (and on other admin pages): a pill with an arrow. */
#region-main .backlink { margin-top: 20px; }
#region-main .backlink a {
    align-items: center;
    background: #e7e5fc;
    border-radius: 999px;
    color: var(--bs-primary);
    display: inline-flex;
    font-weight: 600;
    gap: 8px;
    padding: 8px 18px 8px 14px;
    text-decoration: none;
}
#region-main .backlink a::before { content: "←"; }
#region-main .backlink a:hover { background: #dcd9fb; }

/* ---- Backup and restore (backup/backup.php, restore.php, restorefile.php) -------------------------- */
/* The stages (1. Initial settings ▶ 2. Schema settings ▶ …) as a stepper of pills: done in green, the current one in
   indigo, the rest white. */
#region-main .backup_progress { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 20px; }
#region-main .backup_progress > * { float: none; }
#region-main .backup_progress .backup_stage {
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .08);
    border-radius: 999px;
    color: rgba(var(--mindoe-text-rgb), .6);
    font-size: 13px;
    font-weight: 500;
    margin: 0;
    padding: 6px 14px;
}
#region-main .backup_progress .backup_stage_complete { background: #e3f4e7; border-color: transparent; color: #1d7a3b; }
#region-main .backup_progress .backup_stage_complete a { color: inherit; text-decoration: none; }
#region-main .backup_progress .backup_stage_current {
    background: var(--bs-primary);
    border-color: transparent;
    box-shadow: 0 10px 22px -14px rgba(var(--bs-primary-rgb), .8);
    color: #fff;
    font-weight: 600;
}
#region-main .backup_progress .arrow.sep { color: rgba(var(--mindoe-text-rgb), .3); font-size: 0; margin: 0; }
#region-main .backup_progress .arrow.sep::before { content: "›"; font-size: 18px; line-height: 1; }
/* Backup settings (include users, files, blocks…): a grid of checkboxes, each a row with a lavender hover, without
   Moodle's empty label column. */
#region-main .mform .fcontainer:has(> .root_setting) {
    display: grid;
    gap: 2px 16px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
#region-main .mform .root_setting > .fitem { margin: 0 !important; }
#region-main .mform .root_setting > .fitem > .col-form-label { display: none; }
#region-main .mform .root_setting > .fitem > .checkbox { flex: 1 1 100%; max-width: 100%; padding: 0; }
#region-main .mform .root_setting .form-check > .ms-2:not(:has(*)) { display: none !important; }
#region-main .mform .root_setting .form-check {
    align-items: center;
    border-radius: 12px;
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 9px 12px;
    transition: background-color .15s ease-out;
}
#region-main .mform .root_setting .form-check:hover { background: var(--mindoe-lavender); }
#region-main .mform .root_setting .form-check-input { flex: none; float: none; margin: 0; }
#region-main .mform .root_setting .form-check label { cursor: pointer; font-size: 14px; }
/* Schema settings (each section and activity with "include" and "user data"): rounded lavender rows. */
#region-main .mform .grouped_settings:is(.section_level, .activity_level) {
    background: var(--mindoe-lavender);
    border-radius: 14px;
    margin-bottom: 6px;
    padding: 8px 12px;
}
#region-main .mform .grouped_settings .fitem { align-items: center; margin-bottom: 0 !important; }
#region-main .mform .grouped_settings .form-check label { font-size: 14px; }
/* Restore: the upload form as a card; the drop zone of every file picker as a soft dashed lavender area. */
#page-backup-restorefile #region-main form.mform {
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 24px;
    box-shadow: 0 20px 40px -38px rgba(var(--mindoe-shadow-rgb), .5);
    margin-bottom: 8px;
    padding: 24px 24px 8px;
}
#page-backup-restorefile #region-main h3.mt-6 { margin-top: 40px !important; }
.filepicker-filelist { border: 0 !important; border-radius: 18px; }
.filepicker-filelist .filepicker-container {
    background: #f8f7ff;
    border: 2px dashed rgba(var(--bs-primary-rgb), .25) !important;
    border-radius: 18px;
    color: rgba(var(--mindoe-text-rgb), .7);
    font-size: 14px;
    transition: background-color .15s ease-out, border-color .15s ease-out;
}
.filepicker-filelist .dndupload-arrow { color: var(--bs-primary); opacity: .6; }
.filepicker-filelist.dndupload-over .filepicker-container,
.filepicker-filelist .dndupload-target { background: #ebe9fd; border-color: rgba(var(--bs-primary-rgb), .55) !important; border-radius: 18px; }

/* ---- Grader report (grade/report/grader) ---------------------------------------------------------- */
/* Moodle lets the grade table (twice the column's width with a few activities) run past the content and scrolls the
   whole page sideways - it looked cut off at the window edge. Here it scrolls inside a rounded white card instead,
   the name column still sticky on the left. White cells with soft lines instead of lavender cells with grey rules,
   quiet headers, the overall average as a lavender row. */
#page-grade-report-grader-index .gradeparent {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 0 0 1px rgba(var(--mindoe-text-rgb), .06), 0 20px 40px -36px rgba(var(--mindoe-shadow-rgb), .5);
    margin: 0 1px 12px;
    overflow-x: auto;
    padding-bottom: 12px; /* The sideways scrollbar in its own strip, not over the overall average. */
}
#user-grades.gradereport-grader-table {
    --bs-table-bg: #fff;
    border: 0;
    border-radius: 20px;
    font-size: 14px;
    margin: 0;
    padding: 0; /* Moodle's 84px right padding (room at the page edge) was blank space at the card's end. */
}
/* Moodle pins the column headings under the navbar and "Overall average" above the sticky footer while the page
   scrolls; inside the card those offsets would push them over the users' rows, so both stay in place. */
#page-grade-report-grader-index .gradeparent #user-grades tr:is(.heading, .lastrow) { bottom: auto; position: relative; top: auto; }
/* Name and email at a sensible width, so the grades get the room: long names wrap, long addresses end in "…". */
#user-grades tr.userrow > th.user { max-width: 300px; min-width: 280px; white-space: normal; }
#user-grades tr.userrow > th.user a.username { align-items: center; display: inline-flex; gap: 8px; line-height: 1.3; }
#user-grades tr.userrow > th.user .userinitials,
#user-grades tr.userrow > th.user img.userpicture { flex: none; }
#user-grades tr.heading > th.header.c0 { max-width: 300px; min-width: 280px; }
/* The category heading ("Manage your income ⋯") spans every grade column: when the grades scroll it stays readable
   just right of the pinned name column instead of sliding away under it. */
#page-grade-report-grader-index .gradeparent #user-grades tr:first-child > th.category > .d-flex > .d-flex { left: 300px; position: sticky; width: fit-content; }
#user-grades :is(td.useremail, tr.heading > th.useremail) { max-width: 220px; }
#user-grades td.useremail > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Every cell's content on the row's middle line: the name beside its ⋯ menu (not under it), the email without
   Moodle's 6px top padding, grades centred in their cell instead of at its top. */
#user-grades tr.userrow > th.user a.username { max-width: calc(100% - 40px); vertical-align: middle; }
#user-grades tr.userrow > th.user > .action-menu { vertical-align: middle; }
#user-grades td.useremail > div { padding-top: 0 !important; }
#user-grades td.gradecell > .d-flex.flex-column { justify-content: center; }
/* Its status-icon strip (overridden, locked…) takes the rest of the cell even when empty: only when it has icons. */
#user-grades td.gradecell > .d-flex.flex-column > .flex-grow-1:has(> .grade_icons:empty),
#user-grades td.gradecell > .d-flex.flex-column > .flex-grow-1:not(:has(> .grade_icons > *)) { display: none !important; }
#user-grades.gradereport-grader-table > * > tr > :is(th, td) {
    background-color: #fff;
    border-color: rgba(var(--mindoe-text-rgb), .07) !important;
    vertical-align: middle;
}
#user-grades.gradereport-grader-table > * > tr:is(.heading, :first-child) > th,
#user-grades.gradereport-grader-table .topleft { background-color: #fafaff; }
#user-grades.gradereport-grader-table > * > tr.heading > th { font-size: 13px; font-weight: 600; }
#user-grades.gradereport-grader-table th.category { color: rgba(var(--mindoe-text-rgb), .85); font-size: 14px; }
#user-grades.gradereport-grader-table > * > tr.avg > * { background-color: #f6f5ff; font-weight: 600; }
#user-grades.gradereport-grader-table > * > tr.userrow:hover > * { background-color: #fbfaff; }
#user-grades.gradereport-grader-table th.user a { font-weight: 600; text-decoration: none; }
#user-grades.gradereport-grader-table td.useremail { color: rgba(var(--mindoe-text-rgb), .7); font-size: 13px; }
#user-grades.gradereport-grader-table .userinitials { background: #e7e5fc; border-radius: 50%; color: var(--bs-primary); font-weight: 600; }
#user-grades.gradereport-grader-table > * > tr:first-child > :first-child { border-top-left-radius: 20px; }
#user-grades.gradereport-grader-table > * > tr:first-child > :last-child { border-top-right-radius: 20px; }
#user-grades.gradereport-grader-table > * > tr:last-child > :first-child { border-bottom-left-radius: 20px; }
#user-grades.gradereport-grader-table > * > tr:last-child > :last-child { border-bottom-right-radius: 20px; }
#user-grades.gradereport-grader-table > * > tr:last-child > * { border-bottom: 0; }
#user-grades.gradereport-grader-table > * > tr > :last-child { border-right: 0; }
/* Its sticky footer: "Show [20]" on one line beside the pages. */
#page-grade-report-grader-index #sticky-footer label { align-items: center; display: inline-flex; gap: 8px; margin: 0; white-space: nowrap; }
#page-grade-report-grader-index #sticky-footer .form-select { min-height: 36px; width: auto; }
#page-grade-report-grader-index #sticky-footer .pagination { margin: 0 !important; }

/* ---- Link list pages (course Reports, Course reuse: report/view.php, backup/view.php) ------------------- */
/* Moodle lists the pages under a "More" menu item as a bare column of links: a grid of white tiles instead, each with an
   icon (by its link) on a chip in one of the theme's tints, the name, and a chevron that moves on hover. The chip is
   ::before, the icon ::after (a mask, so it takes the chip's ink), the chevron a background image. */
#region-main [role="main"] > h2 + .container-fluid { padding: 0; }
#region-main [role="main"] > h2 + .container-fluid > div > ul.list-unstyled {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    margin: 16px 0 0;
}
#region-main [role="main"] > h2 + .container-fluid > div > ul.list-unstyled > li > a {
    --mindoe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
    --tile-tint: #ebe9fd;
    --tile-ink: var(--bs-primary);
    align-items: center;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a99' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") right 16px center / 18px no-repeat;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 20px;
    box-shadow: 0 20px 40px -36px rgba(var(--mindoe-shadow-rgb), .5);
    color: var(--mindoe-text);
    display: flex;
    font-weight: 600;
    gap: 14px;
    height: 100%;
    padding: 14px 44px 14px 16px;
    position: relative;
    text-decoration: none;
    transition: background-position .2s ease-out, border-color .15s ease-out, box-shadow .2s ease-out, transform .2s ease-out;
}
#region-main [role="main"] > h2 + .container-fluid > div > ul.list-unstyled > li > a::before { background: var(--tile-tint); border-radius: 14px; content: ""; flex: none; height: 44px; width: 44px; }
#region-main [role="main"] > h2 + .container-fluid > div > ul.list-unstyled > li > a::after {
    -webkit-mask: var(--mindoe-icon) center / contain no-repeat;
    mask: var(--mindoe-icon) center / contain no-repeat;
    background: var(--tile-ink);
    content: "";
    height: 20px;
    left: 28px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
}
#region-main [role="main"] > h2 + .container-fluid > div > ul.list-unstyled > li > a:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234642eb' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
    background-position: right 12px center;
    border-color: rgba(var(--bs-primary-rgb), .2);
    box-shadow: 0 24px 44px -30px rgba(var(--mindoe-shadow-rgb), .55);
    color: var(--bs-primary);
    transform: translateY(-2px);
}
#region-main [role="main"] > h2 + .container-fluid > div > ul.list-unstyled > li > a[href*="report/aiusage"] { --mindoe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z'/%3E%3Cpath d='M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8z'/%3E%3C/svg%3E"); }
#region-main [role="main"] > h2 + .container-fluid > div > ul.list-unstyled > li > a[href*="report/competency"] { --mindoe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E"); }
#region-main [role="main"] > h2 + .container-fluid > div > ul.list-unstyled > li > a[href*="report/log/"] { --mindoe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E"); }
#region-main [role="main"] > h2 + .container-fluid > div > ul.list-unstyled > li > a[href*="report/loglive"] { --mindoe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l3 8 4-16 3 8h4'/%3E%3C/svg%3E"); }
#region-main [role="main"] > h2 + .container-fluid > div > ul.list-unstyled > li > a[href*="report/outline"] { --mindoe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E"); }
#region-main [role="main"] > h2 + .container-fluid > div > ul.list-unstyled > li > a[href*="report/participation"] { --mindoe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21v-1a6 6 0 0 1 6-6h2a6 6 0 0 1 6 6v1M16 4a4 4 0 0 1 0 8M22 21v-1a6 6 0 0 0-4-5.6'/%3E%3C/svg%3E"); }
#region-main [role="main"] > h2 + .container-fluid > div > ul.list-unstyled > li > a[href*="report/progress"] { --mindoe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12l3 3 5-6'/%3E%3C/svg%3E"); }
#region-main [role="main"] > h2 + .container-fluid > div > ul.list-unstyled > li > a[href*="report/stats"] { --mindoe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 15l4-4 3 3 6-7'/%3E%3C/svg%3E"); }
#region-main [role="main"] > h2 + .container-fluid > div > ul.list-unstyled > li > a[href*="backup/import"] { --mindoe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M5 21h14'/%3E%3C/svg%3E"); }
#region-main [role="main"] > h2 + .container-fluid > div > ul.list-unstyled > li > a[href*="backup/backup.php"] { --mindoe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18v5H3zM5 9v11h14V9M10 13h4'/%3E%3C/svg%3E"); }
#region-main [role="main"] > h2 + .container-fluid > div > ul.list-unstyled > li > a[href*="backup/restorefile"] { --mindoe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5M12 7v5l3 2'/%3E%3C/svg%3E"); }
#region-main [role="main"] > h2 + .container-fluid > div > ul.list-unstyled > li > a[href*="backup/copy"] { --mindoe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='13' height='13' rx='2'/%3E%3Cpath d='M4 16V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E"); }
#region-main [role="main"] > h2 + .container-fluid > div > ul.list-unstyled > li > a[href*="course/reset"] { --mindoe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/svg%3E"); }
#region-main [role="main"] > h2 + .container-fluid > div > ul.list-unstyled > li:nth-child(5n+2) > a { --tile-tint: #fdeee2; --tile-ink: #a8461a; }
#region-main [role="main"] > h2 + .container-fluid > div > ul.list-unstyled > li:nth-child(5n+3) > a { --tile-tint: #e1f3f6; --tile-ink: #0f6f7c; }
#region-main [role="main"] > h2 + .container-fluid > div > ul.list-unstyled > li:nth-child(5n+4) > a { --tile-tint: #fce7f0; --tile-ink: #b0336f; }
#region-main [role="main"] > h2 + .container-fluid > div > ul.list-unstyled > li:nth-child(5n+5) > a { --tile-tint: #e4f1fb; --tile-ink: #1d5f99; }
@media (prefers-reduced-motion: reduce) {
    #region-main [role="main"] > h2 + .container-fluid > div > ul.list-unstyled > li > a { transition: none; }
    #region-main [role="main"] > h2 + .container-fluid > div > ul.list-unstyled > li > a:hover { transform: none; }
}

/* ---- Preferences (user/preferences.php, admin/user.php → Preferences) --------------------------------------- */
/* Moodle's three bordered cards of plain links: white cards in the theme's language, each link a row with a chevron
   and a lavender hover, the card titles as section headings. */
#page-user-preferences #region-main .card {
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 24px;
    box-shadow: 0 24px 48px -42px rgba(var(--mindoe-shadow-rgb), .5);
}
#page-user-preferences #region-main .row { align-items: flex-start; }
#page-user-preferences #region-main .card-body { padding: 20px 14px 14px; }
#page-user-preferences #region-main .card-title { font-size: 17px; font-weight: 700; margin: 0 10px 10px; }
#page-user-preferences #region-main .card-text { display: flex; flex-direction: column; gap: 2px; margin: 0; }
#page-user-preferences #region-main .card-text > li { margin: 0 !important; }
#page-user-preferences #region-main .card-text > li > a {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a99' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") right 10px center / 16px no-repeat;
    border-radius: 12px;
    color: var(--mindoe-text);
    display: block;
    font-size: 14px;
    font-weight: 500;
    padding: 9px 34px 9px 10px;
    text-decoration: none;
    transition: background-color .15s ease-out, color .15s ease-out;
}
#page-user-preferences #region-main .card-text > li > a:hover { background-color: var(--mindoe-lavender); color: var(--bs-primary); }

/* ---- Notifications page (message/output/popup/notifications.php) ----------------------------------------------- */
/* One white card split in two: the list on the left as rows with a lavender hover, unread ones bold with an indigo dot
   (Moodle: grey rows), the open one a lavender row with an indigo edge (Moodle: Bootstrap-blue fill); the message on
   the right with a section-size subject, quiet time and the "View …" link as the theme's button. */
#page-message-output-popup-notifications .notification-area {
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06) !important;
    border-radius: 24px;
    box-shadow: 0 24px 48px -42px rgba(var(--mindoe-shadow-rgb), .5);
    height: calc(100dvh - 72px - 220px);
    min-height: 520px;
    overflow: hidden;
}
#page-message-output-popup-notifications .notification-area [data-region="control-area"] { border-right: 1px solid rgba(var(--mindoe-text-rgb), .06) !important; padding: 8px; }
/* Desktop: list and message side by side as a grid (Moodle: a 300px inline-block and a floated rest, which drops the
   message under the list as soon as the list is any wider). Below 980px Moodle's own one-pane slide stays. */
@media (min-width: 980px) {
    #page-message-output-popup-notifications .notification-area { display: grid; grid-template-columns: 340px minmax(0, 1fr); }
    #page-message-output-popup-notifications .notification-area > [data-region="control-area"] { width: auto; }
    #page-message-output-popup-notifications .notification-area > [data-region="content-area"] { float: none; height: 100%; overflow: auto; width: auto; }
}
#page-message-output-popup-notifications .notification-area [data-region="notification-content-item-container"] {
    background: transparent;
    border: 0 !important;
    border-radius: 14px;
    cursor: pointer;
    margin-bottom: 2px;
    padding: 10px 12px 10px 26px;
    position: relative;
    transition: background-color .15s ease-out;
}
#page-message-output-popup-notifications .notification-area [data-region="notification-content-item-container"]:is(:hover, .unread:hover) { background: var(--mindoe-lavender); color: var(--mindoe-text); }
/* Boost turns the text (and time) white on hover, for its indigo fill: dark on the lavender one. */
#page-message-output-popup-notifications .notification-area [data-region="notification-content-item-container"]:hover .timestamp { color: rgba(var(--mindoe-text-rgb), .55) !important; }
#page-message-output-popup-notifications .notification-area [data-region="notification-content-item-container"] > div:focus { box-shadow: none; outline: 0; }
#page-message-output-popup-notifications .notification-area [data-region="notification-content-item-container"]:has(> div:focus-visible) { box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .3); }
#page-message-output-popup-notifications .notification-area [data-region="notification-content-item-container"].unread:not(:hover) { background: transparent; }
#page-message-output-popup-notifications .notification-area [data-region="notification-content-item-container"].unread::before {
    background: var(--bs-primary);
    border-radius: 50%;
    content: "";
    height: 8px;
    left: 10px;
    position: absolute;
    top: 18px;
    width: 8px;
}
#page-message-output-popup-notifications .notification-area [data-region="notification-content-item-container"].selected {
    background: #ebe9fd !important;
    box-shadow: inset 3px 0 0 var(--bs-primary);
    color: var(--mindoe-text) !important;
}
#page-message-output-popup-notifications .notification-area [data-region="notification-content-item-container"].selected * { color: inherit !important; }
#page-message-output-popup-notifications .notification-area .notification-message { font-size: 14px; line-height: 1.4; }
#page-message-output-popup-notifications .notification-area .unread .notification-message { font-weight: 600; }
#page-message-output-popup-notifications .notification-area [data-region="notification-content-item-container"] .timestamp { color: rgba(var(--mindoe-text-rgb), .55) !important; font-size: 12px; margin-top: 2px; }
#page-message-output-popup-notifications .notification-area [data-region="content-area"] { padding: 24px 32px; }
#page-message-output-popup-notifications .notification-area [data-region="content-area"] > .header { border-bottom: 1px solid rgba(var(--mindoe-text-rgb), .06); margin: 0 0 16px; padding: 0 0 16px !important; }
#page-message-output-popup-notifications .notification-area [data-region="content-area"] > .header .subject-container { font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; padding: 0 !important; }
#page-message-output-popup-notifications .notification-area [data-region="content-area"] > .header .timestamp { padding: 0 !important; }
#page-message-output-popup-notifications .notification-area [data-region="content-area"] > .header .timestamp { color: rgba(var(--mindoe-text-rgb), .55); font-size: 13px; margin-top: 4px; }
#page-message-output-popup-notifications .notification-area [data-region="content-area"] > .content { font-size: 15px; line-height: 1.6; padding: 0; }
#page-message-output-popup-notifications .notification-area [data-region="content-area"] > .content { margin: 0 !important; }
#page-message-output-popup-notifications .notification-area [data-region="content-area"] > .content br { display: none; }
#page-message-output-popup-notifications .notification-area [data-region="content-area"] > .content p { margin: 4px 0 0; }
#page-message-output-popup-notifications .notification-area [data-region="content-area"] .btn-insight {
    background: var(--bs-primary) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 22px -14px rgba(var(--bs-primary-rgb), .8);
    color: #fff !important;
    font-weight: 600;
    margin-top: 20px;
    padding: 10px 22px !important;
}
#page-message-output-popup-notifications .notification-area [data-region="content-area"] .btn-insight:hover { background: #3833d6 !important; }
#page-message-output-popup-notifications .notification-area [data-region="content-area"] > .footer { border-top: 1px solid rgba(var(--mindoe-text-rgb), .06); margin-top: 24px; padding: 14px 0 0 !important; text-align: left; }
#page-message-output-popup-notifications .notification-area [data-region="content-area"] > .footer a { font-size: 14px; font-weight: 600; text-decoration: none; }
#page-message-output-popup-notifications .notification-area [data-region="content-area"] > .empty-text { color: rgba(var(--mindoe-text-rgb), .55); font-size: 14px; }

/* ---- Notification and message preferences (message/notificationpreferences.php, message/edit.php) -------------- */
/* The switches table as a white card: each component a lavender band, the delivery methods (Web, Email) as small-caps
   column heads, the switches centred under them. "Disable notifications" as a switch-like toggle row. */
#region-main .preferences-page-container .checkbox-container {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 16px;
    display: inline-flex;
    gap: 10px;
    margin: 4px 0 18px;
    padding: 10px 16px;
}
#region-main .preferences-page-container .checkbox-container label { cursor: pointer; font-size: 14px; font-weight: 500; margin: 0; }
#region-main .preferences-page-container .checkbox-container input { height: 18px; margin: 0; width: 18px; }
#region-main table.preference-table {
    background: #fff;
    border-collapse: separate;
    border-radius: 20px;
    border-spacing: 0;
    box-shadow: 0 0 0 1px rgba(var(--mindoe-text-rgb), .06), 0 20px 40px -36px rgba(var(--mindoe-shadow-rgb), .5);
    font-size: 14px;
}
#region-main table.preference-table :is(th, td) { background: transparent; border: 0 !important; border-bottom: 1px solid rgba(var(--mindoe-text-rgb), .06) !important; padding: 12px 18px; vertical-align: middle; }
#region-main table.preference-table > thead th { background: #fafaff; color: rgba(var(--mindoe-text-rgb), .6); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-align: center; text-transform: uppercase; width: 140px; }
#region-main table.preference-table > thead th:first-child { border-top-left-radius: 20px; width: auto; }
#region-main table.preference-table > thead th:last-child { border-top-right-radius: 20px; }
#region-main table.preference-table > thead th a { align-items: center; color: inherit; display: inline-flex; gap: 6px; text-decoration: none; }
#region-main table.preference-table > thead th a:hover { color: var(--bs-primary); }
/* Both heads on one line: Web and Email as 18px-high inline flex boxes; the (usually hidden) "Requires configuration"
   warning out of the flow, so it neither shifts Email nor adds a gap. */
#region-main table.preference-table > thead th > :is(span:not(.visually-hidden), a) { align-items: center; display: inline-flex; height: 18px; vertical-align: middle; }
#region-main table.preference-table > thead th a .hover-tooltip-container { position: absolute; }
#region-main table.preference-table > tbody > tr > th[colspan] { background: #f6f5ff; color: var(--bs-primary); font-size: 12px; font-weight: 600; letter-spacing: .05em; padding-bottom: 9px; padding-top: 9px; text-transform: uppercase; }
#region-main table.preference-table > tbody > tr.preference-row > th { font-weight: 400; }
#region-main table.preference-table > tbody > tr.preference-row:hover > * { background: #fbfaff; }
#region-main table.preference-table > tbody > tr > td { text-align: center; }
#region-main table.preference-table > tbody > tr > td .form-switch { align-items: center; display: inline-flex; gap: 10px; justify-content: center; margin: 0; min-height: 0; padding: 0; }
/* Default notification preferences (admin/message.php): each channel cell a small stack of "Enabled" and "Locked"
   switches with their labels beside them, left-aligned in the cell; the message names left-aligned in theirs. */
#region-main table.preference-table > tbody > tr.defaultmessageoutputs > td:first-child { text-align: left; }
#region-main table.preference-table > tbody > tr.defaultmessageoutputs > td.text-start { text-align: left; }
#region-main table.preference-table > tbody > tr.defaultmessageoutputs > td.text-start > div { display: flex; }
#region-main table.preference-table > tbody > tr.defaultmessageoutputs > td.text-start > div + div { margin-top: 6px; }
#region-main table.preference-table > tbody > tr.defaultmessageoutputs .form-switch { padding-bottom: 0 !important; padding-top: 0 !important; }
#region-main table.preference-table .form-switch .form-check-label { color: rgba(var(--mindoe-text-rgb), .75); cursor: pointer; font-size: 13px; line-height: 20px; margin: 0; }
#region-main table.preference-table .form-switch .form-check-input:checked + .form-check-label { color: var(--mindoe-text); font-weight: 500; }
#region-main table.preference-table > tbody > tr > td .form-switch .form-check-input { cursor: pointer; float: none; height: 20px; margin: 0; width: 36px; }
#region-main table.preference-table > tbody > tr:last-child > * { border-bottom: 0 !important; }
#region-main table.preference-table > tbody > tr:last-child > :first-child { border-bottom-left-radius: 20px; }
#region-main table.preference-table > tbody > tr:last-child > :last-child { border-bottom-right-radius: 20px; }

/* ---- A user's role assignments (admin/roles/usersroles.php) -------------------------------------------------- */
/* Moodle's nested bulleted list (System › Category › Course, each with its roles) becomes a tree on a white card: a
   thin rail per level, contexts as small headings (categories in small caps), each role a lavender chip holding its
   edit and check-permission icons. Courses without a name in the current language are hidden (theme_mindoe_page_init). */
#page-admin-roles-usersroles #region-main .generalbox {
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 24px;
    box-shadow: 0 24px 48px -42px rgba(var(--mindoe-shadow-rgb), .5);
    max-width: none;
    padding: 20px 24px !important;
}
#page-admin-roles-usersroles #region-main .generalbox ul { list-style: none; margin: 4px 0 0 7px; padding: 0 0 0 18px; position: relative; }
#page-admin-roles-usersroles #region-main .generalbox ul::before { background: rgba(var(--mindoe-text-rgb), .1); border-radius: 2px; bottom: 8px; content: ""; left: 0; position: absolute; top: 4px; width: 2px; }
#page-admin-roles-usersroles #region-main .generalbox li { margin: 0; padding: 4px 0; }
#page-admin-roles-usersroles #region-main .generalbox li.mindoe-noname { display: none; }
#page-admin-roles-usersroles #region-main .generalbox h4.contextname { font-size: 14px; font-weight: 600; margin: 0; }
#page-admin-roles-usersroles #region-main .generalbox h4.contextname a { color: var(--mindoe-text); text-decoration: none; }
#page-admin-roles-usersroles #region-main .generalbox h4.contextname a:hover { color: var(--bs-primary); }
#page-admin-roles-usersroles #region-main .generalbox > h4.contextname,
#page-admin-roles-usersroles #region-main .generalbox li:has(> ul) > h4.contextname { color: rgba(var(--mindoe-text-rgb), .55); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
#page-admin-roles-usersroles #region-main .generalbox :is(> h4.contextname, li:has(> ul) > h4.contextname) a { color: inherit; }
#page-admin-roles-usersroles #region-main .generalbox li > p {
    align-items: center;
    background: #ebe9fd;
    border-radius: 999px;
    color: #2c2896;
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    gap: 2px;
    margin: 6px 6px 0 0 !important;
    padding: 2px 4px 2px 10px;
}
#page-admin-roles-usersroles #region-main .generalbox li > p a { align-items: center; border-radius: 50%; color: inherit; display: inline-flex; height: 22px; justify-content: center; opacity: .6; width: 22px; }
#page-admin-roles-usersroles #region-main .generalbox li > p a:hover { background: #fff; opacity: 1; }
#page-admin-roles-usersroles #region-main .generalbox li > p .icon { font-size: 11px; margin: 0; }

/* ---- User selector (Check permissions, Assign roles, cohorts, groups…: Moodle's list of users with a search) ------ */
/* The list as a white panel (Moodle: lavender page colour, sharp grey box), its group labels ("Potential users",
   "Too many users… please use the search") as small notes; the search, Clear and "Search options" on one row. */
#region-main .generalbox:has(> form > div > .userselector),
#region-main .generalbox#chooseuser {
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 24px;
    box-shadow: 0 24px 48px -42px rgba(var(--mindoe-shadow-rgb), .5);
    max-width: none;
    padding: 22px 24px !important;
}
#region-main .generalbox#chooseuser h3 { font-size: 17px; margin: 0 0 12px; }
#region-main .userselector select.form-control {
    background: #fafaff;
    border-color: rgba(var(--mindoe-text-rgb), .1);
    border-radius: 16px;
    font-size: 14px;
    height: 320px;
    padding: 8px;
}
#region-main .userselector select.form-control:focus { background: #fff; }
#region-main .userselector select optgroup { color: rgba(var(--mindoe-text-rgb), .55); font-size: 12px; font-style: normal; font-weight: 600; letter-spacing: .03em; padding: 6px 4px; }
#region-main .userselector select option { border-radius: 8px; color: var(--mindoe-text); font-size: 14px; font-weight: 400; letter-spacing: 0; padding: 6px 10px; }
#region-main .userselector > .d-flex { gap: 8px; margin-top: 12px; }
#region-main .userselector > .d-flex > label { color: rgba(var(--mindoe-text-rgb), .7); font-size: 14px; margin: 0; }
#region-main .userselector > .d-flex > .form-control { background: #fff; border-radius: 999px; max-width: 280px; padding-left: 16px; }
/* "Search options" (keep selected, auto-select, matching) on its own row under the search, not beside it. */
#region-main .userselector > .d-flex > .collapsibleregion { flex: 1 1 100%; margin-top: 4px; }
#region-main .userselector .collapsibleregioncaption img.icon { height: 12px; opacity: .6; width: 12px; }
#region-main .userselector .collapsibleregioninner { color: rgba(var(--mindoe-text-rgb), .8); padding: 6px 0 0 2px; }
#region-main .userselector > .d-flex > .btn { margin: 0 !important; min-height: 42px; }
#region-main .userselector .collapsibleregioncaption a { font-size: 14px; font-weight: 600; text-decoration: none; }
#region-main .userselector .collapsibleregioninner { font-size: 14px; }
#region-main .userselector .collapsibleregioninner .form-check { margin-left: 0 !important; }
#region-main .userselector .collapsibleregioninner > div:not(.form-check) { padding-left: 1.5em; }
#region-main .userselector + :is(input, div, p), #region-main #chooseuser form > .userselector ~ * { margin-top: 18px; }
.btn-secondary:disabled { background-color: #f0f0f6; color: rgba(var(--mindoe-text-rgb), .4); opacity: 1; }

/* Personal access tokens: the intro as a quiet note above the list. */
#page-user-personalaccesstokens #region-main [role="main"] > h2 + p { color: rgba(var(--mindoe-text-rgb), .7); font-size: 14px; max-width: 760px; }

/* ---- My badges (badges/mybadges.php) ------------------------------------------------------------------------- */
/* The search as one pill row ("Search by name [field] Search  Clear"), Clear as a secondary pill; the heading's help
   icon in the brand colour with a little air. */
#page-badges-mybadges #region-main form.mform #fgroup_id_searchgroup { align-items: flex-start; margin: 4px 0 8px !important; }
#page-badges-mybadges #region-main form.mform #fgroup_id_searchgroup > .col-form-label { flex: none; max-width: none; padding: 0 16px 0 0 !important; width: auto; }
#page-badges-mybadges #region-main form.mform #fgroup_id_searchgroup > .col-form-label p { line-height: 42px; }
#page-badges-mybadges #region-main form.mform #fgroup_id_searchgroup > .felement { flex: 1; max-width: none; padding: 0; }
#page-badges-mybadges #region-main form.mform #fgroup_id_searchgroup .d-flex { gap: 8px; }
#page-badges-mybadges #region-main form.mform #fgroup_id_searchgroup .fitem { margin: 0 !important; }
#page-badges-mybadges #region-main form.mform #fgroup_id_searchgroup .form-control { background: #fff; border-radius: 999px; padding-left: 18px; width: 280px; }
#page-badges-mybadges #region-main form.mform #fgroup_id_searchgroup [name="clearsearch"] { background: #e7e5fc !important; border-color: transparent !important; box-shadow: none; color: var(--bs-primary) !important; }
#page-badges-mybadges #region-main form.mform #fgroup_id_searchgroup [name="clearsearch"]:hover { background: #dcd9fb !important; }
#page-badges-mybadges #region-main .boxwidthwide { padding-top: 0 !important; width: 100%; }

/* ---- Question banks (question/banks.php) ------------------------------------------------------------- */
/* "Add" sits inside the heading, floated: heading and button on one centred row instead of the button hanging over the
   box below. */
#page-question-banks #region-main h2 { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin: 24px 0 12px; }
#page-question-banks #region-main h2 > .float-end { float: none !important; font-size: var(--bs-body-font-size); font-weight: 400; letter-spacing: 0; }
/* Buttons inside an info box (an empty state's "Create default question bank"): white on the lavender box. */
.alert-info .btn-secondary { background: #fff; margin-top: 10px; }
.alert-info .btn-secondary:hover { background: #fff; box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .15); }

/* ---- Content bank (contentbank/index.php) ------------------------------------------------------------ */
/* Toolbar: a pill search field, everything on one 42px line, the grid/list switch as a segmented pill; the course
   picker as a pill; the content area a white card with a quiet path bar and a friendly empty state. */
#page-contentbank .cb-search-container .form-control { background: #fff; border-radius: 999px !important; min-height: 42px; padding-left: 18px; }
#page-contentbank .cb-toolbar-container { align-items: center; gap: 8px; }
#page-contentbank .cb-toolbar-container > .me-3 { color: rgba(var(--mindoe-text-rgb), .8); font-size: 14px; margin-right: 4px !important; padding-top: 0 !important; }
#page-contentbank .cb-toolbar-container > .me-3 label { align-items: center; display: inline-flex; gap: 6px; margin: 0; }
#page-contentbank .cb-toolbar-container .btn { align-items: center; display: inline-flex; gap: 6px; min-height: 42px; }
#page-contentbank .cb-toolbar-container > :is(.btn-group, .btn) { margin: 0 !important; }
#page-contentbank .cb-toolbar-container > .btn-group:last-child { background: #e7e5fc; border-radius: 999px; gap: 2px; padding: 3px; }
#page-contentbank .cb-toolbar-container > .btn-group:last-child > .btn {
    background: transparent;
    border: 0;
    border-radius: 999px !important;
    color: rgba(var(--mindoe-text-rgb), .6);
    justify-content: center;
    min-height: 36px;
    width: 40px;
}
#page-contentbank .cb-toolbar-container > .btn-group:last-child > .btn:hover { color: var(--bs-primary); }
#page-contentbank .cb-toolbar-container > .btn-group:last-child > .btn.active {
    background: #fff !important;
    box-shadow: 0 4px 10px -6px rgba(var(--mindoe-shadow-rgb), .6);
    color: var(--bs-primary);
}
#page-contentbank .cb-navigation-container .form-select { background-color: #fff; border-radius: 999px; min-width: 280px; padding-left: 18px; width: auto; }
#page-contentbank .content-bank-container > .border {
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06) !important;
    border-radius: 24px;
    box-shadow: 0 24px 48px -42px rgba(var(--mindoe-shadow-rgb), .5);
    margin-top: 8px;
    overflow: hidden;
}
#page-contentbank .cb-navbar { background: #fafaff !important; border-bottom: 1px solid rgba(var(--mindoe-text-rgb), .06) !important; font-size: 14px; font-weight: 600; padding: 12px 18px !important; }
#page-contentbank .cb-navbar .icon { color: var(--bs-primary); }
#page-contentbank .cb-content-wrapper > .text-center.text-muted { color: rgba(var(--mindoe-text-rgb), .6) !important; font-size: 14px; padding: 48px 16px 40px !important; }
#page-contentbank .cb-content-wrapper > .text-center.text-muted::before {
    background: #ebe9fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234642eb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E") center / 26px no-repeat;
    border-radius: 50%;
    content: "";
    display: block;
    height: 64px;
    margin: 0 auto 14px;
    width: 64px;
}

/* ---- Badges (badges/index.php) ------------------------------------------------------------------------ */
/* "Add a new badge" beside the heading as a plain button (not in a toolbar card of its own). */
#page-badges-index .badges-heading { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-bottom: 4px; }
#page-badges-index .badges-heading h2 { margin: 0; }
#page-badges-index #region-main .badges-heading .tertiary-navigation { background: transparent; border: 0; box-shadow: none; display: flex; margin: 0; padding: 0 !important; width: auto; }
#page-badges-index #region-main .badges-heading .tertiary-navigation :is(.d-flex, .navitem, .singlebutton, form) { margin: 0 !important; padding: 0 !important; }
#page-badges-index .reportbuilder-wrapper > .dropdown { margin-top: 12px; }
/* Report builder lists (badges, custom reports): the "Filters" button as a white pill, the height of the others. */
.reportbuilder-wrapper > .dropdown > #dropdownFiltersButton {
    align-items: center;
    background: #fff;
    border-color: rgba(var(--mindoe-text-rgb), .12);
    border-radius: 999px;
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 6px;
    min-height: 40px;
    padding: 0 16px;
}
.reportbuilder-wrapper > .dropdown > #dropdownFiltersButton .icon { color: var(--bs-primary); margin: 0; }
/* The other buttons of that row ("Add a new user"): a link has no vertical centring of its own, so in the 40px row its
   text sat at the top. */
.reportbuilder-wrapper > .dropdown > a.btn { align-items: center; display: inline-flex; min-height: 40px; padding-bottom: 0; padding-top: 0; }

/* The "Filters" panel. Moodle opens the report's filters (14 on Browse list of users) as a narrow dropdown: a long
   scroll through a 400px box, with no view of what is already set. Here the same dropdown opens as a card across the
   width between the toolbar and the table - the filters in a grid, all visible at once, "Apply" / "Reset all" at the
   bottom. Bootstrap still opens and closes it (the Filters button, a click outside); only its place changes. */
.reportbuilder-wrapper > .dropdown { flex-wrap: wrap; row-gap: 12px; }
.reportbuilder-wrapper > .dropdown > .filters-dropdown.dropdown-menu.show {
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 24px;
    box-shadow: 0 24px 48px -36px rgba(var(--mindoe-shadow-rgb), .55);
    flex: 0 0 100%;
    inset: auto !important;
    margin: 0 !important;
    order: 10;
    padding: 0 !important;
    position: static !important;
    transform: none !important;
    width: 100%;
}
.filters-dropdown .reportbuilder-filters-sidebar { background: #fff !important; border-radius: inherit; max-height: none; overflow: visible; }
.filters-dropdown .reportbuilder-filters-sidebar > .px-3 { padding: 22px 24px 0 !important; }
.reportbuilder-filters-wrapper form.mform { display: grid; gap: 18px 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.reportbuilder-filters-wrapper form.mform > div[style*="display: none"] { display: none !important; } /* Hidden inputs: no grid cell. */
.reportbuilder-filters-wrapper .filter { border: 0 !important; margin: 0 !important; min-width: 0; padding: 0 !important; }
.reportbuilder-filters-wrapper .filter-name { color: rgba(var(--mindoe-text-rgb), .7); font-size: 13px; font-weight: 600; margin-bottom: 8px; }
/* A filter that is set: its name in the brand colour with a dot, to see at a glance what narrows the list. */
.reportbuilder-filters-wrapper .filter:has(select[name$="_operator"] option[value="0"]:not(:checked)) .filter-name { color: var(--bs-primary); }
.reportbuilder-filters-wrapper .filter:has(select[name$="_operator"] option[value="0"]:not(:checked)) .filter-name::before {
    background: var(--bs-primary);
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 6px;
    margin-right: 7px;
    vertical-align: middle;
    width: 6px;
}
.reportbuilder-filters-wrapper .fitem.row { margin: 0 !important; }
.reportbuilder-filters-wrapper .fitem.row > .col-form-label { display: none !important; } /* Only an empty addon (Bootstrap: d-flex !important); the name is above. */
.reportbuilder-filters-wrapper .fitem.row > .felement { flex: 1 1 100%; max-width: 100%; padding: 0; }
.reportbuilder-filters-wrapper .felement fieldset > .d-flex { display: flex; flex-wrap: wrap; gap: 8px; }
.reportbuilder-filters-wrapper .felement fieldset > .d-flex > .fitem { flex: 1 1 110px !important; margin: 0 !important; min-width: 0; } /* Alone: full width; two: halves; a third wraps. */
.reportbuilder-filters-wrapper .felement fieldset > .d-flex > .fitem[hidden] { display: none !important; }
.reportbuilder-filters-wrapper :is(.form-select, .form-control) { border-radius: 12px; font-size: 14px; min-height: 40px; width: 100%; }
.reportbuilder-filters-wrapper .form-select { padding-right: 34px; }
.reportbuilder-filters-wrapper .fitem[data-groupname="buttonar"] {
    background: #fbfbff;
    border-radius: 0 0 24px 24px;
    border-top: 1px solid rgba(var(--mindoe-text-rgb), .07);
    grid-column: 1 / -1;
    margin: 4px -24px 0 !important;
    max-width: none !important; /* Moodle (a more specific rule): 100%. */
    padding: 14px 24px;
    position: static !important; /* Moodle pins it to the bottom of its sidebar (absolute), out of the grid. */
    width: auto;
}
.reportbuilder-filters-wrapper .fitem[data-groupname="buttonar"] fieldset > .d-flex { align-items: center; flex-direction: row-reverse; gap: 4px; justify-content: flex-start; }
.reportbuilder-filters-wrapper .fitem[data-groupname="buttonar"] fieldset > .d-flex > .fitem { flex: 0 0 auto !important; }
.reportbuilder-filters-wrapper .fitem[data-groupname="buttonar"] .btn-primary { font-weight: 600; min-height: 40px; padding: 0 26px; }
.reportbuilder-filters-wrapper .fitem[data-groupname="buttonar"] .btn-link { color: rgba(var(--mindoe-text-rgb), .65); font-size: 14px; font-weight: 600; margin: 0 !important; padding: 0 16px; text-decoration: none; }
.reportbuilder-filters-wrapper .fitem[data-groupname="buttonar"] .btn-link:hover { color: var(--bs-primary); }
/* The Filters button while the panel is open: pressed. */
.reportbuilder-wrapper > .dropdown > #dropdownFiltersButton[aria-expanded="true"] { background: var(--mindoe-lavender); border-color: transparent; box-shadow: none; }

/* ---- Competencies (admin/tool/lp/coursecompetencies.php, report/competency) ------------------------------ */
/* The user and activity filters as a white card; no empty table rule under the settings note. */
#region-main .float-end.border:has(.user-competency-course-navigation) {
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06) !important;
    border-radius: 20px;
    box-shadow: 0 20px 40px -36px rgba(var(--mindoe-shadow-rgb), .5);
    margin-left: 16px;
    padding: 10px 12px !important;
}
#page-admin-tool-lp-coursecompetencies [data-region="actions"] { margin: 12px 0 16px; }
#page-admin-tool-lp-coursecompetencies table.managecompetencies:not(:has(tr)) { display: none; }
#region-main .float-end.border:has(.user-competency-course-navigation) > p:empty { display: none; }
#region-main .float-end.border:has(.user-competency-course-navigation) .form-autocomplete-input { margin-bottom: 4px; }
/* Competency breakdown: the competency/rating table as a white card. */
#page-report-competency-index #region-main table.table-bordered {
    background: #fff;
    border-collapse: separate;
    border-radius: 20px;
    border-spacing: 0;
    box-shadow: 0 0 0 1px rgba(var(--mindoe-text-rgb), .06), 0 20px 40px -36px rgba(var(--mindoe-shadow-rgb), .5);
    font-size: 14px;
    margin-top: 16px;
    width: 100%;
}
#page-report-competency-index #region-main table.table-bordered :is(th, td) { border: 0; border-bottom: 1px solid rgba(var(--mindoe-text-rgb), .06); padding: 12px 16px; }
#page-report-competency-index #region-main table.table-bordered tr:last-child > * { border-bottom: 0; }
#page-report-competency-index #region-main table.table-bordered th[scope="col"] {
    background: #fafaff;
    color: rgba(var(--mindoe-text-rgb), .6);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#page-report-competency-index #region-main table.table-bordered tr:first-child > :first-child { border-top-left-radius: 20px; }
#page-report-competency-index #region-main table.table-bordered tr:first-child > :last-child { border-top-right-radius: 20px; }
#page-report-competency-index #region-main table.table-bordered tr:last-child > :first-child { border-bottom-left-radius: 20px; }
#page-report-competency-index #region-main table.table-bordered tr:last-child > :last-child { border-bottom-right-radius: 20px; }
/* An .alert without a type (a plain note): a white strip, not an unstyled box. */
.alert:not([class*="alert-"]) {
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    box-shadow: 0 16px 32px -30px rgba(var(--mindoe-shadow-rgb), .5);
    font-size: 14px;
    padding: 14px 18px;
}
/* Autocomplete fields everywhere: the chosen values as lavender chips (Moodle: grey badges with a thick ring on the
   one with keyboard focus), a quieter arrow. */
.form-autocomplete-selection [role="option"].badge {
    background: #e7e5fc !important;
    border-radius: 999px;
    color: var(--bs-primary) !important;
    font-size: 13px !important;
    font-weight: 600;
    padding: 6px 12px;
}
.form-autocomplete-selection [role="option"].badge[data-active-selection="true"] { box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), .35); outline: 0; }
.form-autocomplete-selection:focus { box-shadow: none; outline: 0; }
.form-autocomplete-selection:focus-visible [data-active-selection="true"] { box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .45); }
.form-autocomplete-downarrow { color: rgba(var(--mindoe-text-rgb), .45); font-size: 10px; right: 10px !important; top: 50% !important; transform: translateY(-50%); }

/* ---- Confirmation pages (unenrol, delete…: a dialog in the page) --------------------------------------------- */
/* Moodle's in-page dialog clips its box (overflow hidden), which cut the theme's modal shadow into a hard rectangle:
   let it show, with a card's shadow rather than a floating modal's. */
#region-main .modal-in-page { overflow: visible !important; }
/* Title, message and buttons on one left edge (Moodle: 16px for the title, 28px for the message); a section-size title. */
#region-main .modal-in-page :is(.modal-header, .modal-body, .modal-footer) { padding-left: 28px !important; padding-right: 28px !important; }
#region-main .modal-in-page .modal-header { padding-bottom: 0 !important; padding-top: 24px !important; }
#region-main .modal-in-page .modal-header :is(h4, .h4) { font-size: 20px; margin: 0; }
#region-main .modal-in-page .modal-footer { padding-bottom: 24px !important; }
#region-main .modal-in-page .modal-content {
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    box-shadow: 0 30px 60px -44px rgba(var(--mindoe-shadow-rgb), .55);
}

/* ---- A user's pages (certificates, forum posts, learning plans, competency breakdown) --------------------------- */
/* Their header shows the user: Moodle's 100px grey initials disc becomes the profile's gradient disc at 64px, beside a
   page-title name (the competency report's 40px h3 included). :where() keeps it under the profile hero's own size. */
:where(#page-header, #region-main) .page-context-header:has(.page-header-image :is(.userinitials, .userpicture)) { flex-wrap: nowrap; gap: 18px; overflow: visible; }
:where(#page-header, #region-main) .page-context-header .page-header-image { margin: 0 !important; overflow: visible; padding: 5px; }
:where(#page-header, #region-main) .page-context-header .page-header-image :is(.userinitials, img.userpicture) {
    border-radius: 50%;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(var(--bs-primary-rgb), .18);
    height: 64px;
    margin: 0 !important;
    width: 64px;
}
:where(#page-header, #region-main) .page-context-header .page-header-image .userinitials {
    align-items: center;
    background: linear-gradient(135deg, var(--bs-primary), #8b88f5);
    color: #fff;
    display: inline-flex;
    font-size: 22px;
    font-weight: 700;
    justify-content: center;
}
#region-main .page-context-header .page-header-headings :is(h2, h3) { font-size: 26px; letter-spacing: -.02em; }
/* Certificates: the intro as a quiet line above the list. */
#page-mod-customcert-my_certificates [role="main"] > h2 + div { color: rgba(var(--mindoe-text-rgb), .7); font-size: 14px; margin-bottom: 14px; }
/* Forum posts and discussions: "You haven't made any posts" is an empty list, not an error - the info look. */
#page-mod-forum-user #region-main .alert-danger { background: #ebe9fd; color: #2c2896; }
/* Learning plans: no header-only table above "No learning plans have been created yet"; the add button and the
   evidence link on their own rows, the link as a pill. */
#page-admin-tool-lp-plans [data-region="plans"] > .float-start { float: none !important; }
#page-admin-tool-lp-plans [data-region="plans"] > .float-start:first-child { margin-bottom: 16px; }
#page-admin-tool-lp-plans [data-region="plans"] table:not(:has(tbody tr)) { display: none; }
#page-admin-tool-lp-plans [data-region="plans"] > .float-start:last-child a {
    align-items: center;
    background: #e7e5fc;
    border-radius: 999px;
    color: var(--bs-primary);
    display: inline-flex;
    font-weight: 600;
    gap: 8px;
    padding: 8px 16px 8px 18px;
    text-decoration: none;
}
#page-admin-tool-lp-plans [data-region="plans"] > .float-start:last-child a::after { content: "→"; }
#page-admin-tool-lp-plans [data-region="plans"] > .float-start:last-child a:hover { background: #dcd9fb; }

/* ---- Tags (tag/search.php) --------------------------------------------------------------------------------- */
/* "Manage tags" on the title's line (without breadcrumbs Boost puts the header buttons on a row of their own above
   it); the search as one pill field and button; the tag cloud as chips on a white card - Moodle sizes the tags up to
   48px by use, the chips keep one size and show use by colour (s5 → s20). */
#page-header > .w-100:has(> .d-flex.flex-wrap .singlebutton):not(:has(#page-navbar .breadcrumb)) {
    align-items: center;
    column-gap: 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}
#page-header > .w-100:has(> .d-flex.flex-wrap .singlebutton):not(:has(#page-navbar .breadcrumb)) > .d-flex.flex-wrap { grid-column: 2; grid-row: 1; }
#page-header > .w-100:has(> .d-flex.flex-wrap .singlebutton):not(:has(#page-navbar .breadcrumb)) > .d-flex.align-items-center { grid-column: 1; grid-row: 1; }
#page-header > .w-100:has(> .d-flex.flex-wrap .singlebutton):not(:has(#page-navbar .breadcrumb)) > .header-extras-container { grid-column: 1 / -1; }
#tag-search-box { margin: 0 !important; max-width: 640px; padding-top: 4px !important; width: 100% !important; }
#tag-search-box form { gap: 8px !important; }
#tag-search-box .form-control { background: #fff; border-radius: 999px; min-height: 46px; padding-left: 20px; }
#tag-search-box .btn { border-radius: 999px; min-height: 46px; padding: 0 24px; }
#tag-search-results {
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 24px;
    box-shadow: 0 24px 48px -42px rgba(var(--mindoe-shadow-rgb), .5);
    margin-top: 24px;
    padding: 24px;
}
.tag_cloud ul.inline-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; list-style: none; margin: 0; padding: 0; }
.tag_cloud ul.inline-list > li { margin: 0; padding: 0; }
.tag_cloud ul.inline-list > li > a {
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .1);
    border-radius: 999px;
    color: var(--mindoe-text);
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    padding: 7px 14px;
    text-decoration: none;
    transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out;
}
.tag_cloud ul.inline-list > li > a.s10 { background: var(--mindoe-lavender); border-color: transparent; color: #2c2896; }
.tag_cloud ul.inline-list > li > a.s15 { background: #e7e5fc; border-color: transparent; color: var(--bs-primary); font-weight: 600; }
.tag_cloud ul.inline-list > li > a.s20 { background: var(--bs-primary); border-color: transparent; color: #fff; font-weight: 600; }
.tag_cloud ul.inline-list > li > a:hover { border-color: rgba(var(--bs-primary-rgb), .45); color: var(--bs-primary); }
.tag_cloud ul.inline-list > li > a.s20:hover { background: #3833d6; color: #fff; }

/* ---- Activity completion report (report/progress) ---------------------------------------------------------- */
/* The filters (Include / Activity order / Section) as one row of labelled pills; the table with room in its cells
   (Moodle: 2px), the name and email headers on the line of the activity names, the ticks centred. */
#page-report-progress-index :is(.include-activity-selector, .activity-section-selector) { margin: 0 12px 12px 0 !important; }
#page-report-progress-index :is(.include-activity-selector, .activity-section-selector) label { color: rgba(var(--mindoe-text-rgb), .7); font-size: 14px; }
#page-report-progress-index :is(.include-activity-selector, .activity-section-selector) .form-select { background-color: #fff; border-radius: 999px; font-size: 14px; padding-left: 16px; }
#page-report-progress-index #completion-progress { font-size: 14px; }
#page-report-progress-index #completion-progress > * > tr > :is(th, td) { padding: 10px 14px; vertical-align: middle; }
#page-report-progress-index #completion-progress > thead > tr > th { padding-bottom: 12px; vertical-align: bottom; }
#page-report-progress-index #completion-progress > thead > tr > th.completion-header { padding: 12px 8px; text-align: center; }
#page-report-progress-index #completion-progress .rotated-text { font-size: 11px; }
#page-report-progress-index #completion-progress .modicon { margin-top: 8px; }
#page-report-progress-index #completion-progress > tbody > tr > th { font-weight: 600; }
#page-report-progress-index #completion-progress > tbody > tr > th a { text-decoration: none; }
#page-report-progress-index #completion-progress > tbody > tr > td:not(.completion-progresscell) { color: rgba(var(--mindoe-text-rgb), .75); font-size: 13px; }
#page-report-progress-index #completion-progress td.completion-progresscell { padding: 8px; text-align: center; }
#page-report-progress-index #completion-progress-wrapper { border-radius: 20px; margin: 12px 0; padding: 1px; }

/* ---- Course participation report (report/participation) --------------------------------------------------- */
/* Its four filters stacked down the page (label, select, label, select…) become one white card with a column per
   filter - label above its select - and "Go" at the end of the row. */
#page-report-participation-index form.participationselectform > div {
    align-items: end;
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 24px;
    box-shadow: 0 20px 40px -36px rgba(var(--mindoe-shadow-rgb), .5);
    display: grid;
    gap: 6px 12px;
    grid-auto-flow: column;
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) auto;
    grid-template-rows: auto auto;
    padding: 16px 18px 18px;
    width: 100%;
}
#page-report-participation-index form.participationselectform { margin-bottom: 18px; width: 100%; }
#page-report-participation-index form.participationselectform label { color: rgba(var(--mindoe-text-rgb), .7); font-size: 13px; font-weight: 600; margin: 0; padding-left: 4px; }
#page-report-participation-index form.participationselectform .form-select { margin: 0 !important; width: 100%; }
#page-report-participation-index form.participationselectform .btn { grid-row: 2; min-height: 42px; padding: 0 24px; }
/* The report: what the two counts mean ("SCORM package Views / Posts") as a quiet note; "Show all" under the pager. */
#page-report-participation-index #participationreport > p.modulename { color: rgba(var(--mindoe-text-rgb), .65); font-size: 13px; margin: 2px 0 18px; }
#page-report-participation-index #participationreport > h2 { margin-bottom: 12px; }
#region-main #showall { margin-top: -4px; text-align: center; }
#region-main #showall a { font-size: 14px; font-weight: 600; text-decoration: none; }
@media (max-width: 767.98px) {
    #page-report-participation-index form.participationselectform > div { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
    #page-report-participation-index form.participationselectform .btn { grid-row: auto; justify-self: start; margin-top: 8px; }
}

/* ---- User report (grade/report/user, course/user.php?mode=grade) ---------------------------------------------- */
/* The grade table straight on the page (Moodle: inside a grey box), no grey side rules or grey indent column; each
   category a white row, its total (Σ Course total) a lavender band. */
#region-main .grade-report-user .user-report-container { background: transparent !important; padding: 0 !important; }
#region-main .grade-report-user table.user-grade > tbody > tr > :is(th, td) { border-left: 0 !important; border-right: 0 !important; }
#region-main .grade-report-user table.user-grade > tbody > tr > th.category { background: #fff; font-size: 15px; }
#region-main .grade-report-user table.user-grade > tbody > tr.spacer > td,
#region-main .grade-report-user table.user-grade > tbody > tr > td[class*="b1l"] { background: #fff; border-bottom: 0 !important; }
#region-main .grade-report-user table.user-grade > tbody > tr > .baggt { background: #f6f5ff; font-weight: 600; }
#region-main .grade-report-user table.user-grade > tbody > tr > th.baggt { border-radius: 14px 0 0 14px; }
#region-main .grade-report-user table.user-grade > tbody > tr > :is(th, td).column-itemname .small { color: rgba(var(--mindoe-text-rgb), .55); font-size: 11px; letter-spacing: .05em; }

/* Grades overview (grade/report/overview): courses exist once per language ({mlang xx}…{mlang}), and a course without
   a name in the current language came out as a blank row with an empty link - hidden, as in the other course lists. */
.path-grade-report-overview #region-main table.generaltable > tbody > tr:has(> td:first-child > a:empty) { display: none; }

/* Download bar under report tables ("Download table data as [CSV] Download"): one centred line, a pill select. */
#region-main form.dataformatselector { margin: 12px 0 !important; }
#region-main form.dataformatselector > .d-flex { align-items: center !important; gap: 8px; }
#region-main form.dataformatselector label { color: rgba(var(--mindoe-text-rgb), .7); font-size: 14px; margin: 0 !important; }
#region-main form.dataformatselector .form-select { background-color: #fff; border-radius: 999px; font-size: 14px; margin: 0 !important; min-height: 40px; padding-left: 16px; width: auto; }
#region-main form.dataformatselector .btn { min-height: 40px; }

/* Moodle's simple search (admin search in the page header, course search in the category tools…): field and button as
   one pill - Moodle rounds only the button, which hung off a square field with the primary button's glow under it. */
.simplesearchform .input-group > .form-control { border-radius: 999px 0 0 999px !important; padding-left: 18px; }
.simplesearchform .input-group > .btn.search-icon { border-radius: 0 999px 999px 0 !important; box-shadow: none; padding: 0 16px 0 14px; }

/* ---- Admin settings pages (admin/settings.php?section=…: site home, plugins, every settings section) ----------- */
/* Moodle lays the settings straight on the page, right-aligned labels facing loose inputs and descriptions. Here: one
   white card with a row per setting divided by hairlines - the name left-aligned and bold, its config name as a small
   code chip under it, the field, the help text as quiet copy, the default as a small pill - and "Save changes"
   under the card. */
#adminsettings fieldset {
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 24px;
    box-shadow: 0 24px 48px -42px rgba(var(--mindoe-shadow-rgb), .5);
    margin: 4px 0 20px;
    padding: 4px 28px !important;
}
#adminsettings fieldset > .clearer { display: none; }
#adminsettings .form-item {
    border-bottom: 1px solid rgba(var(--mindoe-text-rgb), .06);
    margin: 0 !important;
    padding: 22px 0;
}
#adminsettings .form-item:last-child { border-bottom: 0; }
#adminsettings .form-item > .form-label { padding-left: 0; padding-right: 28px; text-align: left !important; }
#adminsettings .form-item > .form-setting { padding-right: 0; }
/* Heading "settings" between the rows (notices, section titles, links to tools): on the same left edge as the rows,
   a notice with air above it, a section title at card-title size, and a page's tool links (Request access key, Check
   and test…) as a row of lavender pills instead of loose links. */
#adminsettings .formsettingheading { border-bottom: 1px solid rgba(var(--mindoe-text-rgb), .06); padding: 20px 0; }
#adminsettings .formsettingheading:last-child { border-bottom: 0; }
#adminsettings .formsettingheading > .alert { margin: 0; }
#adminsettings .formsettingheading :is(h3, h4) { font-size: 17px; margin: 4px 0 6px; }
#adminsettings .formsettingheading > p:last-child { margin-bottom: 0; }
#adminsettings .formsettingheading:has(> p:only-child > a:only-child) { border-bottom: 0; display: inline-flex; margin-right: 8px; padding: 20px 0; }
#adminsettings .formsettingheading > p:only-child > a:only-child {
    align-items: center;
    background: #e7e5fc;
    border-radius: 999px;
    color: var(--bs-primary);
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    padding: 9px 18px;
    text-decoration: none;
    transition: background-color .15s ease-out;
}
#adminsettings .formsettingheading > p:only-child > a:only-child::after { content: "→"; }
#adminsettings .formsettingheading > p:only-child > a:only-child:hover { background: #dcd9fb; }
/* Those pills follow the last row; the row before them keeps its divider. */
#adminsettings .form-item:has(+ .formsettingheading > p:only-child > a:only-child) { border-bottom: 1px solid rgba(var(--mindoe-text-rgb), .06); }
#adminsettings .form-item > .form-label :is(label, p) { color: var(--mindoe-text); font-size: 15px; font-weight: 600; line-height: 1.35; margin: 0; }
#adminsettings .form-item > .form-label .form-shortname {
    background: #f6f5ff;
    border-radius: 6px;
    color: rgba(var(--mindoe-text-rgb), .55) !important;
    display: table !important; /* Its own line under the name, whatever the name's length. */
    font-family: var(--bs-font-monospace);
    font-size: 11px !important;
    margin-top: 6px;
    padding: 2px 7px;
}
#adminsettings .form-setting :is(.form-control:not(textarea), .form-select) { max-width: 440px; }
#adminsettings .form-setting .form-select + br { display: none; }
#adminsettings .form-setting .form-select.mb-1 { margin-bottom: 6px !important; }
/* Ordered slots (Site home items: five selects in a column) side by side, in reading order. */
#adminsettings .form-setting > .mb-3:has(> .form-select + br) { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0 !important; }
#adminsettings .form-setting > .mb-3:has(> .form-select + br) > .form-select { flex: 0 1 220px; margin: 0 !important; }
#adminsettings .form-setting > .form-text.mt-2 { color: rgba(var(--mindoe-text-rgb), .65); font-size: 13px; line-height: 1.55; margin-top: 10px !important; max-width: 680px; }
#adminsettings .form-setting > .form-text.mt-2 p { margin: 0 0 6px; }
#adminsettings .form-setting > .form-text.mt-2 p:last-child { margin-bottom: 0; }
#adminsettings .form-setting > .form-text.mt-2:empty { display: none; }
#adminsettings .form-setting > .defaultsnext { margin-top: 0 !important; }
#adminsettings .form-setting .form-defaultinfo {
    background: #f6f5ff;
    border-radius: 999px;
    color: rgba(var(--mindoe-text-rgb), .6) !important;
    display: inline-flex;
    font-size: 12px;
    font-weight: 500;
    margin-top: 10px;
    padding: 3px 11px;
}
#adminsettings .form-setting .form-checkbox input[type="checkbox"] { height: 20px; margin: 0; vertical-align: middle; width: 20px; }
/* A checkbox and its default pill on one middle line, level with the setting's name. */
#adminsettings .form-setting > .form-checkbox { align-items: center; display: inline-flex; height: 26px; margin-right: 8px; vertical-align: middle; }
#adminsettings .form-setting > .form-checkbox + .form-defaultinfo { margin-top: 0; vertical-align: middle; }
#adminsettings .settingsform > .row:last-child > [class*="offset-"] { margin-left: 0; }
#adminsettings .settingsform > .row:last-child .btn-primary { padding: 10px 26px; }
@media (min-width: 576px) {
    #adminsettings .form-item > .form-label { flex: 0 0 280px; max-width: 280px; }
    #adminsettings .form-item > .form-setting { flex: 1 1 0; max-width: none; }
}

/* ---- Admin category pages (admin/category.php?category=…) -------------------------------------------------------- */
/* A category lists its pages: those whose settings fit on the page come with them, the others are only links. Moodle
   draws every page name as a big blue heading, which gave a wall of links (and the settings card sat in a second
   card). Here the outer group is no card: pages with settings get a section title and their own card across the
   width, link-only pages become a grid of white tiles with a chevron, and "Save changes" closes the list. */
#region-main #adminsettings > fieldset:has(> h3) {
    background: transparent;
    border: 0;
    box-shadow: none;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    margin: 4px 0 0;
    padding: 0 !important;
}
#region-main #adminsettings > fieldset:has(> h3) > .clearer { display: none; }
#region-main #adminsettings > fieldset:has(> h3) > h3 { border: 0 !important; padding: 0; }
#region-main #adminsettings > fieldset:has(> h3) > :is(h3:has(+ fieldset.adminsettings), fieldset.adminsettings, .form-buttons) { grid-column: 1 / -1; }
#region-main #adminsettings > fieldset:has(> h3) > h3:has(+ fieldset.adminsettings) { font-size: 17px; margin: 8px 0 -2px; }
#region-main #adminsettings > fieldset:has(> h3) > h3:has(+ fieldset.adminsettings) a { color: var(--mindoe-text); text-decoration: none; }
#region-main #adminsettings > fieldset:has(> h3) > h3:has(+ fieldset.adminsettings) a:hover { color: var(--bs-primary); }
#region-main #adminsettings > fieldset:has(> h3) > fieldset.adminsettings { margin: 0 0 12px; }
#region-main #adminsettings > fieldset:has(> h3) > h3:not(:has(+ fieldset.adminsettings)) { margin: 0; }
#region-main #adminsettings > fieldset:has(> h3) > h3:not(:has(+ fieldset.adminsettings)) a {
    align-items: center;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a99' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") right 16px center / 16px no-repeat;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 18px;
    box-shadow: 0 20px 40px -36px rgba(var(--mindoe-shadow-rgb), .5);
    color: var(--mindoe-text);
    display: flex;
    font-size: 15px;
    font-weight: 600;
    height: 100%;
    letter-spacing: 0;
    line-height: 1.35;
    min-height: 64px;
    padding: 14px 44px 14px 18px;
    text-decoration: none;
    transition: background-position .2s ease-out, border-color .15s ease-out, box-shadow .2s ease-out, transform .2s ease-out;
}
#region-main #adminsettings > fieldset:has(> h3) > h3:not(:has(+ fieldset.adminsettings)) a:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234642eb' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
    background-position: right 12px center;
    border-color: rgba(var(--bs-primary-rgb), .2);
    box-shadow: 0 24px 44px -30px rgba(var(--mindoe-shadow-rgb), .55);
    color: var(--bs-primary);
    transform: translateY(-2px);
}
#region-main #adminsettings > fieldset:has(> h3) > .form-buttons { margin-top: 8px; }
#region-main #adminsettings > fieldset:has(> h3) > .form-buttons .btn { padding: 10px 26px; }
@media (prefers-reduced-motion: reduce) {
    #region-main #adminsettings > fieldset:has(> h3) > h3 a { transition: none; }
    #region-main #adminsettings > fieldset:has(> h3) > h3 a:hover { transform: none; }
}

/* ---- Admin search results (admin/search.php?query=…) ------------------------------------------------------------ */
/* The results share the category pages' markup (one fieldset with a title per page), so the tile grid above would
   put "Search results", each page's name and its path side by side as tiles. Here: a plain list - the heading, then
   per page its name (a link with an arrow), its path as a quiet breadcrumb, and its settings card. */
#page-admin-search #region-main #adminsettings > fieldset:has(> h3) { display: block; }
#page-admin-search #adminsettings h2.main { font-size: 22px; letter-spacing: -.02em; margin: 8px 0 18px; }
#page-admin-search #region-main #adminsettings > fieldset:has(> h3) > h3.adminpagetitle { font-size: 18px; margin: 28px 0 4px; }
#page-admin-search #region-main #adminsettings > fieldset:has(> h3) > h2.main + h3.adminpagetitle { margin-top: 0; }
#page-admin-search #region-main #adminsettings > fieldset:has(> h3) > h3.adminpagetitle a {
    align-items: center;
    background: none;
    border: 0;
    box-shadow: none;
    color: var(--mindoe-text);
    display: inline-flex;
    font-size: inherit;
    font-weight: 700;
    gap: 8px;
    min-height: 0;
    padding: 0;
    transform: none;
}
#page-admin-search #region-main #adminsettings > fieldset:has(> h3) > h3.adminpagetitle a::after {
    background: currentColor;
    content: "";
    height: 16px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: .4;
    transition: opacity .15s, translate .15s;
    width: 16px;
}
#page-admin-search #region-main #adminsettings > fieldset:has(> h3) > h3.adminpagetitle a:hover { color: var(--bs-primary); }
#page-admin-search #region-main #adminsettings > fieldset:has(> h3) > h3.adminpagetitle a:hover::after { opacity: 1; translate: 3px 0; }
#page-admin-search #adminsettings ul.adminpagepath { display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 0 0 14px; padding: 0; }
#page-admin-search #adminsettings ul.adminpagepath li { color: rgba(var(--mindoe-text-rgb), .55) !important; font-size: 13px; }
#page-admin-search #adminsettings ul.adminpagepath li + li::before { color: rgba(var(--mindoe-text-rgb), .3); content: "/"; padding: 0 8px; }
#page-admin-search #adminsettings > fieldset > .row:last-child { margin: 20px 0 0; }
#page-admin-search #adminsettings > fieldset > .row:last-child .btn-primary { padding: 10px 26px; }
#page-admin-search #adminsettings > fieldset > .row:last-child > [class*="offset-"] { margin-left: 0; padding: 0; }
/* The search words (in names and descriptions): a soft marker, not Bootstrap's teal text. */
#page-admin-search #adminsettings .highlight { background: #fff1c2; border-radius: 4px; box-shadow: 0 0 0 2px #fff1c2; color: inherit; }

/* A setting fixed in config.php (Moodle: a full info box inside the name): a small "locked" chip under the name, and
   its field reads as locked - muted, dashed, no text cursor. Every admin settings page. */
#adminsettings .form-item > .form-label label .alert {
    align-items: center;
    background: #fff4dc;
    border: 0;
    border-radius: 999px;
    color: #8a5a00;
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    gap: 6px;
    line-height: 1.4;
    margin: 8px 0 0;
    padding: 3px 10px 3px 8px;
    width: auto;
}
#adminsettings .form-item > .form-label label .alert::before {
    background: currentColor;
    content: "";
    flex: none;
    height: 12px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
    width: 12px;
}
#adminsettings .form-setting :is(.form-control, .form-select):disabled {
    border: 1.5px dashed rgba(var(--mindoe-text-rgb), .16);
    color: rgba(var(--mindoe-text-rgb), .6);
    cursor: not-allowed;
}

/* A password setting (quiz password, SMTP password…): Moodle shows an italic "Click to enter text" link with a pencil.
   Here it reads as the field it opens - a soft box with the value (or the hint) and the pencil at its end; the eye
   beside it is a small round button. */
#adminsettings [data-passwordunmask="wrapper"] { align-items: center; display: inline-flex; flex-wrap: wrap; }
#adminsettings [data-passwordunmask="edit"] {
    align-items: center;
    background: var(--mindoe-lavender);
    border: 1px solid rgba(var(--mindoe-text-rgb), .16);
    border-radius: 12px;
    color: rgba(var(--mindoe-text-rgb), .55);
    display: inline-flex;
    font-size: 15px;
    gap: 10px;
    justify-content: space-between;
    min-height: 42px;
    min-width: 260px;
    padding: 0 12px 0 14px;
    text-decoration: none;
    transition: border-color .15s ease-out;
}
#adminsettings [data-passwordunmask="edit"]:hover { border-color: rgba(var(--mindoe-text-rgb), .28); color: var(--mindoe-text); }
#adminsettings [data-passwordunmask="edit"] em { font-style: normal; }
#adminsettings [data-passwordunmask="edit"] .icon { color: rgba(var(--mindoe-text-rgb), .45); font-size: 13px; margin: 0; }
#adminsettings [data-passwordunmask="unmask"] {
    align-items: center;
    border-radius: 50%;
    color: rgba(var(--mindoe-text-rgb), .5);
    display: inline-flex;
    height: 36px;
    justify-content: center;
    margin-left: 8px;
    transition: background-color .15s, color .15s;
    width: 36px;
}
#adminsettings [data-passwordunmask="unmask"]:hover { background: var(--mindoe-lavender); color: var(--bs-primary); }
#adminsettings [data-passwordunmask="unmask"] .icon { margin: 0; }
#adminsettings [data-passwordunmask="instructions"] { flex-basis: 100%; font-size: 12px; }
/* "Advanced / Required / Locked" (activity defaults: the settings teachers see on the activity form): Moodle floats
   bare checkboxes, each beside its label, to the far right. Here: a row of small chips under the field - the label is
   the chip with a drawn box, the real checkbox (still focusable) sits invisibly under it. */
#adminsettings .form-setting .adminsettingsflags { display: flex; flex-wrap: wrap; float: none; gap: 8px; margin-top: 12px; position: relative; }
#adminsettings .form-setting .adminsettingsflags input[type="checkbox"] { height: 1px; margin: 0; opacity: 0; position: absolute; width: 1px; }
#adminsettings .form-setting .adminsettingsflags label {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .12);
    border-radius: 999px;
    color: rgba(var(--mindoe-text-rgb), .75);
    cursor: pointer;
    display: inline-flex;
    font-size: 13px;
    font-weight: 500;
    gap: 8px;
    margin: 0;
    padding: 5px 12px 5px 9px;
    transition: border-color .15s, background-color .15s, color .15s;
    user-select: none;
}
#adminsettings .form-setting .adminsettingsflags label::before {
    background: #fff center / 10px no-repeat;
    border: 1.5px solid rgba(var(--mindoe-text-rgb), .3);
    border-radius: 5px;
    content: "";
    flex: none;
    height: 16px;
    transition: background-color .15s, border-color .15s;
    width: 16px;
}
#adminsettings .form-setting .adminsettingsflags label:hover { border-color: rgba(var(--bs-primary-rgb), .4); color: var(--mindoe-text); }
#adminsettings .form-setting .adminsettingsflags input:checked + label { background: var(--mindoe-lavender); border-color: transparent; color: var(--bs-primary); }
#adminsettings .form-setting .adminsettingsflags input:checked + label::before {
    background-color: var(--bs-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    border-color: var(--bs-primary);
}
#adminsettings .form-setting .adminsettingsflags input:focus-visible + label { box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .18); }

/* ---- Tab rows (Moodle's tab trees: cohorts, roles, gradebook setup…) ---------------------------------------------- */
/* Bootstrap's folder tabs on a grey line become a segmented pill on a white bar: the current tab a white chip with
   a soft shadow, the others quiet text with a lavender hover. */
#region-main ul.nav-tabs {
    background: #e7e5fc;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 20px !important;
    padding: 4px;
}
#region-main ul.nav-tabs .nav-item { margin: 0; }
#region-main ul.nav-tabs .nav-link {
    background: transparent;
    border: 0 !important;
    border-radius: 999px;
    color: rgba(var(--mindoe-text-rgb), .7);
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    padding: 8px 18px;
    transition: background-color .15s ease-out, color .15s ease-out;
}
#region-main ul.nav-tabs .nav-link:hover { background: rgba(255, 255, 255, .55); color: var(--bs-primary); }
#region-main ul.nav-tabs .nav-link:is(.active, [aria-current]) {
    background: #fff;
    box-shadow: 0 6px 14px -8px rgba(var(--mindoe-shadow-rgb), .6);
    color: var(--bs-primary);
}
/* Report builder lists with no rows (cohorts, badges, custom reports…): "Nothing to display" as an empty state - a
   white card with an inbox icon in a lavender disc - instead of a lavender alert bar. */
.reportbuilder-report [data-region="core_table/dynamic"] > .alert-info {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 24px;
    box-shadow: 0 24px 48px -42px rgba(var(--mindoe-shadow-rgb), .5);
    color: rgba(var(--mindoe-text-rgb), .6);
    display: flex;
    flex-direction: column;
    font-size: 14px;
    gap: 14px;
    padding: 44px 16px 40px;
}
.reportbuilder-report [data-region="core_table/dynamic"] > .alert-info::before {
    background: #ebe9fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234642eb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13l2.5-7.5A2 2 0 0 1 8.4 4h7.2a2 2 0 0 1 1.9 1.5L20 13'/%3E%3Cpath d='M4 13v5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5h-5l-1 2h-4l-1-2z'/%3E%3C/svg%3E") center / 28px no-repeat;
    border-radius: 50%;
    content: "";
    height: 64px;
    width: 64px;
}
/* Nothing listed, nothing to select: no "Delete selected" under the empty state. */
#page-cohort-index #region-main:not(:has(.reportbuilder-report table)) .singlebutton:has([data-action="cohort-delete-selected"]) { display: none; }
/* Cohorts: "Delete selected" is a destructive action: a soft red pill, not the brand's primary button. */
#page-cohort-index #region-main [data-action="cohort-delete-selected"] { background: #fdeceb; border: 0; box-shadow: none; color: #a12a20; }
#page-cohort-index #region-main [data-action="cohort-delete-selected"]:hover { background: #fadad7; color: #8f241b; }

/* ---- Admin tools (Server, Appearance…: tasks, file types, web services, tours, OAuth 2, tags) ---------------- */
/* Shared by Moodle's admin tables (admintable, report builder lists): body text at 14px, column names on one line,
   a caption as the card's title, a header row given as the first row (no <thead>) in the header style, class names
   and codes in small mono, soft status badges, and the row actions as round icon buttons. */
#region-main table:is(.admintable, .reportbuilder-table), #page-admin-tool-filetypes-index #region-main table.generaltable { font-size: 14px; }
#region-main table.admintable > thead > tr > th { white-space: nowrap; }
#region-main table.generaltable > caption {
    caption-side: top;
    color: var(--mindoe-text);
    font-size: 17px;
    font-weight: 700;
    padding: 18px 16px 10px;
}
#region-main table.generaltable:not(:has(> thead)) > tbody:first-child > tr:first-child:not(:has(> td)) > th {
    background: #fafaff;
    border-bottom: 1px solid rgba(var(--mindoe-text-rgb), .06);
    color: rgba(var(--mindoe-text-rgb), .6);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}
#region-main table.generaltable:not(:has(> thead)) > tbody:first-child > tr:first-child:not(:has(> td)) > th:first-child { border-top-left-radius: 20px; }
#region-main table.generaltable:not(:has(> thead)) > tbody:first-child > tr:first-child:not(:has(> td)) > th:last-child { border-top-right-radius: 20px; }
#region-main table.generaltable:has(> caption) > :is(thead, tbody:first-child) > tr:first-child > :is(th, td) { border-radius: 0 !important; }
#region-main table :is(.task-class, .task-component, code.text-ltr) {
    color: rgba(var(--mindoe-text-rgb), .55);
    display: block;
    font-family: var(--bs-font-monospace);
    font-size: 12px;
    font-weight: 400;
    margin-top: 2px;
}
/* Status badges (Disabled, Overdue, Running, Failed…): soft tinted pills instead of grey/solid Bootstrap fills. */
#region-main .badge:is(.bg-secondary, .bg-light) { background: #efeff5 !important; color: rgba(var(--mindoe-text-rgb), .75) !important; font-weight: 600; }
#region-main .badge.bg-success { background: #e3f4e7 !important; color: #1d7a3b !important; }
#region-main .badge.bg-danger { background: #fdeceb !important; color: #a12a20 !important; }
#region-main .badge.bg-warning { background: #fdf1e4 !important; color: #7a3e0c !important; }
#region-main .badge.bg-info { background: #e1f3f6 !important; color: #0f6f7c !important; }
#region-main .badge.bg-primary:not(.rounded-pill) { background: #e7e5fc !important; color: var(--bs-primary) !important; }
#region-main .badge { font-size: 11px; letter-spacing: .02em; padding: 4px 9px; }
/* Row actions (edit, delete, logs, run now, show/hide, move…): round icon buttons with a lavender hover. */
#region-main table :is(.action-icon, td > a:has(> .icon:only-child), td > .d-flex > a:has(> .icon:only-child)) {
    align-items: center;
    border-radius: 10px;
    color: var(--bs-primary);
    display: inline-flex;
    height: 32px;
    justify-content: center;
    margin: 0 2px !important;
    padding: 0 !important;
    transition: background-color .15s ease-out;
    width: 32px;
}
#region-main table :is(.action-icon, td > a:has(> .icon:only-child), td > .d-flex > a:has(> .icon:only-child)):hover { background: var(--mindoe-lavender); }
#region-main table :is(.action-icon, td > a:has(> .icon:only-child)) .icon { margin: 0; }
/* Moodle's old file-type pictures (black outlines) recoloured to the brand indigo (a filter, so no tile behind them:
   it would be tinted too). */
#region-main table img.icon[src*="/f/"] {
    filter: invert(25%) sepia(96%) saturate(3800%) hue-rotate(240deg) brightness(92%) contrast(97%);
    height: 24px;
    margin-right: 10px;
    opacity: .85;
    vertical-align: middle;
    width: 24px;
}

/* Checkboxes and radios without Bootstrap's class (multi-choice settings, tables, older plugins): the same rounded,
   brand-coloured box as the theme's own. */
#page-wrapper #region-main input[type="checkbox"]:not(.form-check-input):not([role="switch"]),
#page-wrapper #region-main input[type="radio"]:not(.form-check-input) {
    -webkit-appearance: none;
    appearance: none;
    background: #fff center / 14px no-repeat;
    border: 1.5px solid rgba(var(--mindoe-text-rgb), .3);
    border-radius: 6px;
    cursor: pointer;
    flex: none;
    height: 20px;
    margin: 0 8px 0 0;
    transition: background-color .15s ease-out, border-color .15s ease-out, box-shadow .15s ease-out;
    vertical-align: -5px;
    width: 20px;
}
#page-wrapper #region-main input[type="radio"]:not(.form-check-input) { border-radius: 50%; }
#page-wrapper #region-main :is(input[type="checkbox"]:not(.form-check-input):not([role="switch"]), input[type="radio"]:not(.form-check-input)):hover { border-color: rgba(var(--bs-primary-rgb), .6); }
#page-wrapper #region-main :is(input[type="checkbox"]:not(.form-check-input):not([role="switch"]), input[type="radio"]:not(.form-check-input)):focus-visible { box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .15); outline: 0; }
#page-wrapper #region-main input[type="checkbox"]:not(.form-check-input):not([role="switch"]):checked { background-color: var(--bs-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); border-color: var(--bs-primary); }
#page-wrapper #region-main input[type="radio"]:not(.form-check-input):checked { background: radial-gradient(circle, #fff 0 3.5px, var(--bs-primary) 4px); border-color: var(--bs-primary); }
#page-wrapper #region-main :is(input[type="checkbox"], input[type="radio"]):not(.form-check-input):disabled { cursor: default; opacity: .5; }
/* Multi-choice settings (Course contacts: Manager, Teacher, Student…): a wrap of selectable chips, checked ones in
   lavender with an indigo edge. */
.form-multicheckbox ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.form-multicheckbox li > label { cursor: pointer; margin: 0; }
.form-multicheckbox li {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .14);
    border-radius: 999px;
    display: inline-flex;
    font-size: 14px;
    margin: 0;
    padding: 6px 14px 6px 8px;
    transition: background-color .15s ease-out, border-color .15s ease-out;
}
.form-multicheckbox li:hover { border-color: rgba(var(--bs-primary-rgb), .4); }
.form-multicheckbox li:has(> input:checked) { background: #ebe9fd; border-color: rgba(var(--bs-primary-rgb), .45); color: #2c2896; font-weight: 600; }
#page-wrapper #region-main .form-multicheckbox input[type="checkbox"] { margin-right: 8px; vertical-align: 0; }
#adminsettings .form-setting > .form-multicheckbox + .form-defaultinfo { margin-top: 12px; }

/* Colour settings (Course card colours, brand colour): the picker as a rounded panel with the chosen colour as a
   swatch beside it, the hex field under it, and the default pill next to that field (Moodle: far off to the right). */
#adminsettings .form-setting:has(> .form-colourpicker) > .form-colourpicker { display: block; }
#adminsettings .form-setting:has(> .form-colourpicker) > .form-defaultinfo { margin-top: 10px; }
#adminsettings .form-colourpicker { width: max-content; }
#adminsettings .admin_colourpicker { display: grid; gap: 6px 8px; grid-template-columns: max-content 44px; grid-template-rows: 1fr 1fr; justify-content: start; margin-bottom: 10px; width: max-content; }
#adminsettings .admin_colourpicker::before, #adminsettings .admin_colourpicker::after { content: none; display: none; } /* Its clearfix would take grid cells. */
#adminsettings .admin_colourpicker .colourdialogue { border: 1px solid rgba(var(--mindoe-text-rgb), .12); border-radius: 14px; cursor: crosshair; float: none !important; grid-row: 1 / 3; }
#adminsettings .admin_colourpicker :is(.previewcolour, .currentcolour) { border: 1px solid rgba(var(--mindoe-text-rgb), .12); height: auto !important; margin: 0 !important; width: 44px !important; }
#adminsettings .admin_colourpicker .previewcolour { border-radius: 12px 12px 4px 4px; }
#adminsettings .admin_colourpicker .currentcolour { border-radius: 4px 4px 12px 12px; }
#adminsettings .form-colourpicker .form-control { font-family: var(--bs-font-monospace); font-size: 14px; width: 150px; }

/* File manager files (Logos, attachments): each file a small card - its preview on a lavender tile, the name under it. */
.filemanager .fp-file {
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .08);
    border-radius: 14px;
    padding: 8px;
    transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
.filemanager .fp-file:hover { border-color: rgba(var(--bs-primary-rgb), .3); box-shadow: 0 12px 24px -18px rgba(var(--mindoe-shadow-rgb), .6); }
.filemanager .fp-file .fp-thumbnail { background: #f6f5ff; border: 0 !important; border-radius: 10px; }
.filemanager .fp-file .fp-thumbnail img { border: 0 !important; box-shadow: none !important; }
/* Moodle pins the name under a fixed 128px square and unwraps it over the card on hover: the name sits inside the
   card instead, on up to two lines, the same on hover (no overlay breaking out of the outline). */
.filemanager .fp-iconview .fp-file { height: auto !important; width: 128px; }
.filemanager .fp-iconview .fp-file .fp-filename-field,
.filemanager .fp-iconview .fp-file:hover .fp-filename-field {
    font-size: 12px;
    font-weight: 600;
    height: auto !important;
    margin-top: 6px;
    overflow: visible;
    position: static !important;
    text-align: center;
    width: auto !important;
    z-index: auto;
}
.filemanager .fp-iconview .fp-file .fp-filename,
.filemanager .fp-iconview .fp-file:hover .fp-filename {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    background: transparent !important;
    display: -webkit-box !important;
    line-height: 1.35;
    overflow: hidden !important;
    padding: 0 !important;
    text-overflow: ellipsis;
    white-space: normal !important;
    word-break: break-word;
}
.filemanager .fp-file :is(.fp-filename-field a, .fp-filename) { color: var(--mindoe-text); text-decoration: none; }
.filemanager .fp-file > a, .filemanager .fp-file > a:hover, .filemanager .fp-file > a:focus { text-decoration: none !important; }
.filemanager .fp-file:hover .fp-filename { color: var(--bs-primary); }

/* Help icons anywhere in the page content (table headers, headings, settings): the brand colour, not Bootstrap's teal. */
#region-main .help-icon .icon.text-info { color: var(--bs-primary) !important; opacity: .8; }
#region-main .help-icon:hover .icon.text-info { opacity: 1; }
/* An empty last body cell (Moodle's spare "lastcol") made rows one cell longer than the header: no header gap. */
#region-main table.generaltable > tbody > tr > td.lastcol:empty { padding: 0; width: 0; }
/* ...and its header cell (a td in the header row) in the header band, to the card's edge. */
#region-main table.generaltable > thead > tr > td.header { background: #fafaff; border-bottom: 0; border-top-right-radius: 20px; }
#page-admin-tag-manage .tag-collections-table td.c0 { white-space: nowrap; }
/* Tag management: each collection's tag areas as small chips instead of a tall bulleted list; "Searchable" as a green
   tick; "Add tag collection" as a lavender pill. */
#page-admin-tag-manage .tag-collections-table td.c2 ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
#page-admin-tag-manage .tag-collections-table td.c2 li { background: #f6f5ff; border-radius: 999px; color: rgba(var(--mindoe-text-rgb), .8); font-size: 12px; font-weight: 500; padding: 4px 10px; }
#page-admin-tag-manage .tag-collections-table td.c3 .icon { color: #1d7a3b; }
#page-admin-tag-manage .addtagcoll { margin: -4px 0 24px; text-align: left !important; }
#page-admin-tag-manage .addtagcoll a {
    align-items: center;
    background: #e7e5fc;
    border-radius: 999px;
    color: var(--bs-primary);
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 6px;
    padding: 9px 18px;
    text-decoration: none;
}
#page-admin-tag-manage .addtagcoll a::before { content: "+"; font-size: 16px; line-height: 1; }
#page-admin-tag-manage .addtagcoll a:hover { background: #dcd9fb; }

/* Quick-edit pencils next to editable names and descriptions (tours, tags, grade items…): a small quiet pencil that
   comes forward on hover, not a black one after every value. */
#region-main .inplaceeditable .quickeditlink { color: inherit; text-decoration: none; }
#region-main .inplaceeditable .quickediticon { color: rgba(var(--mindoe-text-rgb), .35); margin-left: 2px; }
#region-main .inplaceeditable .quickediticon .icon { font-size: 12px; }
#region-main .inplaceeditable:hover .quickediticon,
#region-main .inplaceeditable .quickeditlink:focus-visible .quickediticon { color: var(--bs-primary); }
#region-main .inplaceeditable-toggle .quickeditlink { color: var(--bs-primary); }
/* User tours: the paths a tour applies to in small mono; the actions on one row (Moodle wraps six icons onto two);
   "Create a new tour / Import tour…" as a row of lavender pill buttons with their icons. */
#page-admin-tool-usertours-configure #region-main table td.c2 { color: rgba(var(--mindoe-text-rgb), .7); font-family: var(--bs-font-monospace); font-size: 12px; }
#page-admin-tool-usertours-configure #region-main table td.c4 { white-space: nowrap; }
#page-admin-tool-usertours-configure #region-main table td.c4 > span.action-icon:has(> .fa-spacer) { visibility: hidden; }
#page-admin-tool-usertours-configure #region-main [role="main"] > h2 + span { color: rgba(var(--mindoe-text-rgb), .7); display: block; font-size: 14px; margin-bottom: 4px; }
#region-main .tour-actions ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; }
#region-main .tour-actions li { background: none !important; border: 0 !important; margin: 0; padding: 0 !important; width: auto !important; }
#region-main .tour-actions li > a {
    align-items: center;
    background: #e7e5fc;
    border-radius: 999px;
    color: var(--bs-primary) !important;
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    padding: 9px 18px 9px 14px;
    text-decoration: none;
}
#region-main .tour-actions li > a:hover { background: #dcd9fb; }
#region-main .tour-actions li > a > div { display: inline; margin: 0 !important; white-space: nowrap; }
#region-main .tour-actions li > a { height: auto !important; width: auto !important; }
#region-main .tour-actions li > a .icon { align-items: center; display: inline-flex; font-size: 14px; height: 16px !important; justify-content: center; margin: 0 !important; width: 16px !important; }
#region-main .tour-actions li > a { line-height: 1.2; }

/* A table with no rows yet (OAuth 2 services before any is set up): Moodle prints one empty full-width cell, a blank
   strip under the header - it says "none yet" instead, quietly. */
#region-main table.generaltable > tbody > tr:only-child > td[colspan]:empty { color: rgba(var(--mindoe-text-rgb), .5); font-size: 14px; padding: 22px 16px; text-align: center; }
#region-main table.generaltable > tbody > tr:only-child > td[colspan]:empty::before { content: "—"; }
/* OAuth 2 services: "Create new service:" and its provider buttons on one centred row; the docs link as a pill. */
#page-admin-tool-oauth2-issuers [role="main"] > div:has(> .singlebutton) { align-items: center; display: flex; flex-wrap: wrap; font-size: 14px; font-weight: 600; gap: 8px; margin-top: 16px; }
#page-admin-tool-oauth2-issuers [role="main"] > div:has(> .singlebutton) .singlebutton { margin: 0; }
#page-admin-tool-oauth2-issuers [role="main"] > div:has(> .singlebutton) .btn { background: #fff; border: 1px solid rgba(var(--mindoe-text-rgb), .1); font-size: 14px; font-weight: 600; }
#page-admin-tool-oauth2-issuers [role="main"] > div:has(> .singlebutton) .btn:hover { background: var(--mindoe-lavender); border-color: rgba(var(--bs-primary-rgb), .3); }
#page-admin-tool-oauth2-issuers [role="main"] > a[href*="docs.moodle"] {
    align-items: center;
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 6px;
    margin-bottom: 14px;
    text-decoration: none;
}

/* Settings pages built from headings and tables (External services, Web services overview, Manage protocols): the
   section headings at card-title size without Moodle's rule under them, tables close under their heading, and a
   loose action link at the end (Add) as a pill. */
#adminsettings fieldset > h3.main { border: 0; font-size: 17px; line-height: 1.35; margin: 26px 0 12px; padding: 0; }
#adminsettings fieldset > .clearer + h3.main { margin-top: 6px; }
#adminsettings fieldset > h3.main + .formsettingheading { border-bottom: 0; padding-top: 0; }
#adminsettings fieldset > h3.main + .formsettingheading > p { color: rgba(var(--mindoe-text-rgb), .7); font-size: 14px; }
#adminsettings fieldset > .table-responsive { margin: 0 0 4px; }
#adminsettings fieldset > br:has(+ a) { display: none; }
#adminsettings fieldset > a:last-child {
    align-items: center;
    background: #e7e5fc;
    border-radius: 999px;
    color: var(--bs-primary);
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 6px;
    margin: 14px 0 20px;
    padding: 9px 18px;
    text-decoration: none;
}
#adminsettings fieldset > a:last-child::before { content: "+"; font-size: 16px; line-height: 1; }
#adminsettings fieldset > a:last-child:hover { background: #dcd9fb; }

/* Web services overview: the step names on one or two lines, the status (Yes, rest…) as a quiet bold value. */
#region-main table.wsoverview td.c0 { min-width: 230px; }
#region-main table.wsoverview td.c1 { font-weight: 600; white-space: nowrap; }

/* API documentation (one collapsible block per web service function): rows in the theme's card language - the
   function name in mono with a chevron, its description, arguments and response in tinted panels (Moodle: grey
   boxes and pink headings set inline). */
#page-admin-webservice-documentation #region-main .collapsibleregion {
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 14px;
    height: auto !important;
    margin-bottom: 6px;
    overflow: hidden;
}
#page-admin-webservice-documentation #region-main .collapsibleregioncaption > a {
    align-items: center;
    color: var(--mindoe-text);
    display: flex;
    gap: 10px;
    padding: 10px 16px;
    text-decoration: none;
}
#page-admin-webservice-documentation #region-main .collapsibleregioncaption > a:hover { background: #fbfaff; color: var(--bs-primary); }
#page-admin-webservice-documentation #region-main .collapsibleregioncaption strong { font-family: var(--bs-font-monospace); font-size: 13px; font-weight: 600; }
#page-admin-webservice-documentation #region-main .collapsibleregioncaption img.icon { display: none; }
#page-admin-webservice-documentation #region-main .collapsibleregioncaption > a::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234642eb' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / 14px no-repeat;
    content: "";
    height: 16px;
    margin-left: auto;
    transition: transform .2s ease-out;
    width: 16px;
}
#page-admin-webservice-documentation #region-main .collapsibleregion:not(.collapsed) .collapsibleregioncaption > a::after { transform: rotate(90deg); }
#page-admin-webservice-documentation #region-main .collapsibleregion.collapsed .collapsibleregioninner { display: none; }
#page-admin-webservice-documentation #region-main .collapsibleregioninner { font-size: 13px; padding: 0 16px 14px; }
/* Its colour-coded panels (description grey, structure yellow, XML-RPC green, REST red) as soft tinted cards, the
   section labels (Arguments, Response…) as small-caps indigo, code in quiet mono. */
#page-admin-webservice-documentation #region-main .collapsibleregioninner div[style*="background"] { border: 0 !important; border-radius: 12px; color: var(--mindoe-text) !important; margin: 6px 0; padding: 10px 14px !important; }
#page-admin-webservice-documentation #region-main .collapsibleregioninner div[style*="#E2E0E0"] { background: #f6f5ff !important; }
#page-admin-webservice-documentation #region-main .collapsibleregioninner div[style*="#FFF1BC"] { background: #fdf6ea !important; }
#page-admin-webservice-documentation #region-main .collapsibleregioninner div[style*="#DFEEE7"] { background: #edf7f1 !important; }
#page-admin-webservice-documentation #region-main .collapsibleregioninner div[style*="#FEEBE5"] { background: #fdf0ee !important; }
#page-admin-webservice-documentation #region-main .collapsibleregioninner div[style*="background"] pre { background: rgba(255, 255, 255, .7); border: 0; border-radius: 8px; font-size: 12px; margin: 6px 0 0; padding: 10px 12px; }
#page-admin-webservice-documentation #region-main .collapsibleregioninner div[style*="background"] pre b { font-family: var(--bs-font-sans-serif); font-size: 12px; }
#page-admin-webservice-documentation #region-main .collapsibleregioninner > span[style*="color"] { color: var(--bs-primary) !important; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
#page-admin-webservice-documentation #region-main .collapsibleregioninner pre span[style*="color"] { color: #6b6ad6 !important; font-style: normal; text-transform: none; }
#page-admin-webservice-documentation #region-main .collapsibleregioninner > br { display: none; }
#page-admin-webservice-documentation #region-main .collapsibleregioninner > span[style*="color"] { display: block; margin: 14px 0 4px; }
#page-admin-webservice-documentation #region-main .collapsibleregioninner div[style*="font-size:80%"] { font-size: 13px !important; line-height: 1.55; }

/* Developer debugging output (debug display on; never on the live site): compact amber notes instead of a page of
   loose text and bullets. */
#region-main .notifytiny.debuggingmessage {
    background: #fdf6ea;
    border: 1px solid #f6e3c4;
    border-radius: 12px;
    color: #6b4a14;
    font-size: 12px;
    margin-bottom: 8px;
    padding: 8px 12px;
}
#region-main .notifytiny.debuggingmessage ul { margin: 4px 0 0; padding-left: 18px; }
#region-main .notifytiny.debuggingmessage li { font-family: var(--bs-font-monospace); font-size: 11px; opacity: .8; }

/* ---- Error page (any Moodle error: a page that isn't available, no permission, a disabled sign-up) ------------- */
/* theme_mindoe/error_page, "lost in orbit": the Mindoe character on her blob under a soft glow and twinkling stars, a
   tilted ring with a small planet that circles her (behind her, then in front), the rocket drifting by; a heading,
   the message and the way back. "Page not found" makes her the 0 of a big gradient "404", the two 4s tumbling
   gently, and adds a course search. The developer debug details (debug level "developer" only) stay small below. */
.mindoe-errorpage {
    align-items: center;
    animation: mindoe-login-in .7s cubic-bezier(.16, 1, .3, 1) both;
    display: flex;
    flex-direction: column;
    margin: 48px auto 24px;
    max-width: 640px;
    position: relative;
    text-align: center;
}
.mindoe-errorpage-stage {
    align-items: center;
    display: flex;
    gap: clamp(0px, 1.5vw, 14px);
    justify-content: center;
    margin-bottom: 18px;
    position: relative;
}
/* The glow and the stars behind the stage. */
.mindoe-errorpage-stage::before,
.mindoe-errorpage-stage::after {
    content: "";
    inset: -40px -60px -10px;
    pointer-events: none;
    position: absolute;
    z-index: -1;
}
.mindoe-errorpage-stage::before {
    background: radial-gradient(closest-side, rgba(var(--bs-primary-rgb), .16), rgba(var(--bs-primary-rgb), .05) 55%, transparent);
}
.mindoe-errorpage-stage::after {
    animation: mindoe-errorpage-twinkle 4.5s ease-in-out infinite alternate;
    background:
        radial-gradient(circle, #f5b800 0 2px, transparent 2.5px) 12% 18% / 10px 10px no-repeat,
        radial-gradient(circle, rgba(var(--bs-primary-rgb), .55) 0 1.5px, transparent 2px) 86% 12% / 8px 8px no-repeat,
        radial-gradient(circle, rgba(var(--bs-primary-rgb), .4) 0 1.5px, transparent 2px) 4% 62% / 8px 8px no-repeat,
        radial-gradient(circle, #ee652a 0 1.5px, transparent 2px) 94% 70% / 8px 8px no-repeat,
        radial-gradient(circle, rgba(var(--bs-primary-rgb), .5) 0 2px, transparent 2.5px) 70% 4% / 10px 10px no-repeat,
        radial-gradient(circle, rgba(var(--bs-primary-rgb), .35) 0 1.5px, transparent 2px) 26% 92% / 8px 8px no-repeat;
}
@keyframes mindoe-errorpage-twinkle { from { opacity: .35; } to { opacity: 1; } }

.mindoe-errorpage-art { flex: none; height: 250px; isolation: isolate; position: relative; width: 250px; }
.mindoe-errorpage-blob { height: 100%; inset: 0; object-fit: contain; position: absolute; width: 100%; z-index: 1; }
.mindoe-errorpage-character {
    animation: mindoe-errorpage-bob 5s ease-in-out infinite;
    bottom: 2%;
    filter: drop-shadow(0 18px 18px rgba(var(--mindoe-shadow-rgb), .18));
    height: 104%;
    left: 50%;
    margin-left: -23.5%; /* Centred by margin: the bob animates translate. */
    position: absolute;
    z-index: 2;
}
@keyframes mindoe-errorpage-bob { 50% { translate: 0 -8px; } }
/* The tilted ring (an ellipse, -14deg) and its planet, in depth: the ring's far half lies under the blob and its near
   half over the character (two copies, each clipped to one half), and the orbit's z-index follows the planet the same
   way. x and y are two sine-eased keyframe tracks of one 9s turn. */
.mindoe-errorpage-ring {
    border: 1.5px dashed rgba(var(--bs-primary-rgb), .35);
    border-radius: 50%;
    clip-path: inset(-2px -2px 50% -2px);
    height: 30%;
    left: -12%;
    position: absolute;
    rotate: -14deg;
    top: 52%;
    width: 124%;
    z-index: 0;
}
.mindoe-errorpage-ring-front { clip-path: inset(50% -2px -2px -2px); z-index: 3; }
.mindoe-errorpage-orbit {
    animation: mindoe-errorpage-depth 9s linear infinite;
    height: 0;
    left: 50%;
    position: absolute;
    rotate: -14deg;
    top: calc(52% + 15%);
    width: 0;
    z-index: 3;
}
.mindoe-errorpage-orbit > span { animation: mindoe-errorpage-x 9s infinite; display: block; }
.mindoe-errorpage-planet {
    animation: mindoe-errorpage-y 9s infinite;
    background: radial-gradient(circle at 32% 30%, #fff 0 8%, #f5b800 30%, #ee652a 100%);
    border-radius: 50%;
    box-shadow: 0 6px 14px -4px rgba(238, 101, 42, .55);
    display: block;
    height: 18px;
    margin: -9px 0 0 -9px;
    width: 18px;
}
@keyframes mindoe-errorpage-x {
    0% { animation-timing-function: cubic-bezier(.37, 0, .63, 1); translate: 155px 0; }
    50% { animation-timing-function: cubic-bezier(.37, 0, .63, 1); translate: -155px 0; }
    100% { translate: 155px 0; }
}
@keyframes mindoe-errorpage-y {
    0% { animation-timing-function: cubic-bezier(.61, 1, .88, 1); scale: 1; translate: 0 0; }
    25% { animation-timing-function: cubic-bezier(.12, 0, .39, 0); scale: 1.18; translate: 0 37px; }
    50% { animation-timing-function: cubic-bezier(.61, 1, .88, 1); scale: 1; translate: 0 0; }
    75% { animation-timing-function: cubic-bezier(.12, 0, .39, 0); scale: .78; translate: 0 -37px; }
    100% { scale: 1; translate: 0 0; }
}
@keyframes mindoe-errorpage-depth { 0%, 49.9% { z-index: 3; } 50%, 99.9% { z-index: 0; } 100% { z-index: 3; } }
.mindoe-errorpage-rocket {
    animation: mindoe-float 6s ease-in-out infinite;
    position: absolute;
    right: -30%;
    top: -14%;
    width: 52%;
    z-index: 4;
}
/* "404": the two 4s in the brand gradient, leaning outwards and drifting out of step. */
.mindoe-errorpage-digit {
    animation: mindoe-errorpage-tumble 7s ease-in-out infinite;
    background: linear-gradient(165deg, #8b7cff 0%, var(--bs-primary) 45%, #2a1fb8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 22px 22px rgba(var(--bs-primary-rgb), .28));
    font-size: clamp(120px, 21vw, 210px);
    font-weight: 800;
    letter-spacing: -.06em;
    line-height: .9;
    rotate: -8deg;
    user-select: none;
}
.mindoe-errorpage-digit:last-child { animation-delay: -3.5s; rotate: 8deg; }
@keyframes mindoe-errorpage-tumble { 50% { translate: 0 -12px; } }
.mindoe-errorpage-notfound .mindoe-errorpage-rocket { right: -46%; top: -16%; }

.mindoe-errorpage-title {
    color: var(--mindoe-text);
    font-size: clamp(28px, 4vw, 38px) !important;
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.12;
    margin: 0 0 10px;
}
.mindoe-errorpage-message { color: rgba(var(--mindoe-text-rgb), .7); font-size: 16px; line-height: 1.6; margin: 0 0 26px; max-width: 520px; }
/* Course search: one white pill with the icon, the field and a small button inside. */
.mindoe-errorpage-search {
    align-items: center;
    background: #fff;
    border: 1.5px solid transparent;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(var(--mindoe-shadow-rgb), .06), 0 18px 40px -22px rgba(var(--mindoe-shadow-rgb), .45);
    display: flex;
    gap: 4px;
    margin-bottom: 22px;
    max-width: 100%;
    padding: 6px 6px 6px 20px;
    transition: border-color .2s, box-shadow .2s;
    width: 440px;
}
.mindoe-errorpage-search:focus-within { border-color: var(--bs-primary); box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .12), 0 18px 40px -22px rgba(var(--mindoe-shadow-rgb), .45); }
.mindoe-errorpage-searchicon { color: rgba(var(--mindoe-text-rgb), .45); flex: none; }
.mindoe-errorpage-search input {
    background: transparent;
    border: 0;
    color: var(--mindoe-text);
    flex: 1;
    font-size: 15px;
    min-width: 0;
    outline: 0;
    padding: 8px 6px;
}
.mindoe-errorpage-search input::placeholder { color: rgba(var(--mindoe-text-rgb), .45); }
.mindoe-errorpage-search .btn { border-radius: 999px; flex: none; font-size: 14px; font-weight: 600; padding: 9px 20px; }
.mindoe-errorpage-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.mindoe-errorpage-actions .btn { border-radius: 999px; font-size: 15px; font-weight: 600; min-height: 48px; padding: 12px 28px; }
.mindoe-errorpage-actions .btn-primary { box-shadow: 0 16px 30px -16px rgba(var(--bs-primary-rgb), .9); }
/* With the search there, "Back to home" steps down to the quiet style: one strong action per screen. */
.mindoe-errorpage-search ~ .mindoe-errorpage-actions .btn-primary {
    background: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(var(--mindoe-shadow-rgb), .06), 0 10px 24px -18px rgba(var(--mindoe-shadow-rgb), .5);
    color: var(--bs-primary);
}
.mindoe-errorpage-search ~ .mindoe-errorpage-actions .btn-primary:hover { background: var(--bs-primary); color: #fff; }
body:has(.mindoe-errorpage) #page-header { display: none; } /* The site name as a page title says nothing here. */
/* The glow, stars and rocket reach past the card: on a phone they must not widen the page (and the fixed header with it). */
body:has(.mindoe-errorpage) #region-main { overflow-x: clip; }
/* Moodle's 404 page: its own red box and "Continue" give way to the card; "Contact site support" stays as a quiet link
   under it, and the "send a message" form (for users who may send one) under that. */
#page-error #region-main [role="main"] > :is(.alert-danger, .continuebutton) { display: none; }
#page-error #region-main [role="main"] { text-align: center; }
#page-error #region-main a[href*="contactsitesupport"] { color: rgba(var(--mindoe-text-rgb), .6); font-size: 14px; font-weight: 600 !important; }
#page-error #region-main a[href*="contactsitesupport"]:hover { color: var(--bs-primary); }
#page-error #region-main [role="main"] > h4 { font-size: 17px; margin: 8px auto 12px; max-width: 520px; text-align: center; }
#page-error #region-main [role="main"] > form.mform { margin: 0 auto; max-width: 520px; text-align: start; }
.mindoe-errorpage ~ .alert { font-size: 12px; margin: 24px auto 0; max-width: 760px; text-align: start; }
@media (max-width: 575.98px) {
    .mindoe-errorpage-notfound .mindoe-errorpage-art { height: 170px; width: 170px; }
    .mindoe-errorpage-notfound .mindoe-errorpage-orbit { display: none; } /* Its fixed 155px radius wants the full size. */
    .mindoe-errorpage-notfound .mindoe-errorpage-ring { left: -6%; width: 112%; }
    .mindoe-errorpage-digit { font-size: 120px; }
}
@media (prefers-reduced-motion: reduce) {
    .mindoe-errorpage, .mindoe-errorpage *, .mindoe-errorpage-stage::after { animation: none !important; }
    .mindoe-errorpage-orbit { display: none; }
}

/* ---- Privacy policy (theme/mindoe/privacy-policy.php) ------------------------------------------------------------ */
/* A heading band in the brand gradient with the rocket, then the text in a white reading card - a calm 68ch column,
   numbered section headings - with the "On this page" list sticky beside it (folded above it on a phone). */
.mindoe-policy-page #page-header { display: none; }
.mindoe-policy { counter-reset: mindoe-policy; margin: 8px auto 48px; max-width: 1180px; }
.mindoe-policy-head {
    background:
        url("../pix/fp/hero-fly-1.svg") right 6% top 50% / min(34%, 300px) auto no-repeat,
        radial-gradient(circle at 85% 0%, rgba(255, 255, 255, .22), transparent 45%),
        linear-gradient(135deg, var(--bs-primary) 0%, #6a5cff 55%, #8f7dff 100%);
    border-radius: 32px;
    box-shadow: 0 30px 60px -36px rgba(var(--bs-primary-rgb), .9);
    color: #fff;
    margin-bottom: 28px;
    overflow: hidden;
    padding: 56px 56px 60px;
}
.mindoe-policy-eyebrow {
    backdrop-filter: blur(6px);
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    margin-bottom: 18px;
    padding: 6px 14px;
    text-transform: uppercase;
}
.mindoe-policy-head h1 { color: #fff; font-size: clamp(36px, 5.4vw, 60px); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; margin: 0; }
.mindoe-policy-body { align-items: start; display: grid; gap: 28px; grid-template-columns: 280px minmax(0, 1fr); }
.mindoe-policy-toc { position: sticky; top: calc(72px + 24px); }
.mindoe-policy-toc details {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 1px 2px rgba(var(--mindoe-shadow-rgb), .05), 0 20px 40px -32px rgba(var(--mindoe-shadow-rgb), .5);
    max-height: calc(100vh - 72px - 48px);
    overflow-y: auto;
    padding: 20px 12px 14px;
}
.mindoe-policy-toc summary {
    color: rgba(var(--mindoe-text-rgb), .55);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    list-style: none;
    padding: 0 12px 10px;
    text-transform: uppercase;
}
.mindoe-policy-toc summary::-webkit-details-marker { display: none; }
.mindoe-policy-toc ol { list-style: none; margin: 0; padding: 0; }
.mindoe-policy-toc a {
    border-radius: 12px;
    color: var(--mindoe-text);
    display: flex;
    font-size: 13.5px;
    gap: 10px;
    line-height: 1.35;
    padding: 7px 12px;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}
.mindoe-policy-toc a span { color: rgba(var(--bs-primary-rgb), .55); flex: none; font-feature-settings: "tnum"; font-size: 12px; font-weight: 700; padding-top: 1px; width: 18px; }
.mindoe-policy-toc a:hover { background: var(--mindoe-lavender); color: var(--bs-primary); }
.mindoe-policy-toc a:hover span { color: var(--bs-primary); }
.mindoe-policy-text {
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 1px 2px rgba(var(--mindoe-shadow-rgb), .05), 0 24px 48px -36px rgba(var(--mindoe-shadow-rgb), .5);
    color: rgba(var(--mindoe-text-rgb), .85);
    font-size: 16px;
    line-height: 1.8;
    padding: 56px clamp(24px, 6vw, 72px) 64px;
}
.mindoe-policy-text > * { max-width: 68ch; }
.mindoe-policy-text > p:first-child { color: var(--mindoe-text); font-size: 18px; line-height: 1.75; }
.mindoe-policy-text p { margin: 0 0 1.1em; }
.mindoe-policy-text h2 {
    align-items: baseline;
    border-top: 1px solid rgba(var(--mindoe-text-rgb), .08);
    counter-increment: mindoe-policy;
    display: flex;
    font-size: 22px;
    font-weight: 700;
    gap: 14px;
    letter-spacing: -.02em;
    line-height: 1.3;
    margin: 44px 0 16px;
    padding-top: 40px;
    scroll-margin-top: calc(72px + 24px);
}
.mindoe-policy-text h2::before {
    background: var(--mindoe-lavender);
    border-radius: 999px;
    color: var(--bs-primary);
    content: counter(mindoe-policy, decimal-leading-zero);
    flex: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 3px 10px;
    translate: 0 -3px;
}
.mindoe-policy-text h2:target { color: var(--bs-primary); }
.mindoe-policy-text h2:focus { outline: 0; } /* Moodle focuses the heading a link jumps to; the colour marks it. */
.mindoe-policy-text ul { display: grid; gap: 10px; list-style: none; margin: 4px 0 24px; padding: 0; }
.mindoe-policy-text li { padding-left: 28px; position: relative; }
.mindoe-policy-text li::before {
    background: var(--bs-primary);
    border: 4px solid var(--mindoe-lavender);
    border-radius: 50%;
    box-sizing: content-box;
    content: "";
    height: 6px;
    left: 2px;
    position: absolute;
    top: .45em;
    width: 6px;
}
.mindoe-policy-text a { font-weight: 600; text-decoration: underline; text-decoration-color: rgba(var(--bs-primary-rgb), .3); text-underline-offset: 3px; }
@media (max-width: 991.98px) {
    .mindoe-policy-head { background-size: 0 0, auto, auto; border-radius: 24px; padding: 36px 24px 40px; }
    .mindoe-policy-body { grid-template-columns: minmax(0, 1fr); }
    .mindoe-policy-toc { position: static; }
    .mindoe-policy-toc details { max-height: none; padding: 0; }
    .mindoe-policy-toc summary { align-items: center; cursor: pointer; display: flex; justify-content: space-between; padding: 18px 22px; }
    .mindoe-policy-toc summary::after { content: "+"; font-size: 20px; font-weight: 400; letter-spacing: 0; line-height: 1; }
    .mindoe-policy-toc details[open] summary::after { content: "\2212"; }
    .mindoe-policy-toc ol { padding: 0 10px 14px; }
    .mindoe-policy-text { border-radius: 24px; font-size: 15.5px; padding-top: 36px; }
    .mindoe-policy-text > p:first-child { font-size: 16.5px; }
    .mindoe-policy-text h2 { font-size: 19px; margin-top: 32px; padding-top: 28px; }
}
@media (min-width: 992px) { .mindoe-policy-toc summary { pointer-events: none; } }

/* ---- Toasts (core/toast: "… updated.", "Changes saved", AJAX confirmations) -------------------------------------- */
/* Moodle shows them as a stack of teal boxes over the header. Here: white cards that slide in at the top right under
   the header, a tinted round icon by type (info indigo, success green, warning amber, error red), the message in
   body text, and a soft lift. */
.toast-wrapper.fixed-top {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 10px;
    left: auto !important;
    margin: 0 !important;
    max-width: calc(100vw - 32px);
    right: 24px;
    top: calc(72px + 16px) !important;
    width: 380px !important;
}
.toast-wrapper .toast {
    animation: mindoe-toast-in .35s cubic-bezier(.16, 1, .3, 1) both;
    background: #fff !important;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06) !important;
    border-radius: 18px !important;
    flex: none; /* Moodle's wrapper is 0px high: in a column the toasts would shrink to nothing. */
    box-shadow: 0 24px 48px -24px rgba(var(--mindoe-shadow-rgb), .45), 0 2px 6px rgba(var(--mindoe-shadow-rgb), .06) !important;
    color: var(--mindoe-text) !important;
    margin: 0 !important;
    max-width: 100%;
    overflow: hidden;
    width: 100%;
}
@keyframes mindoe-toast-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
.toast-wrapper .toast-body { align-items: flex-start; gap: 12px; padding: 14px 16px !important; }
.toast-wrapper .toast-body::before {
    background: #ebe9fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234642eb' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E") center / 16px no-repeat !important;
    border-radius: 50%;
    content: "" !important;
    flex: none;
    height: 30px !important;
    margin: 0 !important;
    width: 30px !important;
}
.toast-wrapper .toast-success .toast-body::before { background: #e3f4e7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d7a3b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat !important; }
.toast-wrapper .toast-warning .toast-body::before { background: #fdf1e4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a3e0c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8v5M12 16.5v.5'/%3E%3C/svg%3E") center / 16px no-repeat !important; }
.toast-wrapper .toast-danger .toast-body::before { background: #fdeceb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a12a20' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 8l8 8M16 8l-8 8'/%3E%3C/svg%3E") center / 16px no-repeat !important; }
.toast-wrapper .toast-message { align-self: center; font-size: 14px; line-height: 1.45; padding: 0 !important; }
.toast-wrapper .toast .btn-close { align-self: center; font-size: 11px; margin: 0 0 0 auto; opacity: .45; }
.toast-wrapper .toast .btn-close:hover { opacity: .8; }
@media (prefers-reduced-motion: reduce) { .toast-wrapper .toast { animation: none; } }
@media (max-width: 575.98px) { .toast-wrapper.fixed-top { right: 16px; width: calc(100vw - 32px) !important; } }

/* ---- Alerts and notifications ------------------------------------------------------------------ */
.alert { border: 0; border-radius: 16px; font-size: 14px; padding: 14px 18px; }
.alert-dismissible { padding-right: 52px; }
.alert-dismissible .btn-close { padding: 18px; }
.alert-info { background: #ebe9fd; color: #2c2896; }
.alert-info a { color: inherit; font-weight: 600; }
.alert-warning { background: #fdf1e4; color: #7a3e0c; }
.alert-danger { background: #fdeceb; color: #8f241b; }
.alert-success { background: #e3f4e7; color: #1d6a35; }
.alert:is(.alert-warning, .alert-danger, .alert-success) a { color: inherit; font-weight: 600; }

/* Page notices (#user-notifications: "Your password has been set.", "Changes saved", "All caches were purged."…, the
   message Moodle carries over a redirect, and the ones its JavaScript adds there). Moodle: a flat tinted bar at the top
   of the content, which pushed the page down (on the front page the hero). Here: a compact white capsule, as wide as
   its message, that floats centred just under the header - in the gap above the dashboard and course hero, clear of
   the side columns - and drops in: a soft glow of its colour from the left, a round icon that pops (info a sparkle,
   success a check that draws itself, warning "!", error "x"), a round close button. Info and success tidy themselves
   away after 7 seconds, a thin line along the bottom counting down (paused while the pointer is on it); warnings and
   errors stay until closed. A longer message wraps into a rounded card. */
#user-notifications {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    left: 50%;
    /* Room for the soft shadow: Chrome paints this fixed area on a layer of its own and cut the shadow off at its edge
       (a square pale box behind the rounded card). The capsule itself sits 14px under the header. */
    padding: 24px 40px 64px;
    pointer-events: none; /* The empty space around the capsules lets clicks through to the page. */
    position: fixed;
    top: calc(72px + 14px - 24px);
    translate: -50% 0;
    width: calc(min(600px, 100vw - 32px) + 80px);
    z-index: 1040;
}
#user-notifications .alert {
    --mindoe-notice-tint: #ebe9fd;
    --mindoe-notice-ink: var(--bs-primary);
    align-items: center;
    animation: mindoe-notice-in .55s cubic-bezier(.16, 1, .3, 1) both;
    background: radial-gradient(120% 160% at 0% 50%, var(--mindoe-notice-tint), rgba(255, 255, 255, 0) 38%), #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 26px;
    box-shadow: 0 16px 32px -16px rgba(var(--mindoe-shadow-rgb), .32), 0 2px 8px rgba(var(--mindoe-shadow-rgb), .06);
    color: var(--mindoe-text);
    display: flex;
    font-size: 14.5px;
    font-weight: 500;
    gap: 12px;
    line-height: 1.4;
    margin: 0;
    max-width: 100%;
    min-height: 52px;
    overflow: hidden;
    padding: 8px 52px 8px 9px;
    pointer-events: auto;
    position: relative;
    width: fit-content;
}
#user-notifications .alert:is(.alert-info, .alert-success) {
    animation: mindoe-notice-in .55s cubic-bezier(.16, 1, .3, 1) both, mindoe-notice-out .45s 7s ease-in forwards;
}
#user-notifications .alert:is(.alert-info, .alert-success)::after {
    animation: mindoe-notice-timer 7s linear forwards;
    background: var(--mindoe-notice-ink);
    border-radius: 0 999px 999px 0;
    bottom: 0;
    content: "";
    height: 3px;
    left: 0;
    opacity: .5;
    position: absolute;
    transform-origin: left;
    width: 100%;
}
#user-notifications .alert:is(:hover, :focus-within),
#user-notifications .alert:is(:hover, :focus-within)::after { animation-play-state: paused; }
#user-notifications .alert::before {
    animation: mindoe-notice-pop .5s .1s cubic-bezier(.34, 1.56, .64, 1) both;
    background: var(--mindoe-notice-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234642eb'%3E%3Cpath d='M12 2.5c.5 4.6 2.9 7 7.5 7.5-4.6.5-7 2.9-7.5 7.5-.5-4.6-2.9-7-7.5-7.5 4.6-.5 7-2.9 7.5-7.5z'/%3E%3Cpath d='M19 15c.2 1.8 1.2 2.8 3 3-1.8.2-2.8 1.2-3 3-.2-1.8-1.2-2.8-3-3 1.8-.2 2.8-1.2 3-3z' opacity='.55'/%3E%3C/svg%3E") center / 20px no-repeat;
    background-size: 18px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .7);
    content: "";
    flex: none;
    height: 34px;
    width: 34px;
}
#user-notifications .alert-success { --mindoe-notice-ink: #2e9e55; --mindoe-notice-tint: #e3f4e7; }
#user-notifications .alert-success::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cstyle%3Epath%7Bstroke-dasharray:22;stroke-dashoffset:22;animation:d .45s .25s cubic-bezier(.65,0,.35,1) forwards%7D@keyframes d%7Bto%7Bstroke-dashoffset:0%7D%7D%3C/style%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%231d7a3b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
#user-notifications .alert-warning { --mindoe-notice-tint: #fdf1e4; }
#user-notifications .alert-warning::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b45a0c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8v5M12 16.5v.5'/%3E%3C/svg%3E"); }
#user-notifications .alert-danger { --mindoe-notice-tint: #fdeceb; }
#user-notifications .alert-danger::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a12a20' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 8l8 8M16 8l-8 8'/%3E%3C/svg%3E"); }
#user-notifications .alert a { color: var(--bs-primary); font-weight: 600; }
#user-notifications .alert .btn-close {
    background-size: 9px;
    border-radius: 50%;
    height: 30px;
    opacity: .5;
    padding: 0;
    position: absolute;
    right: 12px;
    top: 50%;
    transition: background-color .15s, opacity .15s;
    translate: 0 -50%;
    width: 30px;
}
#user-notifications .alert .btn-close:hover { background-color: var(--mindoe-lavender); opacity: .9; }
@keyframes mindoe-notice-in { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes mindoe-notice-pop { from { opacity: 0; transform: scale(.4) rotate(-20deg); } to { opacity: 1; transform: none; } }
@keyframes mindoe-notice-out { to { opacity: 0; transform: translateY(-10px) scale(.98); visibility: hidden; } }
@keyframes mindoe-notice-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
    #user-notifications .alert, #user-notifications .alert::before { animation: none; }
    #user-notifications .alert:is(.alert-info, .alert-success) { animation: mindoe-notice-out 0s 7s forwards; } /* Still goes, without the movement. */
}
@media (max-width: 575.98px) { #user-notifications { padding-left: 16px; padding-right: 16px; top: calc(73px + 12px - 24px); width: 100vw; } }

/* ---- Pagination (everywhere) -------------------------------------------------------------------- */
/* Moodle's paging bar (« 1 2 3 … 94 »): one white pill holding round page buttons, instead of a row of faint boxes
   with a grey "…". The dashboard blocks keep their own round lavender buttons (signed-in pages section). */
.pagination { gap: 2px; }
nav.pagination:not(section.block *) { margin-bottom: 16px; margin-top: 16px; }
nav.pagination > ul.pagination:not(section.block *) {
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(var(--mindoe-text-rgb), .06), 0 16px 32px -28px rgba(var(--mindoe-shadow-rgb), .5);
    flex-wrap: wrap;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    padding: 4px;
    width: fit-content;
}
.pagination .page-link {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 999px !important;
    color: var(--mindoe-text);
    display: inline-flex;
    font-size: 14px;
    font-weight: 500;
    height: 36px;
    justify-content: center;
    margin: 0;
    min-width: 36px;
    padding: 0 10px;
    transition: background-color .15s ease-out, color .15s ease-out;
}
.pagination .page-link:hover { background: var(--mindoe-lavender); color: var(--bs-primary); }
.pagination .page-link:focus { box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .2); }
.pagination .page-item.active .page-link {
    background: var(--bs-primary);
    box-shadow: 0 8px 18px -10px rgba(var(--bs-primary-rgb), .8);
    color: #fff;
    font-weight: 600;
}
.pagination .page-item.disabled .page-link { background: transparent; color: rgba(var(--mindoe-text-rgb), .4); }

/* ---- Front page: full-width sections ---------------------------------------------------------- */
/* On the site home the Boost content area loses its side padding so the Mindoe sections span the
   full width; the normal site-home content (course list etc.) keeps a centred, padded column. */
#page-site-index.pagelayout-frontpage #page.drawers { overflow-x: hidden; }
/* Boost 5.3 pads #page by 3rem on each side (more when a drawer is open); keep that only with an open drawer. */
#page-site-index.pagelayout-frontpage #page.drawers:not(.show-drawer-left):not(.show-drawer-right) { padding-left: 0; padding-right: 0; }
#page-site-index.pagelayout-frontpage #page.drawers .main-inner { margin: 0; max-width: none; padding: 0; }
#page-site-index.pagelayout-frontpage #page-header { display: none; }
#page-site-index.pagelayout-frontpage #region-main { background: #fff; border: 0; padding: 0; }
#page-site-index.pagelayout-frontpage [role="main"] > :not(.mindoe-fp) {
    margin-left: auto;
    margin-right: auto;
    max-width: 1140px;
    padding-left: 15px;
    padding-right: 15px;
}
#page-site-index.pagelayout-frontpage .mindoe-fp { background: #fff; width: 100%; }
/* Alpha was Bootstrap 4 (widest container 1140px); Bootstrap 5's 1320px pushes the hero text onto shape-1. */
#page-site-index.pagelayout-frontpage .mindoe-fp .container { max-width: 1140px; }
#page-site-index.pagelayout-frontpage .mindoe-fp .container.mindoe-faq { max-width: 760px; }
#page-site-index.pagelayout-frontpage .mindoe-fp-bottom .section { padding-bottom: 3rem; }
/* The Mindoe footer ends the front page: no Moodle bottom padding under it, and Moodle's own footer (the "?" button
   on desktop, an inline block of support/login/app/"Powered by" links on phones) is hidden here; the Mindoe footer
   has the support and privacy links. Other pages keep Moodle's footer. */
#page-site-index.pagelayout-frontpage #page-content { padding-bottom: 0 !important; }
/* Admins see Moodle's secondary navigation (Settings, Participants, Reports…) above the hero: a slim white toolbar
   under the header, its buttons in the same 1140px column as the header and the page. */
:is(#page-site-index.pagelayout-frontpage, body:has(.mindoe-catalogue)) .secondary-navigation {
    background: #fff;
    border-bottom: 1px solid rgba(var(--mindoe-text-rgb), .08);
    padding: 8px calc(max(0px, (100% - 1140px) / 2) + 12px);
}
:is(#page-site-index.pagelayout-frontpage, body:has(.mindoe-catalogue)) .secondary-navigation { padding-bottom: 4px; padding-top: 12px; }
/* Moodle's "skip to main content" anchor is a 1px block, which left a strip of page background between the toolbar
   (or header) and the hero. It is only a jump target: no height needed. */
:is(#page-site-index.pagelayout-frontpage, body:has(.mindoe-catalogue)) #maincontent { height: 0; }
:is(#page-site-index.pagelayout-frontpage, body:has(.mindoe-catalogue)) .secondary-navigation .secondarynav-tabbar { background: transparent; padding: 0; }
/* Height on the items only: Moodle moves items that do not fit into "More" by noticing that the list has grown
   past one row, so the list itself must stay free to grow. */
:is(#page-site-index.pagelayout-frontpage, body:has(.mindoe-catalogue)) .secondary-navigation .nav-item { height: 52px; }
:is(#page-site-index.pagelayout-frontpage, body:has(.mindoe-catalogue)) .secondary-navigation .mds-nav-pill { font-size: 14px; height: 34px; padding: 0 14px; }
/* Pull the first button left by its padding, so its label lines up with the logo and the hero text. */
:is(#page-site-index.pagelayout-frontpage, body:has(.mindoe-catalogue)) .secondary-navigation .nav-item:first-child > .mds-nav-pill { margin-left: -14px; }
#page-site-index.pagelayout-frontpage #page-footer { display: none; }

/* ---- Hero ------------------------------------------------------------------------------------- */
.mindoe-fp .hero { align-items: center; display: flex; min-height: 520px; overflow: hidden; position: relative; }
.mindoe-fp .hero .container { width: 100%; }
.mindoe-fp .hero .hero-content { position: relative; z-index: 3; }
.mindoe-fp .hero .hero-content h1 { color: var(--mindoe-text); font-size: 40px; font-weight: 800; margin: 0; }
.mindoe-fp .hero .hero-content p { color: var(--mindoe-text); font-size: 14px; margin: 10px 0; max-width: 520px; }
.mindoe-fp .hero .shape-1 { left: 0; position: absolute; top: 50%; }
.mindoe-fp .hero .hero-top-right { position: absolute; right: 0; top: 0; }
/* The rocket (.fly) lives in .girl (template), drawn behind her; on phones the girl is hidden and it sits top right. */
.mindoe-fp .hero .fly { max-width: 230px; position: absolute; right: 25px; top: 90px; }
.mindoe-fp .hero .hero-top-right .shape-2 { max-width: 320px; }
.mindoe-fp .hero .girl .character { display: none; }
.mindoe-fp .hero .girl .triangle { bottom: 0; display: block; position: absolute; }

.btn-signup {
    align-items: flex-start;
    background: #4928f7;
    border-radius: 47px;
    color: #fff;
    display: inline-flex;
    margin-top: 10px;
    padding: 14px 40px;
}
.btn-signup:hover,
.btn-signup:focus { background: #3110e6; color: #fff; text-decoration: none; }

/* ---- Sections --------------------------------------------------------------------------------- */
.mindoe-fp .section { padding-top: 3rem; }
.mindoe-fp .section .section-info { margin-bottom: 3rem; text-align: center; }
.mindoe-fp .section .section-info h2 { color: var(--mindoe-text); font-size: 24px; font-weight: 800; margin: 0 0 1.5rem; }
.mindoe-fp .section .section-info p { color: var(--mindoe-text); font-size: 14px; margin: 20px auto 0; max-width: 640px; }

/* ---- Category tiles --------------------------------------------------------------------------- */
.category-wrapper { margin: 0 auto; max-width: 720px; }
.category-wrapper .row { margin: 0; row-gap: 38px; }
.category-wrapper .col { padding: 0 8px; }
.category-wrapper .category {
    align-items: center;
    border-radius: 70px;
    color: var(--mindoe-text);
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 280px;
    min-height: 240px;
    overflow: hidden;
    padding: 30px 20px;
    position: relative;
    text-align: center;
    text-decoration: none;
    width: 100%;
}
.category-wrapper .category p { font-size: 20px; font-weight: 700; margin: 0; position: relative; z-index: 2; }
.category-wrapper .category img {
    height: 100%;
    left: 0;
    object-fit: cover;
    opacity: 1;
    position: absolute;
    top: 0;
    transform: scale(1);
    transition: .3s ease;
    width: 100%;
}
.category-wrapper .category img:not(.main) { opacity: 0; }
.category-wrapper .category:hover img.main { opacity: 0; }
.category-wrapper .category:hover img.hover { opacity: 1; transform: scale(1.05); }

/* ---- Coaches (available for the editable HTML) ------------------------------------------------ */
.coaches { align-items: center; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.coaches .coach { color: var(--mindoe-text); text-align: center; }
.coaches .coach img { max-width: 180px; }
.coaches .coach-info { font-size: 14px; margin-top: 20px; }
.coaches .coach .coach-name { color: var(--mindoe-text); font-size: 16px; font-weight: 600; text-decoration: none; }
.coaches .coach .coach-location { color: rgba(var(--mindoe-text-rgb), .6); font-size: 12px; }

/* ---- FAQ accordion (setting theme_mindoe/faq, under help & support) --------------------------- */
.mindoe-fp-bottom .section .section-info { margin-bottom: 0; }
.mindoe-faq { max-width: 760px; padding-bottom: 4rem; }
.mindoe-faq .accordion {
    --bs-accordion-bg: #fff;
    --bs-accordion-btn-bg: #fff;
    --bs-accordion-active-bg: #fff;
    --bs-accordion-active-color: var(--bs-primary);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}
.mindoe-faq .accordion-item {
    background-color: #fff;
    border: 1px solid #e6e5f3;
    border-radius: 20px;
    box-shadow: 0 8px 20px -14px rgba(var(--mindoe-shadow-rgb), .25);
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color .2s ease-out, box-shadow .2s ease-out;
}
.mindoe-faq .accordion-item:hover {
    border-color: rgba(var(--bs-primary-rgb), .3);
    box-shadow: 0 12px 26px -16px rgba(var(--mindoe-shadow-rgb), .35);
}
.mindoe-faq .accordion-button {
    background-color: #fff;
    color: var(--mindoe-text);
    font-size: 15px;
    font-weight: 500;
    padding: 1.1rem 1.5rem;
}
.mindoe-faq .accordion-button:hover,
.mindoe-faq .accordion-button:not(.collapsed) { color: var(--bs-primary); }
.mindoe-faq .accordion-button:not(.collapsed):not(:focus-visible) { box-shadow: none; }
.mindoe-faq .accordion-body { color: var(--mindoe-text); font-size: 14px; line-height: 1.7; padding: 0 1.5rem 1.35rem; }

/* ---- Footer ----------------------------------------------------------------------------------- */
/* The footer HTML is a setting (footerhtml); the layout here works with the markup already stored on the sites:
   logo | .links > div > a. All links sit in one row (centred on phones, right-aligned from md up). */
.m-footer { background: url('../pix/fp/footer-bg.png') top center; padding: 72px 15px 24px; }
.m-footer .m-footer-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 28px;
    justify-content: center;
    text-align: center;
}
.m-footer .m-footer-logo { display: inline-block; }
.m-footer .m-footer-logo img { height: 30px; width: auto; }
.m-footer .links,
.m-footer .links div {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    gap: 12px 28px;
    justify-content: center;
    margin: 0;
    padding: 0;
}
.m-footer .links div a {
    color: var(--mindoe-text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    text-underline-offset: 4px;
    transition: color .15s ease-out;
}
.m-footer .links div a:hover,
.m-footer .links div a:focus-visible { color: var(--bs-primary); text-decoration: underline; }
.m-footer .copyrights {
    border-top: 1px solid rgba(var(--mindoe-text-rgb), .12);
    color: rgba(var(--mindoe-text-rgb), .75);
    font-size: 13px;
    margin-top: 32px;
    padding: 20px 0 4px;
    text-align: center;
}
.m-footer .copyrights a { color: inherit; font-weight: 500; text-decoration: none; }

/* ---- Modals (all Moodle dialogs: cookies notice, confirmations, forms) ------------------------ */
/* White rounded panel with a deep soft shadow over an indigo-tinted backdrop, a title that wraps, a round close
   button, roomy body text and pill buttons; it rises in instead of Bootstrap's drop. */
.modal { --bs-modal-border-radius: 24px; --bs-modal-inner-border-radius: 24px; }
/* Moodle focuses the dialog itself when it opens (for screen readers): no ring around the whole box. */
.modal .modal-dialog:focus,
.modal .modal-dialog:focus-visible { outline: 0; }
.modal-backdrop.show { opacity: 1; }
.modal-backdrop { background-color: rgba(31, 29, 77, .45); }
.modal .modal-dialog { max-width: 540px; }
.modal .modal-dialog.modal-lg,
.modal .modal-dialog.modal-xl { max-width: min(860px, calc(100vw - 32px)); }
.modal.fade .modal-dialog { transform: translateY(18px) scale(.98); transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.modal.show .modal-dialog { transform: none; }
.modal .modal-content {
    background: #fff;
    border: 0;
    border-radius: 24px;
    box-shadow: 0 40px 90px -36px rgba(var(--mindoe-shadow-rgb), .65);
    overflow: hidden;
}
.modal .modal-content:focus,
.modal .modal-content:focus-visible,
.modal:focus { box-shadow: 0 40px 90px -36px rgba(var(--mindoe-shadow-rgb), .65); outline: 0; }
/* Moodle draws a 4px ring and resets the corners when it focuses the dialog on opening; keep the panel as it is,
   with a slim indigo ring only when Moodle marks keyboard focus (.focus). */
.modal .modal-dialog[tabindex="0"]:focus .modal-content {
    border-radius: 24px;
    box-shadow: 0 40px 90px -36px rgba(var(--mindoe-shadow-rgb), .65);
}
.modal .modal-dialog[tabindex="0"].focus .modal-content {
    border-radius: 24px;
    box-shadow: 0 0 0 2px var(--bs-primary), 0 40px 90px -36px rgba(var(--mindoe-shadow-rgb), .65);
}
.modal .modal-header { align-items: flex-start; border-bottom: 0; gap: 16px; padding: 24px 24px 8px 28px; }
.modal .modal-title {
    color: var(--mindoe-text);
    font-size: 20px !important;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}
.modal .btn-close {
    background-color: var(--mindoe-lavender);
    background-size: 12px;
    border-radius: 50%;
    flex: none;
    height: 36px;
    margin: -4px -4px 0 auto;
    opacity: 1;
    padding: 0;
    transition: background-color .15s ease-out;
    width: 36px;
}
.modal .btn-close:hover { background-color: rgba(var(--bs-primary-rgb), .14); }
.modal .btn-close:focus { box-shadow: none; }
.modal .btn-close:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.modal .modal-body { color: rgba(var(--mindoe-text-rgb), .85); font-size: 15px; line-height: 1.65; padding: 8px 28px 12px; }
.modal .modal-footer { border-top: 0; gap: 8px; padding: 12px 24px 24px; }
.modal .modal-footer > * { margin: 0; }
.modal .modal-footer .btn { font-weight: 600; height: 44px; min-width: 112px; padding: 0 22px; }
.modal .modal-footer .btn-primary { box-shadow: 0 12px 24px -14px rgba(var(--bs-primary-rgb), .9); }
.modal .modal-footer .btn-secondary { background: var(--mindoe-lavender); border-color: transparent; color: var(--bs-primary); }
.modal .modal-footer .btn-secondary:hover { background: rgba(var(--bs-primary-rgb), .14); }
.modal .modal-footer .btn:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog { transform: none; transition: none; }
}

/* ---- Login page and the other login-layout pages (sign-up, Crowd1 sign-up, forgotten password) --- */
/* Left (every login-layout page): a Mindoe collage instead of Moodle's stock promo ("Welcome to Moodle", Moodle's user stats) - the girl on
   her floor in front of the blob, the rocket, and two category tiles floating in as tilted cards. CSS only. */
body.pagelayout-login::before {
    background: linear-gradient(90deg, var(--bs-primary) 0%, #9f9ef6 55%, #feedba 100%);
    content: '';
    height: 3px;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 5;
}
body.pagelayout-login .login-layout-left {
    background:
        url('../pix/fp/hero-fly-1.svg') no-repeat 82% 16% / 30% auto,
        url('../pix/fp/character.png') no-repeat 50% 54% / auto 50%,
        url('../pix/fp/hero-triangle.svg') no-repeat 47% 82% / 46% auto,
        url('../pix/fp/blob.svg') no-repeat 52% 44% / 60% auto,
        radial-gradient(55% 45% at 15% 10%, rgba(212, 209, 251, .9), transparent 70%),
        radial-gradient(50% 42% at 90% 95%, rgba(246, 229, 215, .95), transparent 70%),
        #f6f5ff !important;
    overflow: hidden;
    position: relative;
}
body.pagelayout-login .login-layout-left > * { display: none !important; }
body.pagelayout-login .login-layout-left::before,
body.pagelayout-login .login-layout-left::after {
    animation: mindoe-float 8s ease-in-out infinite;
    aspect-ratio: 664 / 538;
    background: center / cover no-repeat;
    border-radius: 26px;
    box-shadow: 0 30px 54px -30px rgba(var(--mindoe-shadow-rgb), .6);
    content: '' !important;
    display: block !important;
    position: absolute;
}
body.pagelayout-login .login-layout-left::before { background-image: url('../pix/fp/digital.svg'); left: 7%; rotate: -8deg; top: 11%; width: 25%; }
body.pagelayout-login .login-layout-left::after {
    animation-delay: -4s;
    background-image: url('../pix/fp/business.svg');
    bottom: 9%;
    right: 7%;
    rotate: 7deg;
    width: 23%;
}

/* Right: the form - logo, big welcome, tall soft inputs with an indigo focus ring, a glowing pill button. */
@keyframes mindoe-login-in {
    from { opacity: 0; translate: 0 16px; }
    to { opacity: 1; translate: 0 0; }
}
body.pagelayout-login .login-layout-right { background: #fff; }
/* No Moodle footer ("?" button with support/login/"Powered by" links) next to the login form. */
body.pagelayout-login #page-footer { display: none; }
body.pagelayout-login .login-container { animation: mindoe-login-in .6s cubic-bezier(.16, 1, .3, 1) both; margin: 0 auto; max-width: 420px; }
#page-login-index #loginlogo { justify-content: flex-start !important; margin-bottom: 44px !important; }
#page-login-index #loginlogo img { height: 30px; width: auto; }
#page-login-index .mindoe-loginlogo-link { border-radius: 8px; display: inline-flex; transition: opacity .15s ease-out; }
#page-login-index .mindoe-loginlogo-link:hover { opacity: .75; }
#page-login-index .mindoe-loginlogo-link:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 6px; }
#page-login-index .loginform h1 { color: var(--mindoe-text); font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 10px; }
#page-login-index .loginform h1 + p { color: rgba(var(--mindoe-text-rgb), .65) !important; font-size: 16px; margin-bottom: 32px !important; }
#page-login-index .login-form .form-label { color: var(--mindoe-text); font-size: 14px; font-weight: 600; margin-bottom: 8px; }
#page-login-index .login-form .mb-3 { margin-bottom: 20px !important; }
#page-login-index .login-input-wrapper { position: relative; }
/* Above the field also when focused: in the password input group Bootstrap lifts the focused field to z-index 5. */
#page-login-index .login-input-icon { color: rgba(var(--mindoe-text-rgb), .4); transition: color .15s ease-out; z-index: 6; }
#page-login-index .login-input-wrapper:focus-within .login-input-icon { color: var(--bs-primary); }
#page-login-index .login-form .form-control {
    background: #f5f5fd;
    border: 1.5px solid transparent;
    border-radius: 16px !important;
    color: var(--mindoe-text);
    font-size: 15px;
    height: 54px;
    line-height: 21px;
    /* Explicit vertical padding (15 + 21 + 15 + border = 54): password managers centre their icon from it. */
    padding-bottom: 15px;
    padding-top: 15px;
    transition: background-color .15s ease-out, border-color .15s ease-out, box-shadow .15s ease-out;
}
#page-login-index .login-form .form-control::placeholder { color: rgba(var(--mindoe-text-rgb), .45); }
#page-login-index .login-form .form-control:hover { background: #f0f0fc; }
#page-login-index .login-form .form-control:focus {
    background: #fff;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .12);
}
/* Show/hide password (site setting loginpasswordtoggle; the Crowd1 sign-up's two password fields): a small round
   button inside the field, so the field keeps its rounded corners whether the button is there or not. */
#page-login-index .toggle-sensitive-wrapper { position: relative; }
#page-login-index .toggle-sensitive-wrapper .form-control { padding-right: 56px; }
/* "Small screens only": no eye from 576px, so no room for it; a password manager's icon then sits at the edge. */
@media (min-width: 576px) {
    #page-login-index .toggle-sensitive-wrapper.small-screens-only .form-control { padding-right: 12px; }
}
body.pagelayout-login .toggle-sensitive-btn {
    align-items: center;
    display: inline-flex;
    background: transparent;
    border: 0;
    border-radius: 12px !important;
    color: rgba(var(--mindoe-text-rgb), .55);
    height: 42px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 6px;
    top: 6px;
    width: 42px;
    z-index: 5;
}
body.pagelayout-login .toggle-sensitive-btn:hover { background: var(--mindoe-lavender); color: var(--bs-primary); }
body.pagelayout-login .toggle-sensitive-btn .icon { margin: 0; }
#page-login-index .login-form a[href*="forgot_password"] { font-size: 14px; font-weight: 600; text-decoration: none; }
#page-login-index .login-form a[href*="forgot_password"]:hover { text-decoration: underline; text-underline-offset: 4px; }
#page-login-index #loginbtn {
    border-radius: 999px;
    box-shadow: 0 16px 30px -16px rgba(var(--bs-primary-rgb), .9);
    font-size: 16px;
    font-weight: 600;
    height: 54px;
    margin-top: 6px;
    transition: background-color .15s ease-out, box-shadow .2s ease-out, translate .2s cubic-bezier(.16, 1, .3, 1);
}
#page-login-index #loginbtn:hover { box-shadow: 0 20px 34px -16px rgba(var(--bs-primary-rgb), 1); translate: 0 -1px; }
#page-login-index #loginbtn:active { translate: 0 0; }
#page-login-index #loginbtn:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 3px; }
#page-login-index .loginerrors .alert,
#page-login-index .loginform .alert { border: 0; border-radius: 16px; font-size: 14px; }
#page-login-index .login-cookiesnotice .btn-link { color: rgba(var(--mindoe-text-rgb), .55); font-size: 13px; }
/* Phones (Moodle hides the left panel below lg): a soft wash and the rocket in the corner instead. */
@media (max-width: 991.98px) {
    body.pagelayout-login .login-layout-right {
        background:
            url('../pix/fp/hero-fly-1.svg') no-repeat right -40px top 36px / 200px auto,
            radial-gradient(80% 32% at 85% 0%, rgba(212, 209, 251, .75), transparent 72%),
            #fff;
    }
    #page-login-index .loginform h1 { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
    body.pagelayout-login .login-container,
    body.pagelayout-login .login-layout-left::before,
    body.pagelayout-login .login-layout-left::after { animation: none; }
}

/* A long form scrolls past the first screen: the collage stays in view beside it instead of ending in white. */
body.pagelayout-login .login-layout-left { align-self: flex-start; height: 100vh; height: 100dvh; position: sticky !important; top: 0; }
/* Form pages in the login layout (sign-up, Crowd1 sign-up, forgotten password): the login page's look for a longer
   form - the logo, a big heading and a short line under it, labels above tall soft fields with the indigo focus ring,
   the password rules as a quiet hint, one full-width pill button, and a link back to log in. */
body.pagelayout-login:not(#page-login-index) .login-container { max-width: 460px; padding-bottom: 40px; padding-top: 40px; }
body.pagelayout-login .mindoe-signup-logo { display: inline-flex; margin-bottom: 36px; }
body.pagelayout-login .mindoe-signup-logo img { height: 30px; width: auto; }
body.pagelayout-login :is(.signupform h1.login-heading, .mindoe-signup h1) {
    color: var(--mindoe-text);
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    margin-bottom: 10px;
}
body.pagelayout-login .mindoe-signup-intro { color: rgba(var(--mindoe-text-rgb), .65); font-size: 15px; margin-bottom: 28px; }
body.pagelayout-login:not(#page-login-index) .mform .fitem { display: block; margin-bottom: 18px !important; padding: 0 !important; }
/* Form sections (forgotten password: "Search by username" / "Search by email address") are not cards here: plain
   left-aligned section titles over their fields, a hairline between sections. */
body.pagelayout-login:not(#page-login-index) #region-main .mform fieldset,
body.pagelayout-login:not(#page-login-index) .mform fieldset { background: none; border: 0; border-radius: 0; box-shadow: none; margin: 0 0 8px; padding: 0 !important; }
body.pagelayout-login:not(#page-login-index) .mform fieldset + fieldset { border-top: 1px solid rgba(var(--mindoe-text-rgb), .08); padding-top: 20px !important; }
body.pagelayout-login:not(#page-login-index) .mform fieldset > legend,
body.pagelayout-login:not(#page-login-index) .mform fieldset > .d-flex h3 { font-size: 17px; font-weight: 700; margin: 0 0 12px; text-align: left; width: 100%; }
body.pagelayout-login:not(#page-login-index) .mform fieldset > .fcontainer { padding: 0 !important; }
body.pagelayout-login:not(#page-login-index) .mform fieldset > .d-flex :is(.ftoggler, h3) { justify-content: flex-start !important; width: auto !important; }
body.pagelayout-login:not(#page-login-index) .mform .fitem.row { margin-left: 0 !important; margin-right: 0 !important; }
body.pagelayout-login:not(#page-login-index) .mform fieldset + hr, body.pagelayout-login:not(#page-login-index) .mform .fcontainer > hr { display: none; }
body.pagelayout-login:not(#page-login-index) [role="main"] > p:first-of-type, body.pagelayout-login:not(#page-login-index) .login-container > p { color: rgba(var(--mindoe-text-rgb), .7); font-size: 14px; line-height: 1.6; }
body.pagelayout-login:not(#page-login-index) .mform .fitem > [class*="col-md-"] { flex: none; max-width: none; padding: 0 !important; width: 100%; }
/* The submit row has no label: its (empty) label column out of the way, the button the width of the fields. */
body.pagelayout-login:not(#page-login-index) .mform .fitem.femptylabel > .col-form-label { display: none !important; }
body.pagelayout-login:not(#page-login-index) .mform .col-form-label { color: var(--mindoe-text); font-size: 14px; font-weight: 600; padding: 0 0 8px; }
body.pagelayout-login:not(#page-login-index) .mform :is(.form-control, .form-select) {
    background-color: #f5f5fd;
    background-clip: border-box; /* Bootstrap: padding-box, which left the transparent border a pale ring with a grey bottom edge. */
    border: 1.5px solid transparent;
    border-radius: 16px !important;
    font-size: 15px;
    height: 54px;
    max-width: none;
    padding-left: 18px;
    width: 100%;
}
body.pagelayout-login:not(#page-login-index) .mform :is(.form-control, .form-select):hover { background-color: #f0f0fc; }
body.pagelayout-login:not(#page-login-index) .mform :is(.form-control, .form-select):focus { background-color: #fff; border-color: var(--bs-primary); box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .12); }
body.pagelayout-login:not(#page-login-index) .mform .form-control[readonly] { background-color: #fafaff; border-color: rgba(var(--mindoe-text-rgb), .08); color: rgba(var(--mindoe-text-rgb), .75); }
/* The password policy, which Moodle shows as a block of body text above the field: a quiet hint card. */
body.pagelayout-login:not(#page-login-index) .mform .fitem[id*="passwordpolicyinfo"] .col-form-label { display: none !important; }
body.pagelayout-login:not(#page-login-index) .mform .fitem[id*="passwordpolicyinfo"] { margin-top: -8px; }
body.pagelayout-login:not(#page-login-index) .mform .fitem[id*="passwordpolicyinfo"] .felement {
    background: #f8f7ff;
    border-radius: 14px;
    color: rgba(var(--mindoe-text-rgb), .7);
    font-size: 13px;
    line-height: 1.5;
    padding: 10px 14px !important;
}
body.pagelayout-login:not(#page-login-index) .mform .toggle-sensitive-wrapper { position: relative; width: 100%; }
body.pagelayout-login:not(#page-login-index) .mform .toggle-sensitive-wrapper .form-control { padding-right: 56px; }
/* The same eye in the password fields of the standard-layout forms (Change password): the 42px fields of those forms. */
body:not(.pagelayout-login) #region-main .mform .toggle-sensitive-wrapper { flex-wrap: nowrap; position: relative; }
body:not(.pagelayout-login) #region-main .mform .toggle-sensitive-wrapper .form-control { border-radius: 12px !important; padding-right: 48px; }
body:not(.pagelayout-login) #region-main .mform .toggle-sensitive-btn {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 10px !important;
    color: rgba(var(--mindoe-text-rgb), .55);
    display: inline-flex;
    height: 34px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 4px;
    top: 4px;
    width: 34px;
    z-index: 5;
}
body:not(.pagelayout-login) #region-main .mform .toggle-sensitive-btn:hover { background: var(--mindoe-lavender); color: var(--bs-primary); }
body:not(.pagelayout-login) #region-main .mform .toggle-sensitive-btn .icon { margin: 0; }
body:not(.pagelayout-login) #region-main .mform .toggle-sensitive-wrapper .form-control.is-invalid { background-position: right 46px center; padding-right: 80px; }
/* Moodle's red "!" of a field with an error sits at the right end too: left of the eye instead. */
body.pagelayout-login:not(#page-login-index) .mform .toggle-sensitive-wrapper .form-control.is-invalid { background-position: right 58px center; padding-right: 92px; }
body.pagelayout-login:not(#page-login-index) .mform .toggle-sensitive-btn { top: 6px; }
/* The submit row: one full-width glowing pill (Cancel, where a form has one, as a quiet text button under it). */
body.pagelayout-login:not(#page-login-index) .mform div.fitem:has(> .felement [type="submit"]) { margin-top: 8px; }
body.pagelayout-login:not(#page-login-index) .mform div.fitem:has(> .felement [type="submit"]) > .felement > div,
body.pagelayout-login:not(#page-login-index) .mform div.fitem:has(> .felement [type="submit"]) > .felement .d-flex { flex-direction: column; gap: 6px; width: 100%; }
body.pagelayout-login:not(#page-login-index) .mform div.fitem:has(> .felement [type="submit"]) .fitem { margin: 0 !important; width: 100%; }
body.pagelayout-login:not(#page-login-index) .mform hr { border-color: rgba(var(--mindoe-text-rgb), .08); margin: 4px 0 20px; opacity: 1; }
body.pagelayout-login:not(#page-login-index) .mform .fitem:has([type="submit"]) .btn-primary {
    border-radius: 999px;
    box-shadow: 0 16px 30px -16px rgba(var(--bs-primary-rgb), .9);
    font-size: 16px;
    font-weight: 600;
    height: 54px;
    width: 100%;
}
body.pagelayout-login:not(#page-login-index) .mform .fitem:has([type="submit"]) .btn-secondary { background: transparent; box-shadow: none; width: 100%; }
body.pagelayout-login .mindoe-signup-login { color: rgba(var(--mindoe-text-rgb), .7); font-size: 14px; margin-top: 18px; text-align: center; }
body.pagelayout-login .mindoe-signup-login a { font-weight: 600; text-decoration: none; }
body.pagelayout-login .mindoe-signup-login a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---- Course catalogue (course/index.php: theme_mindoe/catalogue) ----------------------------- */
/* Category palette from the tile artwork: a tint for backgrounds and an ink for text and dots (≥4.5:1 on white).
   The key comes from the category's idnumber or English name (course_renderer::mindoe_category_key()). */
.mindoe-catalogue,
.mindoe-cat--all { --cat-tint: #e3e1fb; --cat-ink: var(--bs-primary); }
.mindoe-cat--digital { --cat-tint: #f5d9e7; --cat-ink: #b0336f; }
.mindoe-cat--communication { --cat-tint: #d4d1fb; --cat-ink: #4642eb; }
.mindoe-cat--motivation { --cat-tint: #cde8ee; --cat-ink: #0f6f7c; }
.mindoe-cat--business { --cat-tint: #f6e5d7; --cat-ink: #a8461a; }

/* Full width like the front page, only when the Mindoe catalogue is shown (not Moodle's fallback page). */
body:has(.mindoe-catalogue) #page.drawers { overflow-x: hidden; }
body:has(.mindoe-catalogue) #page.drawers:not(.show-drawer-left):not(.show-drawer-right) { padding-left: 0; padding-right: 0; }
body:has(.mindoe-catalogue) #page.drawers .main-inner { margin: 0; max-width: none; padding: 0; }
body:has(.mindoe-catalogue) #page-header { display: none; }
body:has(.mindoe-catalogue) #region-main { background: #fff; border: 0; padding: 0; }
body:has(.mindoe-catalogue) #page-content { padding-bottom: 0 !important; }
body:has(.mindoe-catalogue) #page-footer { display: none; }
/* Boost pads the main region 15px on each side (#page.drawers div[role="main"]). */
body #page.drawers div[role="main"]:has(> .mindoe-catalogue) { padding-left: 0; padding-right: 0; }
.mindoe-catalogue .container { max-width: 1140px; }

/* Hero: the category's tint as a soft wash, big title, course count, the category artwork floating on the right. */
.mindoe-cat-hero {
    background:
        radial-gradient(110% 130% at 85% 0%, color-mix(in srgb, var(--cat-tint) 95%, #fff) 0%,
            color-mix(in srgb, var(--cat-tint) 40%, #fff) 55%, #fff 100%);
    overflow: hidden;
    padding: 40px 0 72px;
}
.mindoe-cat-hero .container { align-items: center; display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
.mindoe-cat-back {
    align-items: center;
    color: var(--cat-ink);
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 6px;
    margin-bottom: 20px;
    text-decoration: none;
    transition: gap .2s cubic-bezier(.16, 1, .3, 1);
}
.mindoe-cat-back:hover { color: var(--cat-ink); gap: 10px; }
.mindoe-cat-hero h1 {
    color: var(--mindoe-text);
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.02;
    margin: 0;
    text-wrap: balance;
}
.mindoe-cat-desc { color: rgba(var(--mindoe-text-rgb), .8); font-size: 16px; line-height: 1.6; margin-top: 16px; max-width: 52ch; }
.mindoe-cat-desc p:last-child { margin-bottom: 0; }
.mindoe-cat-meta { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; }
/* All pills one height with their content centred (the search pill also holds a 24px clear button). */
.mindoe-cat-meta > span {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .08);
    border-radius: 999px;
    color: rgba(var(--mindoe-text-rgb), .8);
    display: inline-flex;
    font-size: 14px;
    gap: 5px;
    height: 40px;
    line-height: 1;
    padding: 0 16px;
}
.mindoe-cat-meta strong { color: var(--cat-ink); font-weight: 700; }
/* Search results: the search term as a pill with a clear (×) link. */
.mindoe-cat-meta .mindoe-cat-query { align-items: center; color: var(--mindoe-text); display: inline-flex; font-weight: 600; gap: 6px; padding-right: 8px; }
.mindoe-cat-query a {
    align-items: center;
    border-radius: 50%;
    color: rgba(var(--mindoe-text-rgb), .55);
    display: inline-flex;
    height: 24px;
    justify-content: center;
    transition: background-color .15s ease-out, color .15s ease-out;
    width: 24px;
}
.mindoe-cat-query a:hover { background: var(--mindoe-lavender); color: var(--bs-primary); }
.mindoe-cat-query a:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 1px; }
/* Moodle highlights the search words in the course names. */
.mindoe-card-title .highlight { background: color-mix(in srgb, var(--cat-tint) 70%, #fff); border-radius: 4px; color: inherit; padding: 0 2px; }
.mindoe-cat-heading.mindoe-cat-heading--tiles { margin: 8px auto 0; } /* A .container itself: keep it centred. */
.mindoe-cat-tiles + .m-footer { margin-top: 88px; } /* Tiles as the last section (search page, empty result). */
.mindoe-cat-hero-art { display: flex; justify-content: center; position: relative; }
.mindoe-cat-art {
    animation: mindoe-float 7s ease-in-out infinite;
    border-radius: 40px;
    box-shadow: 0 34px 60px -34px rgba(var(--mindoe-shadow-rgb), .5);
    width: min(100%, 420px);
}
.mindoe-cat-blob { width: min(100%, 360px); }
.mindoe-cat-fly { animation: mindoe-float 6s ease-in-out infinite; left: 50%; position: absolute; top: 14%; translate: -42% 0; width: min(88%, 340px); }

/* Bar: a white floating panel over the bottom of the hero - category chips and search. */
.mindoe-cat-bar {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .07);
    border-radius: 28px;
    box-shadow: 0 24px 48px -32px rgba(var(--mindoe-shadow-rgb), .45);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin-top: -36px;
    padding: 10px;
    position: relative;
    z-index: 2;
}
.mindoe-cat-chips { display: flex; gap: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.mindoe-cat-chips::-webkit-scrollbar { display: none; }
.mindoe-chip {
    align-items: center;
    border-radius: 999px;
    color: var(--mindoe-text);
    display: inline-flex;
    flex: none;
    font-size: 14px;
    font-weight: 500;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    text-decoration: none;
    transition: background-color .15s ease-out, color .15s ease-out;
}
.mindoe-chip-dot { background: var(--cat-ink); border-radius: 50%; height: 8px; width: 8px; }
.mindoe-chip:hover { background: color-mix(in srgb, var(--cat-tint) 45%, #fff); color: var(--cat-ink); }
.mindoe-chip.is-active { background: var(--cat-tint); color: var(--cat-ink); font-weight: 600; }
.mindoe-chip:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.mindoe-cat-search { flex: 1 1 240px; max-width: 320px; }
.mindoe-cat-search .simplesearchform,
.mindoe-cat-search form { margin: 0; }
.mindoe-cat-search .input-group { flex-wrap: nowrap; }
.mindoe-cat-search .form-control {
    background: var(--mindoe-lavender);
    border: 1px solid transparent;
    border-radius: 999px 0 0 999px !important;
    font-size: 14px;
    height: 42px;
    min-height: 42px;
    padding-left: 18px;
}
.mindoe-cat-search .form-control:focus { background: #fff; border-color: rgba(var(--bs-primary-rgb), .4); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .15); }
.mindoe-cat-search .btn {
    background: var(--mindoe-lavender);
    border: 0;
    border-radius: 0 999px 999px 0 !important;
    box-shadow: none; /* The field's other half, not a primary button with its glow. */
    color: var(--bs-primary);
    height: 42px;
    margin-left: 0 !important;
    padding: 0 16px 0 12px;
}
.mindoe-cat-search .btn:hover { background: var(--bs-primary); box-shadow: none; color: #fff; }
/* While the field has focus its white fill and ring run round the button too, as one pill. */
.mindoe-cat-search .input-group:focus-within .btn { background: #fff; box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), .4), 3px 0 0 3px rgba(var(--bs-primary-rgb), .15); }
.mindoe-cat-search .input-group:focus-within .form-control { border-right-color: transparent; clip-path: inset(-4px 0 -4px -4px); }
/* Category tools for managers (Moodle's action bar: category picker, course search, ⋮ menu): one compact row of
   pills under the chips bar, in its language, instead of oversized form fields. */
.mindoe-cat-admin { margin-top: 18px; }
.mindoe-cat-admin #action_bar { padding: 0 10px; }
.mindoe-cat-admin #action_bar > .d-flex { align-items: center; flex-wrap: wrap; gap: 10px; }
.mindoe-cat-admin #action_bar .navitem { margin: 0 !important; }
.mindoe-cat-admin #action_bar .navitem:last-child { margin-left: auto !important; }
.mindoe-cat-admin #action_bar .form-select {
    background-color: #fff;
    border-color: rgba(var(--mindoe-text-rgb), .1);
    border-radius: 999px;
    font-size: 14px;
    height: 40px;
    min-height: 40px;
    min-width: 200px;
    padding-left: 16px;
}
.mindoe-cat-admin #action_bar .simplesearchform .input-group { flex-wrap: nowrap; }
.mindoe-cat-admin #action_bar .simplesearchform .form-control {
    background: #fff;
    border-color: rgba(var(--mindoe-text-rgb), .1);
    border-radius: 999px 0 0 999px !important;
    border-right: 0;
    font-size: 14px;
    height: 40px;
    min-height: 40px;
    padding-left: 16px;
}
.mindoe-cat-admin #action_bar .simplesearchform .btn {
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .1);
    border-left: 0;
    border-radius: 0 999px 999px 0 !important;
    box-shadow: none;
    color: var(--bs-primary);
    height: 40px;
    padding: 0 14px 0 10px;
}
.mindoe-cat-admin #action_bar .simplesearchform .btn:hover { color: var(--bs-primary); filter: brightness(.97); }
.mindoe-cat-admin #action_bar .btn-icon,
.mindoe-cat-admin #action_bar .dropdown-toggle.btn {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .1);
    border-radius: 50%;
    display: inline-flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}
.mindoe-cat-admin #action_bar .btn-icon:hover,
.mindoe-cat-admin #action_bar .dropdown-toggle.btn:hover { background: var(--mindoe-lavender); color: var(--bs-primary); }

/* "All courses": the categories as art tiles (the artwork swaps to its hover version, as on the front page). */
.mindoe-cat-tiles { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; }
.mindoe-tile {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .07);
    border-radius: 28px;
    color: var(--mindoe-text);
    display: grid;
    gap: 4px 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 10px 10px 14px;
    text-decoration: none;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease-out;
}
.mindoe-tile:hover { box-shadow: 0 26px 48px -30px rgba(var(--mindoe-shadow-rgb), .5); color: var(--mindoe-text); transform: translateY(-4px); }
.mindoe-tile,
.mindoe-tile:hover,
.mindoe-tile:hover * { text-decoration: none; }
.mindoe-tile:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 3px; }
.mindoe-tile-art {
    aspect-ratio: 664 / 538;
    background: var(--cat-tint);
    border-radius: 20px;
    grid-column: 1 / -1;
    overflow: hidden;
    position: relative;
}
.mindoe-tile-art img { height: 100%; left: 0; object-fit: cover; position: absolute; top: 0; transition: opacity .3s ease-out, scale .6s cubic-bezier(.16, 1, .3, 1); width: 100%; }
.mindoe-tile-art .hover { opacity: 0; }
.mindoe-tile:hover .mindoe-tile-art .main { opacity: 0; }
.mindoe-tile:hover .mindoe-tile-art img { scale: 1.04; }
.mindoe-tile:hover .mindoe-tile-art .hover { opacity: 1; }
.mindoe-tile-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 6px 0 0 10px; }
.mindoe-tile-name { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.mindoe-tile-count { color: rgba(var(--mindoe-text-rgb), .6); font-size: 13px; }
.mindoe-tile-go,
.mindoe-card-go {
    align-items: center;
    background: var(--cat-tint);
    border-radius: 50%;
    color: var(--cat-ink);
    display: inline-flex;
    flex: none;
    height: 40px;
    justify-content: center;
    transition: background-color .2s ease-out, color .2s ease-out, translate .3s cubic-bezier(.16, 1, .3, 1);
    width: 40px;
}
.mindoe-tile-go { margin: 6px 4px 0 0; }
.mindoe-tile:hover .mindoe-tile-go,
.mindoe-card:hover .mindoe-card-go { background: var(--cat-ink); color: #fff; translate: 3px 0; }

/* Course cards (catalogue and search results). */
.mindoe-cat-courses { padding-bottom: 88px; padding-top: 48px; }
.mindoe-cat-heading { color: var(--mindoe-text); font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 24px; }
.mindoe-card-grid,
.course_category_tree .courses,
#frontpage-available-course-list .courses,
#frontpage-course-list .courses,
#page-course-search .courses {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.course_category_tree .courses > .paging,
.course_category_tree .courses > .paging-morelink,
#frontpage-available-course-list .courses > .paging,
#frontpage-available-course-list .courses > .paging-morelink,
#frontpage-course-list .courses > .paging,
#frontpage-course-list .courses > .paging-morelink,
#page-course-search .courses > .paging { grid-column: 1 / -1; }
.mindoe-card.coursebox {
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .07);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease-out;
}
.mindoe-card.coursebox:hover { box-shadow: 0 26px 48px -30px rgba(var(--mindoe-shadow-rgb), .5); transform: translateY(-4px); }
.mindoe-card.coursebox:has(.stretched-link:focus-visible) { outline: 2px solid var(--bs-primary); outline-offset: 3px; }
.mindoe-card-media { aspect-ratio: 16 / 10; background: var(--cat-tint, var(--mindoe-lavender)); overflow: hidden; position: relative; }
.mindoe-card-img {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    height: 100%;
    transition: scale .6s cubic-bezier(.16, 1, .3, 1);
    width: 100%;
}
.mindoe-card:hover .mindoe-card-img { scale: 1.05; }
.mindoe-card-badge {
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 6px 14px -8px rgba(var(--mindoe-shadow-rgb), .5);
    color: var(--cat-ink);
    font-size: 12px;
    font-weight: 600;
    left: 12px;
    padding: 5px 12px;
    position: absolute;
    top: 12px;
}
.mindoe-card-body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.mindoe-card-title {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    font-size: 17px;
    font-weight: 600;
    -webkit-line-clamp: 2;
    line-height: 1.35;
    margin: 0;
    overflow: hidden;
}
.mindoe-card-title a { color: var(--mindoe-text); text-decoration: none; }
.mindoe-card-title a:focus { box-shadow: none; outline: 0; }
.mindoe-card-title a.dimmed { opacity: .6; }
.mindoe-card-summary {
    -webkit-box-orient: vertical;
    color: rgba(var(--mindoe-text-rgb), .7);
    display: -webkit-box;
    font-size: 14px;
    -webkit-line-clamp: 2;
    line-height: 1.55;
    margin: 0;
    overflow: hidden;
}
.mindoe-card-go { align-self: flex-end; height: 36px; margin-top: auto; width: 36px; }

.mindoe-cat-empty { color: rgba(var(--mindoe-text-rgb), .7); padding: 24px 0 8px; text-align: center; }
.mindoe-cat-empty img { margin-bottom: 8px; width: 200px; }
.mindoe-cat-empty p { font-size: 16px; margin-bottom: 20px; }

@media (min-width: 768px) {
    .mindoe-cat-hero { padding: 56px 0 96px; }
    .mindoe-cat-hero .container { gap: 48px; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}
@media (min-width: 992px) {
    .mindoe-cat-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .mindoe-cat-hero { padding-top: 28px; }
    .mindoe-cat-hero .container { gap: 20px; }
    .mindoe-cat-hero-art { order: -1; }
    .mindoe-cat-art { border-radius: 24px; width: min(62%, 240px); }
    .mindoe-cat-blob { width: min(52%, 200px); }
    .mindoe-cat-fly { width: min(66%, 250px); }
    .mindoe-cat-meta { margin-top: 20px; }
    .mindoe-cat-bar { align-items: stretch; border-radius: 24px; flex-direction: column; margin-left: 12px; margin-right: 12px; width: auto; }
    .mindoe-cat-search { flex: none; max-width: none; } /* In the column layout the 240px basis would become height. */
}
@media (max-width: 575.98px) {
    .mindoe-cat-tiles { gap: 14px; }
    .mindoe-tile-name { font-size: 16px; }
    .mindoe-tile-go { height: 34px; width: 34px; }
}
@media (prefers-reduced-motion: reduce) {
    .mindoe-cat-art,
    .mindoe-cat-fly { animation: none; }
}

/* ---- Signed-in pages: dashboard, My courses, Site administration ----------------------------- */
/* Hero card (theme_mindoe/page_hero, core_renderer::full_header()): Boost's header in a white card washed with
   lavender from the top right, the greeting, course counts, a continue button and the Mindoe artwork. */
.mindoe-hero {
    background:
        radial-gradient(90% 150% at 100% 0%, #e3e1fb 0%, rgba(227, 225, 251, .5) 40%, rgba(255, 255, 255, 0) 72%),
        radial-gradient(60% 90% at 0% 100%, rgba(255, 228, 210, .55) 0%, rgba(255, 255, 255, 0) 70%),
        #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 32px;
    box-shadow: 0 30px 60px -46px rgba(var(--mindoe-shadow-rgb), .5);
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr);
    margin: 8px 15px 28px; /* Lined up with the blocks: Boost pads div[role="main"] by 15px. */
    overflow: hidden;
    padding: 36px 40px 40px;
    position: relative;
}
.mindoe-hero-text { align-self: center; min-width: 0; }
.mindoe-hero #page-header { margin: 0; max-width: none; padding: 0; }
.mindoe-hero #page-header .page-context-header { margin-bottom: 0 !important; }
.mindoe-hero #page-header h1 {
    color: var(--mindoe-text);
    font-size: clamp(34px, 4.2vw, 52px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.05;
}
.mindoe-hero-greeting { color: var(--bs-primary); font-size: 16px; font-weight: 600; margin: 0 0 10px; }
/* Edit mode: header buttons such as "Reset page to default" as quiet white pills instead of grey Bootstrap buttons. */
.mindoe-hero #page-header .btn-secondary {
    background: rgba(255, 255, 255, .85);
    border: 1px solid rgba(var(--mindoe-text-rgb), .12);
    color: var(--mindoe-text);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
}
.mindoe-hero #page-header .btn-secondary:hover { background: var(--mindoe-lavender); border-color: rgba(var(--bs-primary-rgb), .25); color: var(--bs-primary); }
/* Boost puts those buttons in the header's top row, which landed between the greeting and the title: they sit in the
   hero card's top-right corner instead (empty above the artwork), as page tools. Only the buttons: on another user's
   profile that row also holds the breadcrumbs (Users › name › View profile), which stay above the name. */
.mindoe-hero:is(.mindoe-hero--dashboard, .mindoe-hero--mycourses, .mindoe-hero--profile) #page-header > .w-100 > .d-flex.flex-wrap:first-child > .ms-auto {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 3;
}
.mindoe-hero:is(.mindoe-hero--dashboard, .mindoe-hero--mycourses, .mindoe-hero--profile) #page-header .btn-secondary {
    box-shadow: 0 8px 20px -14px rgba(var(--mindoe-shadow-rgb), .5);
}
/* With breadcrumbs beside it, the button sits on their line. */
.mindoe-hero:is(.mindoe-hero--dashboard, .mindoe-hero--mycourses, .mindoe-hero--profile) #page-header > .w-100 > .d-flex.flex-wrap:first-child:has(#page-navbar .breadcrumb) > .ms-auto { top: 31px; }
/* Phones (no artwork): room above the greeting for that corner button, so long names never run into it. */
@media (max-width: 767.98px) {
    .mindoe-hero:is(.mindoe-hero--dashboard, .mindoe-hero--mycourses, .mindoe-hero--profile):has(#page-header .singlebutton) { padding-top: 72px; }
}
@media (min-width: 768px) {
    /* In edit mode the character steps down a little, clear of that button. */
    body.editing .mindoe-hero--dashboard .mindoe-hero-img { top: 72px; }
}
.mindoe-hero-stats { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }
.mindoe-hero-stats > span {
    align-items: center;
    background: rgba(255, 255, 255, .85);
    border: 1px solid rgba(var(--mindoe-text-rgb), .08);
    border-radius: 999px;
    color: rgba(var(--mindoe-text-rgb), .8);
    display: inline-flex;
    font-size: 14px;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
}
.mindoe-hero-stats strong { color: var(--bs-primary); font-weight: 700; }
/* Continue where you left off: the indigo pill of the front page, with the course name in it. */
.mindoe-hero-continue {
    align-items: center;
    background: var(--bs-primary);
    border-radius: 999px;
    box-shadow: 0 16px 30px -16px rgba(var(--bs-primary-rgb), .7);
    color: #fff;
    display: inline-flex;
    gap: 10px;
    margin-top: 16px;
    max-width: 100%;
    padding: 8px 8px 8px 22px;
    text-decoration: none;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease-out;
}
.mindoe-hero-continue:hover { box-shadow: 0 20px 34px -16px rgba(var(--bs-primary-rgb), .8); color: #fff; transform: translateY(-2px); }
.mindoe-hero-continue:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 3px; }
.mindoe-hero-continue-label { flex: none; font-size: 15px; font-weight: 700; }
.mindoe-hero-continue-name {
    border-left: 1px solid rgba(255, 255, 255, .35);
    font-size: 14px;
    min-width: 0;
    opacity: .9;
    overflow: hidden;
    padding-left: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mindoe-hero-continue-go {
    align-items: center;
    background: rgba(255, 255, 255, .2);
    border-radius: 50%;
    display: inline-flex;
    flex: none;
    height: 36px;
    justify-content: center;
    transition: translate .3s cubic-bezier(.16, 1, .3, 1);
    width: 36px;
}
.mindoe-hero-continue:hover .mindoe-hero-continue-go { translate: 3px 0; }
.mindoe-hero-art { display: none; }
/* Site administration: a compact card, title on the left and the admin search on the right. */
.mindoe-hero--admin { padding: 28px 32px; }
.mindoe-hero--admin #page-header .d-flex.align-items-center { flex-wrap: wrap; gap: 16px; }
.mindoe-hero--admin #page-header .header-actions-container { margin-left: auto; }
/* Course page: the wash in the course's category colours, the category as a chip, the course image as a tile (the
   catalogue card art) and the learner's progress. */
.mindoe-hero--course {
    background:
        radial-gradient(90% 150% at 100% 0%, color-mix(in srgb, var(--cat-tint, #e3e1fb) 85%, #fff) 0%,
            color-mix(in srgb, var(--cat-tint, #e3e1fb) 35%, #fff) 45%, rgba(255, 255, 255, 0) 75%),
        #fff;
}
.mindoe-hero--course .mindoe-hero-greeting {
    background: color-mix(in srgb, var(--cat-tint, #e3e1fb) 70%, #fff);
    border-radius: 999px;
    color: var(--cat-ink, var(--bs-primary));
    display: inline-flex;
    font-size: 13px;
    margin-bottom: 14px;
    padding: 5px 14px;
}
.mindoe-hero-progress { align-items: center; display: flex; gap: 14px; margin-top: 22px; max-width: 440px; }
.mindoe-hero-progress-bar {
    background: linear-gradient(90deg, var(--bs-primary), #8b88f5) 0 0 / var(--mindoe-progress) 100% no-repeat, #e7e5fc;
    border-radius: 999px;
    flex: 1;
    height: 8px;
}
.mindoe-hero-progress-label { color: rgba(var(--mindoe-text-rgb), .75); font-size: 14px; font-weight: 600; white-space: nowrap; }
/* Course names are long and the column narrows between two drawers: a smaller title that wraps between words. */
.mindoe-hero--course #page-header h1 { font-size: clamp(28px, 2.6vw, 40px); hyphens: manual; line-height: 1.12; overflow-wrap: normal; text-wrap: balance; }
@media (min-width: 768px) {
    .mindoe-hero--course { grid-template-columns: minmax(0, 1fr) minmax(160px, 240px); }
    .mindoe-hero--course .mindoe-hero-art { align-items: center; display: flex; justify-content: center; margin: 0; }
    .mindoe-hero-img--tile {
        animation: mindoe-float 7s ease-in-out infinite;
        aspect-ratio: 16 / 10;
        background: var(--cat-tint, var(--mindoe-lavender));
        border-radius: 24px;
        box-shadow: 0 30px 50px -30px rgba(var(--mindoe-shadow-rgb), .55);
        object-fit: cover;
        rotate: 2deg;
        width: 100%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .mindoe-hero-img--tile { animation: none; }
}
/* Profile: the avatar as a gradient disc with a white ring. */
.mindoe-hero--profile #page-header .page-context-header { flex-wrap: nowrap; gap: 22px; margin-bottom: 0 !important; overflow: visible; }
.mindoe-hero--profile #page-header .page-header-image { padding: 6px; }
/* Header buttons in a hero ("Reset page to default"): one line, not a four-line circle. */
.mindoe-hero #page-header .header-actions-container .btn,
.mindoe-hero #page-header .singlebutton .btn { white-space: nowrap; }
.mindoe-hero--profile #page-header .page-header-image { background: transparent !important; margin: 0 !important; }
.mindoe-hero--profile { padding-bottom: 32px; }
.mindoe-hero--profile #page-header .page-header-image .userinitials,
.mindoe-hero--profile #page-header .page-header-image .userpicture {
    border-radius: 50%;
    /* Rings only: a blurred shadow here made the browser repaint the hero's gradient behind it as a visible square. */
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(var(--bs-primary-rgb), .2);
    height: 96px;
    width: 96px;
}
.mindoe-hero--profile #page-header .page-header-image .userinitials {
    align-items: center;
    background: linear-gradient(135deg, var(--bs-primary), #8b88f5);
    color: #fff;
    display: inline-flex;
    font-size: 32px;
    font-weight: 700;
    justify-content: center;
}

/* Blocks on the dashboard and My courses: white cards in the hero's language. */
:is(.pagelayout-mydashboard, .pagelayout-mycourses) section.block.card {
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 28px;
    box-shadow: 0 24px 48px -42px rgba(var(--mindoe-shadow-rgb), .45);
    margin-bottom: 24px !important;
}
:is(.pagelayout-mydashboard, .pagelayout-mycourses) #region-main section.block.card > .card-body { padding: 28px !important; }
:is(.pagelayout-mydashboard, .pagelayout-mycourses) section.block .card-title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
:is(.pagelayout-mydashboard, .pagelayout-mycourses) section.block hr { border-color: rgba(var(--mindoe-text-rgb), .08); opacity: 1; }
/* Course overview controls: grouping, search and sort in one lavender tray. The buttons stay quiet until hovered or
   open (then a white pill in the brand colour), each with a small icon; the search is a white field with a magnifier.
   The "Show 12/All" button below the cards is the same pill on its own. */
.block_myoverview [data-region="filter"] > .d-flex {
    background: var(--mindoe-lavender);
    border-radius: 26px;
    gap: 4px !important;
    padding: 6px;
}
.block_myoverview [data-region="filter"] > .d-flex > * { margin: 0 !important; }
/* The search only has flex-grow, so its starting width is the text input's natural width - wider in Firefox than in
   Chrome, which pushed "Sort" onto a second row. A fixed starting width keeps one row wherever it fits (still wrapping
   on phones). */
.block_myoverview [data-region="filter"] > .d-flex > .flex-grow-1 { flex: 1 1 180px; min-width: 180px; }
.block_myoverview [data-region="filter"] .searchbar .form-control { min-width: 0; width: 100%; }
/* Phones: search across the top, the grouping and sort buttons below it as two equal halves (long labels end in "…"),
   instead of whatever wraps where. */
@media (max-width: 767.98px) {
    .block_myoverview [data-region="filter"] > .d-flex { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .block_myoverview [data-region="filter"] > .d-flex > .flex-grow-1 { grid-column: 1 / -1; min-width: 0; order: -1; }
    .block_myoverview [data-region="filter"] > .d-flex > :not(.flex-grow-1),
    .block_myoverview [data-region="filter"] > .d-flex > :not(.flex-grow-1) .dropdown { display: block !important; min-width: 0; }
    .block_myoverview [data-region="filter"] .btn-outline-secondary.dropdown-toggle { width: 100%; }
    .block_myoverview [data-region="filter"] .btn-outline-secondary.dropdown-toggle > span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .block_myoverview [data-region="filter"] .btn-outline-secondary.dropdown-toggle::after { margin-left: auto; }
}
.block_myoverview .btn-outline-secondary.dropdown-toggle {
    align-items: center;
    background: var(--mindoe-lavender);
    border: 1px solid transparent;
    border-radius: 999px !important;
    color: var(--mindoe-text);
    display: inline-flex;
    font-size: 14px;
    font-weight: 500;
    gap: 8px;
    height: 40px;
    padding: 0 14px 0 16px;
    transition: background-color .15s ease-out, color .15s ease-out, box-shadow .15s ease-out;
}
/* In the tray the buttons are white pills, like the search field next to them. */
.block_myoverview [data-region="filter"] .btn-outline-secondary.dropdown-toggle { background: #fff; }
.block_myoverview .btn-outline-secondary.dropdown-toggle:hover { background: #e3e1fb; color: var(--bs-primary); }
.block_myoverview [data-region="filter"] .btn-outline-secondary.dropdown-toggle:hover { background: #fff; color: var(--bs-primary); }
.block_myoverview .btn-outline-secondary.dropdown-toggle:focus:not(.show) { box-shadow: none; }
/* Open / pressed: the shared "active control" look (see Buttons below). */
.block_myoverview .btn-outline-secondary.dropdown-toggle:is(.show, :active),
.block_myoverview [data-region="filter"] .btn-outline-secondary.dropdown-toggle:is(.show, :active) {
    background: #fff;
    border-color: rgba(var(--bs-primary-rgb), .45);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .12);
    color: var(--bs-primary);
}
.block_myoverview .btn-outline-secondary.dropdown-toggle:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.block_myoverview .btn-outline-secondary.dropdown-toggle::after { margin-left: 2px; }
/* Icons (masks, so they take the button's colour): lines for the grouping filter, arrows for sorting. */
.block_myoverview :is(#groupingdropdown, #sortingdropdown)::before {
    background: currentColor;
    content: "";
    flex: none;
    height: 16px;
    -webkit-mask: var(--mindoe-icon) center / contain no-repeat;
    mask: var(--mindoe-icon) center / contain no-repeat;
    width: 16px;
}
.block_myoverview #groupingdropdown {
    --mindoe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E");
}
.block_myoverview #sortingdropdown {
    --mindoe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M3 16l4 4 4-4M17 20V4M13 8l4-4 4 4'/%3E%3C/svg%3E");
}
.block_myoverview [data-region="filter"] .searchbar .form-control {
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a99' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px center / 16px;
    border: 1px solid transparent;
    border-radius: 999px !important;
    color: var(--mindoe-text);
    font-size: 14px;
    height: 40px;
    padding-left: 42px;
}
.block_myoverview [data-region="filter"] .searchbar .form-control:focus {
    border-color: rgba(var(--bs-primary-rgb), .4);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .15);
}
/* (Their menus' current-choice check: the general dropdown rule at the top of this file.) */
/* Paging (Course overview, Recently accessed): round lavender buttons. */
:is(.pagelayout-mydashboard, .pagelayout-mycourses) section.block .pagination { gap: 6px; }
:is(.pagelayout-mydashboard, .pagelayout-mycourses) section.block .page-link {
    align-items: center;
    background: var(--mindoe-lavender);
    border: 0;
    border-radius: 50% !important;
    color: var(--bs-primary);
    display: inline-flex;
    height: 40px;
    justify-content: center;
    margin: 0;
    min-width: 40px;
    padding: 0;
}
:is(.pagelayout-mydashboard, .pagelayout-mycourses) section.block .page-link:hover { background: var(--bs-primary); color: #fff; }
:is(.pagelayout-mydashboard, .pagelayout-mycourses) section.block .page-item.disabled .page-link { background: transparent; color: rgba(var(--mindoe-text-rgb), .3); }
:is(.pagelayout-mydashboard, .pagelayout-mycourses) section.block .page-item.active .page-link { background: var(--bs-primary); color: #fff; }

/* Course cards (Course overview card view, Recently accessed): the catalogue card. */
:is(.pagelayout-mydashboard, .pagelayout-mycourses) .course-card.card {
    border: 1px solid rgba(var(--mindoe-text-rgb), .07);
    border-radius: 24px;
    overflow: hidden;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease-out;
}
:is(.pagelayout-mydashboard, .pagelayout-mycourses) .course-card.card:hover { box-shadow: 0 26px 48px -30px rgba(var(--mindoe-shadow-rgb), .5); transform: translateY(-4px); }
:is(.pagelayout-mydashboard, .pagelayout-mycourses) .course-card > a:first-child { display: block; overflow: hidden; }
/* Recently accessed shows floor(width / card width) cards; Moodle's 245px fitted only two next to the drawer. */
.pagelayout-mydashboard .block_recentlyaccessedcourses .card-carousel .course-card { width: 228px; }
/* Room in the carousel (Moodle: overflow hidden, as tall as the cards) for a hovered card's lift and shadow, which it
   cut off - the card's top edge, the shadow's bottom as a straight line, a grey square at the sides. The negative
   margins keep the cards where they were. */
.pagelayout-mydashboard .block_recentlyaccessedcourses .card-carousel { margin: -8px -16px -32px; padding: 8px 16px 32px; }
:is(.pagelayout-mydashboard, .pagelayout-mycourses) .course-card .card-img-top {
    aspect-ratio: 16 / 9;
    border-radius: 0;
    height: auto !important;
    transition: scale .6s cubic-bezier(.16, 1, .3, 1);
}
:is(.pagelayout-mydashboard, .pagelayout-mycourses) .course-card:hover .card-img-top { scale: 1.05; }
:is(.pagelayout-mydashboard, .pagelayout-mycourses) .course-card .course-info-container { padding: 16px 18px 6px !important; }
:is(.pagelayout-mydashboard, .pagelayout-mycourses) .course-card .coursename {
    color: var(--mindoe-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}
:is(.pagelayout-mydashboard, .pagelayout-mycourses) .course-card .coursename:hover { color: var(--bs-primary); }
:is(.pagelayout-mydashboard, .pagelayout-mycourses) .course-card .muted { color: rgba(var(--mindoe-text-rgb), .55) !important; font-size: 13px; margin-top: 2px; }
:is(.pagelayout-mydashboard, .pagelayout-mycourses) .course-card .muted .categoryname { color: inherit; }
:is(.pagelayout-mydashboard, .pagelayout-mycourses) .course-card .card-footer { background: transparent !important; padding: 8px 18px 16px; }
:is(.pagelayout-mydashboard, .pagelayout-mycourses) .course-card .card-footer.menu { padding: 4px 8px 10px 0; }
:is(.pagelayout-mydashboard, .pagelayout-mycourses) .course-card .coursemenubtn { border-radius: 50%; height: 36px; width: 36px; }
:is(.pagelayout-mydashboard, .pagelayout-mycourses) .course-card .coursemenubtn:hover { background: var(--mindoe-lavender); color: var(--bs-primary); }
/* "80% complete" with a bar under it (the value comes from core_renderer::mindoe_progress_bars()). */
:is(.pagelayout-mydashboard, .pagelayout-mycourses) .course-card .progress-text { color: rgba(var(--mindoe-text-rgb), .7); font-size: 13px; font-weight: 500; }
:is(.pagelayout-mydashboard, .pagelayout-mycourses) .course-card .progress-text[data-mindoe-progress]::after {
    background:
        linear-gradient(90deg, var(--bs-primary), #8b88f5) 0 0 / var(--mindoe-progress) 100% no-repeat,
        #ebeafd;
    border-radius: 999px;
    content: "";
    display: block;
    height: 6px;
    margin-top: 8px;
}
/* List and summary views of Course overview: rounded rows. */
:is(.pagelayout-mydashboard, .pagelayout-mycourses) .block_myoverview .list-group-item.course-listitem {
    border: 1px solid rgba(var(--mindoe-text-rgb), .07);
    border-radius: 20px !important;
    margin-bottom: 12px;
}

/* Site administration index: each category as a white card, laid out in balanced columns. */
#page-admin-search .tab-pane > .container-fluid { column-gap: 20px; columns: 3 300px; padding: 0; }
#page-admin-search .tab-pane > .container-fluid > hr { display: none; }
#page-admin-search .tab-pane > .container-fluid > .row {
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 24px;
    break-inside: avoid;
    box-shadow: 0 20px 40px -38px rgba(var(--mindoe-shadow-rgb), .45);
    display: block;
    margin: 0 0 20px;
    padding: 20px 14px 14px;
}
#page-admin-search .tab-pane > .container-fluid > .row > [class*="col"] { max-width: none; padding: 0; width: auto; }
#page-admin-search .tab-pane > .container-fluid > .row > .col-sm-3:empty { display: none; }
#page-admin-search .tab-pane .row h4 { font-size: 18px; margin: 0 0 8px; padding: 0 10px; }
#page-admin-search .tab-pane .row h4 a { align-items: center; color: var(--mindoe-text); display: inline-flex; gap: 10px; text-decoration: none; }
#page-admin-search .tab-pane .row h4 a::before { background: var(--bs-primary); border-radius: 50%; content: ""; flex: none; height: 8px; width: 8px; }
#page-admin-search .tab-pane .row h4 a:hover { color: var(--bs-primary); }
#page-admin-search .tab-pane .row h5 { color: rgba(var(--mindoe-text-rgb), .55); font-size: 12px; font-weight: 600; letter-spacing: .06em; margin: 12px 10px 4px; text-transform: uppercase; }
#page-admin-search .tab-pane .row h5 a { color: inherit; text-decoration: none; }
#page-admin-search .tab-pane .row ul { margin: 0; }
#page-admin-search .tab-pane .row li a {
    align-items: center;
    border-radius: 12px;
    color: rgba(var(--mindoe-text-rgb), .85);
    display: flex;
    font-size: 14px;
    gap: 8px;
    justify-content: space-between;
    line-height: 1.35;
    padding: 7px 10px;
    text-decoration: none;
    transition: background-color .15s ease-out, color .15s ease-out;
}
#page-admin-search .tab-pane .row li a::after {
    color: var(--bs-primary);
    content: "→";
    opacity: 0;
    transition: opacity .15s ease-out, translate .2s cubic-bezier(.16, 1, .3, 1);
    translate: -4px 0;
}
#page-admin-search .tab-pane .row li a:hover { background: var(--mindoe-lavender); color: var(--bs-primary); }
#page-admin-search .tab-pane .row li a:hover::after { opacity: 1; translate: 0 0; }
/* The admin search in the hero: one lavender pill with the indigo button inside. */
.mindoe-hero--admin .simplesearchform .form-control {
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(var(--mindoe-text-rgb), .1);
    border-radius: 999px 0 0 999px !important;
    height: 44px;
    min-width: 260px;
    padding-left: 20px;
}
.mindoe-hero--admin .simplesearchform .btn { border-radius: 0 999px 999px 0 !important; height: 44px; padding: 0 18px 0 14px; }

/* ---- Activity icons (course page, activity pages, course index, activities overview) ------------------------------ */
/* Moodle colours the icon itself by the activity's purpose; the theme puts it on a tile tinted the same way. */
.activityiconcontainer:is(.courseicon, .largeicon),
:is(.page-header-image, #course-overview-page h3) .activityiconcontainer {
    --ra-tint: #ebe9fd;
    align-items: center;
    background: var(--ra-tint);
    border-radius: 14px;
    display: inline-flex;
    justify-content: center;
}
.activityiconcontainer.interactivecontent:is(.courseicon, .largeicon),
:is(.page-header-image, #course-overview-page h3) .activityiconcontainer.interactivecontent { --ra-tint: #fdeee2; }
.activityiconcontainer.content:is(.courseicon, .largeicon),
:is(.page-header-image, #course-overview-page h3) .activityiconcontainer.content { --ra-tint: #e1f3f6; }
.activityiconcontainer.assessment:is(.courseicon, .largeicon),
:is(.page-header-image, #course-overview-page h3) .activityiconcontainer.assessment { --ra-tint: #fce7f0; }
.activityiconcontainer.collaboration:is(.courseicon, .largeicon),
:is(.page-header-image, #course-overview-page h3) .activityiconcontainer.collaboration { --ra-tint: #e4f1fb; }
.activityiconcontainer.administration:is(.courseicon, .largeicon),
:is(.page-header-image, #course-overview-page h3) .activityiconcontainer.administration { --ra-tint: #f3e8fb; }

/* ---- Course page (course/view.php) ------------------------------------------------------------ */
/* Sections: white cards in the hero's language; the activities as white rows (Moodle: grey panel, grey rows) that
   lift on hover, their icon on a purpose-tinted tile. */
.course-content .course-section .section-item {
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 24px;
    box-shadow: 0 24px 48px -42px rgba(var(--mindoe-shadow-rgb), .5);
}
.course-content .course-section .course-section-header { padding: 18px 22px 14px; }
.course-content .course-section .sectionname { color: var(--mindoe-text); font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.course-content .course-section .sectionname a { color: inherit; text-decoration: none; }
.course-content .course-section .icons-collapse-expand {
    background: var(--mindoe-lavender);
    border: 0;
    color: var(--bs-primary);
    transition: background-color .15s ease-out;
}
.course-content .course-section .icons-collapse-expand:hover { background: #e3e1fb; }
.course-content .course-section .section-content-inner {
    background: transparent;
    border-color: rgba(var(--mindoe-text-rgb), .06);
    border-radius: 0 0 24px 24px;
    padding: 14px 18px 18px;
}
.course-content .activity-item {
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .08);
    border-radius: 18px;
    padding: 14px 16px;
    transition: border-color .2s ease-out, box-shadow .3s ease-out, transform .3s cubic-bezier(.16, 1, .3, 1);
}
.course-content .activity-item:not(.activityinline):hover {
    border-color: rgba(var(--bs-primary-rgb), .22);
    box-shadow: 0 18px 32px -26px rgba(var(--mindoe-shadow-rgb), .55);
    transform: translateY(-2px);
}
.course-content .activity-item .activityiconcontainer.courseicon { height: 44px; width: 44px; }
.course-content .activity-item .activityiconcontainer.courseicon img { height: 24px; width: 24px; }
.course-content .activity-item .activityname a { color: var(--mindoe-text); font-weight: 600; text-decoration: none; }
.course-content .activity-item:hover .activityname a { color: var(--bs-primary); }
/* Completion ("Done", "To do") and restriction notes. */
.course-content .btn-subtle-success { background: #e3f4e7; border: 0; color: #1d7a3b; font-weight: 600; }
.course-content .btn-subtle-success:hover { background: #d3eedb; color: #1d7a3b; }
.course-content .availabilityinfo,
.course-content .activity-availability {
    background: #f7f6ff;
    border: 1px solid #e6e4fb;
    border-radius: 14px;
    color: rgba(var(--mindoe-text-rgb), .78);
    font-size: 14px;
}

/* Course index (left drawer): the white sheet of the block drawer, its current page in the brand pill. */
#theme_boost-drawers-courseindex.drawer {
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 28px;
    box-shadow: 0 30px 60px -40px rgba(var(--mindoe-shadow-rgb), .5);
}
#theme_boost-drawers-courseindex .drawerheader { background: transparent; box-shadow: none; }
#theme_boost-drawers-courseindex .drawercontent { scrollbar-color: #d4d1fb transparent; scrollbar-width: thin; }
#theme_boost-drawers-courseindex .courseindex .courseindex-item { border-radius: 12px; transition: background-color .15s ease-out; }
#theme_boost-drawers-courseindex .courseindex .courseindex-item:hover { background-color: var(--mindoe-lavender); }
#theme_boost-drawers-courseindex .courseindex .courseindex-section-title a { color: var(--mindoe-text); font-weight: 600; }
#theme_boost-drawers-courseindex .courseindex .courseindex-link { color: rgba(var(--mindoe-text-rgb), .8); text-decoration: none; }
#theme_boost-drawers-courseindex .courseindex .courseindex-item.pageitem { background-color: #e3e1fb; color: var(--bs-primary); }
#theme_boost-drawers-courseindex .courseindex .courseindex-item.pageitem a { color: var(--bs-primary); font-weight: 600; }
#theme_boost-drawers-courseindex .drawertoggle,
.drawer-toggles .drawer-left-toggle .btn { background: var(--mindoe-lavender); border: 0; border-radius: 50%; }
.drawer-toggles .drawer-left-toggle .btn { background: #fff; box-shadow: 0 12px 24px -14px rgba(var(--mindoe-shadow-rgb), .55); }
@media (max-width: 991.98px) {
    #theme_boost-drawers-courseindex.drawer { border: 0; border-radius: 0; box-shadow: 24px 0 48px -32px rgba(var(--mindoe-shadow-rgb), .5); }
    /* Its open button: the right drawer's pull tab, mirrored, so it does not cover the activities' icons. */
    .drawer-toggles .drawer-left-toggle .btn {
        border-radius: 0 22px 22px 0;
        box-shadow: 8px 8px 20px -12px rgba(var(--mindoe-shadow-rgb), .55);
        height: 44px;
        justify-content: flex-end;
        margin: 0;
        padding-right: 7px;
        width: 32px;
    }
    .drawer-toggles .drawer-left-toggle .btn .icon { margin: 0; }
}

/* Drawers on wide layouts (activity pages, incourse): Boost pins them to the screen edge from the header down to the
   bottom, under the sticky Done/Next bar. Like the anchored drawers of the dashboard and course pages, they float
   instead: 16px from the header and the screen edge, ending 16px above the sticky bar (or the window). */
@media (min-width: 992px) {
    body:not(.limitedwidth):not(.pagelayout-standard) :is(#theme_boost-drawers-courseindex, #theme_boost-drawers-blocks).drawer {
        bottom: calc(16px + var(--sticky-footer-total-height, 0px));
        height: auto;
        max-height: none;
        top: calc(72px + 16px);
    }
    body:not(.limitedwidth):not(.pagelayout-standard) #theme_boost-drawers-courseindex.drawer {
        transition: left .5s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .5s;
    }
    body:not(.limitedwidth):not(.pagelayout-standard) #theme_boost-drawers-courseindex.drawer.show {
        left: 16px;
        transition: left .5s cubic-bezier(.16, 1, .3, 1), visibility 0s;
    }
    body:not(.limitedwidth):not(.pagelayout-standard) #theme_boost-drawers-blocks.drawer.show { right: 16px; }
}

/* ---- Activities overview (course/overview.php) ----------------------------------------------------- */
/* Each activity type a white card (Moodle: a thin grey outline) with its tinted icon tile; its table flat inside it,
   with the theme's small-caps header; Done/To do, attempts and View as soft pills. */
#course-overview-page .collapsable-section {
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06) !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 48px -42px rgba(var(--mindoe-shadow-rgb), .5);
    padding: 16px 20px !important;
}
#course-overview-page .collapsable-section .icons-collapse-expand { background: var(--mindoe-lavender); border: 0; color: var(--bs-primary); }
#course-overview-page .collapsable-section h3 { font-size: 17px; gap: 12px; }
#course-overview-page h3 .activityiconcontainer { height: 44px; margin: 0 !important; width: 44px; }
#course-overview-page h3 .activityiconcontainer img { height: 24px; width: 24px; }
#course-overview-page .course-overview { border: 0 !important; border-radius: 0 !important; padding-top: 0 !important; }
#course-overview-page .course-overview-table { font-size: 14px; margin: 0; }
#course-overview-page .course-overview-table > :is(thead, tbody) > tr > * { border-bottom: 1px solid rgba(var(--mindoe-text-rgb), .06); padding: 12px 14px; vertical-align: middle; }
#course-overview-page .course-overview-table > tbody > tr:last-child > * { border-bottom: 0; }
#course-overview-page .course-overview-table > thead > tr > th {
    background: #fafaff;
    border-bottom: 0;
    color: rgba(var(--mindoe-text-rgb), .6);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    vertical-align: bottom;
}
#course-overview-page .course-overview-table > thead > tr > th:first-child { border-radius: 12px 0 0 12px; }
#course-overview-page .course-overview-table > thead > tr > th:last-child { border-radius: 0 12px 12px 0; }
#course-overview-page .course-overview-table .activityname { color: var(--mindoe-text); font-weight: 600; text-decoration: none; }
#course-overview-page .course-overview-table .activityname:hover { color: var(--bs-primary); }
#course-overview-page .course-overview-table td .small { color: rgba(var(--mindoe-text-rgb), .6); font-size: 13px; }
#course-overview-page .course-overview-table .btn { border: 0; border-radius: 999px; font-size: 13px; font-weight: 600; padding: 6px 14px; }
#course-overview-page .course-overview-table .btn-subtle-success { background: #e3f4e7; color: #1d7a3b; }
#course-overview-page .course-overview-table .btn-subtle-success:hover { background: #d3eedb; }
#course-overview-page .course-overview-table .btn-subtle-body { background: var(--mindoe-lavender); color: var(--mindoe-text); }
#course-overview-page .course-overview-table .btn-subtle-body:hover { background: #e7e5fc; color: var(--bs-primary); }
#course-overview-page .course-overview-table a.btn-subtle-body { background: #e7e5fc; color: var(--bs-primary); padding-left: 20px; padding-right: 20px; }
#course-overview-page .course-overview-table a.btn-subtle-body:hover { background: #dcd9fb; }

/* ---- Activity pages (header, completion, SCORM launch) --------------------------------------- */
/* Moodle centres the activity header at 830px but lets its tabs (SCORM package, Settings, Reports…) run the full
   width from the left: the tabs in the same centred column, the first pill's edge in line with the breadcrumbs and
   the activity icon (Moodle insets the header content by 15px, the tabs by 23px). */
.pagelayout-incourse .secondary-navigation { margin-left: auto; margin-right: auto; max-width: 830px; }
.pagelayout-incourse .secondary-navigation .nav-item:first-child > .mds-nav-pill { margin-left: -8px; }
/* The activity's completion requirements and dates as a white card; its icon on a large tinted tile. */
.page-header-image .activityiconcontainer { height: 56px; width: 56px; }
.page-header-image .activityiconcontainer img { height: 30px; width: 30px; }
.activity-header [data-region="activity-information"],
.activity-header .activity-information {
    background: #fff !important;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 20px;
    box-shadow: 0 20px 40px -38px rgba(var(--mindoe-shadow-rgb), .5);
}
.activity-header .activity-details { background: transparent !important; }
/* The card's padding in one place: Moodle pads the inner details on the activity page but not on its other pages
   (logs, permissions…), where the card had none. The requirements as chips, green when done. */
.activity-header [data-region="activity-information"] { padding: 16px 20px; }
.activity-header [data-region="activity-information"] :is(.activity-details, .completion-info) { margin: 0 !important; padding: 0 !important; }
.activity-header .activity-completion-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 8px 0 0; padding: 0; }
.activity-header .activity-completion-list > li > div {
    align-items: center;
    background: var(--mindoe-lavender);
    border-radius: 999px;
    display: inline-flex;
    font-size: 13px;
    gap: 4px;
    padding: 4px 12px 4px 8px;
}
.activity-header .activity-completion-list .automatic-completion-is-complete { background: #e3f4e7; color: #1d7a3b; }
.activity-header .completion-info strong,
.activity-header [data-region="completionrequirements"] strong { font-weight: 700; }
/* SCORM: the launch area as a card, a big "Enter" button. */
#page-mod-scorm-view #scormviewform {
    align-items: flex-start;
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 24px;
    box-shadow: 0 24px 48px -40px rgba(var(--mindoe-shadow-rgb), .5);
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 16px auto 0;
    max-width: 830px; /* The width of the activity header above it. */
    padding: 24px 28px;
}
#page-mod-scorm-view #scormviewform .btn-primary { font-size: 16px; font-weight: 600; order: -1; padding: 12px 34px; }
#page-mod-scorm-view #scormviewform label { color: rgba(var(--mindoe-text-rgb), .75); margin-left: 6px; }

/* SCORM player (mod/scorm/player.php): Moodle sizes the package to "window height minus where it starts", but never
   under 680px - with the page header above it, a fixed 680px box that ran past the window and left space under it.
   The package becomes a rounded stage the height of the window below the header bar (the page scrolls to it on
   open, see theme_mindoe_page_init()); "Exit activity" and the mode ("Review mode") share one slim row above it. */
#page-mod-scorm-player #scorm_layout {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 0 0 1px rgba(var(--mindoe-text-rgb), .06), 0 30px 60px -44px rgba(var(--mindoe-shadow-rgb), .55);
    height: max(480px, calc(100dvh - 72px - 48px)) !important;
    overflow: hidden;
    scroll-margin-top: calc(72px + 24px);
}
#page-mod-scorm-player :is(#scorm_content, #scorm_object) { display: block; height: 100% !important; width: 100% !important; }
#page-mod-scorm-player .d-flex.flex-row-reverse:has(> a[href*="preventskip"]) { margin-bottom: 0 !important; position: relative; z-index: 2; }
#page-mod-scorm-player #scormtop { align-items: center; display: flex; margin: -38px 0 14px !important; min-height: 38px; }
#page-mod-scorm-player #scormmode {
    background: #e7e5fc;
    border-radius: 999px;
    color: var(--bs-primary);
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    padding: 6px 14px;
}
#page-mod-scorm-player #scormmode:empty { display: none; }

/* ---- Profile (user/profile.php) -------------------------------------------------------------- */
/* "View more" under a list (course profiles): a small pill on the list's edge, not a stray link at the far right. */
#page-wrapper .profile_tree li.viewmore { margin-top: 10px; text-align: left; }
.profile_tree li.viewmore a {
    background: #e7e5fc;
    border-radius: 999px;
    color: var(--bs-primary);
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px !important;
    text-decoration: none;
}
.profile_tree li.viewmore a:hover { background: #dcd9fb; }
/* Mobile app: the QR code as a small framed tile, the same space above it as below (it sat right under the text). */
.profile_tree dd > div:has(> img[src^="data:"]) {
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .08);
    border-radius: 16px;
    display: inline-block;
    margin-top: 14px;
    padding: 10px;
}
.profile_tree dd > div > img[src^="data:"] { display: block; height: 128px; image-rendering: pixelated; width: 128px; }
.profile_tree li.contentnode:has(dd > div > img[src^="data:"]) > dl { margin-bottom: 9px; }
.profile_tree section.node_category.card {
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 24px;
    box-shadow: 0 20px 40px -38px rgba(var(--mindoe-shadow-rgb), .5);
}
.profile_tree section.node_category .card-body { padding: 22px 24px; }
.profile_tree section.node_category h3.lead { color: var(--mindoe-text); font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.profile_tree section.node_category ul { margin: 0; padding: 0; }
.profile_tree section.node_category li { list-style: none; }
.profile_tree section.node_category dl { margin-bottom: 14px; }
.profile_tree section.node_category dt {
    color: rgba(var(--mindoe-text-rgb), .55);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    margin-bottom: 2px;
    text-transform: uppercase;
}
.profile_tree section.node_category dd { color: var(--mindoe-text); margin: 0; }
.profile_tree section.node_category li:not(.contentnode) a { border-radius: 10px; display: inline-block; font-weight: 500; padding: 4px 0; text-decoration: none; }
.profile_tree section.node_category li:not(.contentnode) a:hover { color: var(--bs-primary); text-decoration: underline; text-underline-offset: 4px; }
/* "Edit profile": a pill in the card's top-right corner, level with its title, not floated into the details. */
.profile_tree section.node_category.card { position: relative; }
.profile_tree .editprofile { position: absolute; right: 20px; top: 18px; }
.profile_tree .editprofile a {
    background: var(--mindoe-lavender);
    border-radius: 999px !important;
    color: var(--bs-primary);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px !important;
}

/* ---- Calendar (calendar/view.php: month, day, upcoming) -------------------------------------------- */
/* Toolbar: the view switch (Month ▾) and the course filter as pills on one line, "New event" at its end. */
#region-main .maincalendar .header { align-items: center; gap: 8px; margin-bottom: 8px; padding: 0 !important; }
#region-main .maincalendar .header > * { margin: 0 !important; }
#region-main .maincalendar .header #calendarviewdropdown {
    align-items: center;
    background: #e7e5fc;
    border: 0;
    border-radius: 999px;
    color: var(--bs-primary);
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 6px;
    min-height: 42px;
    padding: 0 16px 0 18px;
}
#region-main .maincalendar .header #calendarviewdropdown:hover { background: #dcd9fb; }
#region-main .maincalendar .header .cal_courses_flt { background-color: #fff; border-radius: 999px; font-size: 14px; max-width: 320px; padding-left: 18px; width: auto; }
#region-main .maincalendar .header .btn-primary { margin-left: auto !important; min-height: 42px; padding: 0 20px; }

/* Month navigation: "‹ September   October 2026   November ›" with the arrows as round lavender buttons (Moodle: ◀︎ ▶︎
   glyphs). */
#region-main .maincalendar .calendar-controls { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin: 8px 0 16px; }
#region-main .maincalendar .calendar-controls .current { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 0; text-align: center; }
#region-main .maincalendar .calendar-controls .arrow_link {
    align-items: center;
    border-radius: 999px;
    color: rgba(var(--mindoe-text-rgb), .75);
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 10px;
    padding: 4px 14px 4px 4px;
    text-decoration: none;
    transition: background-color .15s ease-out, color .15s ease-out;
}
#region-main .maincalendar .calendar-controls .arrow_link.next { padding: 4px 4px 4px 14px; }
#region-main .maincalendar .calendar-controls .arrow_link .arrow { display: none; }
#region-main .maincalendar .calendar-controls .arrow_link::before,
#region-main .maincalendar .calendar-controls .arrow_link::after {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(var(--mindoe-text-rgb), .08), 0 6px 14px -10px rgba(var(--mindoe-shadow-rgb), .6);
    flex: none;
    height: 34px;
    width: 34px;
}
#region-main .maincalendar .calendar-controls .arrow_link.previous::before { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234642eb' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") center / 16px no-repeat; content: ""; }
#region-main .maincalendar .calendar-controls .arrow_link.next::after { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234642eb' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat; content: ""; }
#region-main .maincalendar .calendar-controls .arrow_link:hover { background: #fff; color: var(--bs-primary); }
#region-main .maincalendar .calendar-controls .arrow_link .arrow_text { color: var(--mindoe-text); font-size: 14px; white-space: nowrap; }
/* The links hold &nbsp; text around the label: no font size for it, so only the gap separates arrow and label. */
#region-main .maincalendar .calendar-controls .arrow_link { font-size: 0 !important; gap: 0; }
#region-main .maincalendar .calendar-controls .arrow_link.previous::before { margin-right: 10px; }
#region-main .maincalendar .calendar-controls .arrow_link.next::after { margin-left: 10px; }
#region-main .maincalendar .calendar-controls .arrow_link.previous { margin-left: -4px; }
#region-main .maincalendar .calendar-controls .arrow_link.next { margin-right: -4px; }
#region-main .maincalendar .header #calendarviewdropdown { margin: 0 !important; }
#region-main .maincalendar .calendar-controls .arrow_link:hover .arrow_text { color: var(--bs-primary); }
#region-main .maincalendar .calendarwrapper > .controls { width: 100%; }
#region-main .maincalendar .calendar-controls > .hide { display: none; }

/* The month: one white card, quiet hairlines, the day number top-left in a small round chip (today indigo); no shaded
   weekend columns and no grey blocks for the days outside the month - those are just empty. */
#region-main .calendarwrapper table.calendarmonth {
    background: #fff;
    border-collapse: separate;
    border-radius: 24px;
    border-spacing: 0;
    box-shadow: 0 0 0 1px rgba(var(--mindoe-text-rgb), .06), 0 16px 36px -30px rgba(var(--mindoe-shadow-rgb), .45);
    margin: 0;
    table-layout: fixed;
    width: 100%;
}
#region-main .calendarwrapper table.calendarmonth th {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(var(--mindoe-text-rgb), .06);
    color: rgba(var(--mindoe-text-rgb), .5);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    padding: 14px 12px 12px !important;
    text-align: left;
    text-transform: uppercase;
}
#region-main .calendarwrapper table.calendarmonth td {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-right: 1px solid rgba(var(--mindoe-text-rgb), .06);
    height: 124px;
    padding: 8px !important;
    transition: background-color .15s ease-out;
    vertical-align: top;
}
#region-main .calendarwrapper table.calendarmonth td:last-child { border-right: 0; }
#region-main .calendarwrapper table.calendarmonth tr:last-child td { border-bottom: 0; }
#region-main .calendarwrapper table.calendarmonth tr:last-child td:first-child { border-bottom-left-radius: 24px; }
#region-main .calendarwrapper table.calendarmonth tr:last-child td:last-child { border-bottom-right-radius: 24px; }
#region-main .calendarwrapper table.calendarmonth td.day:not(.dayblank):hover { background: #fbfaff; }
#region-main .calendarwrapper table.calendarmonth .day-number-circle {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    font-size: 13px;
    font-weight: 600;
    height: 28px;
    justify-content: center;
    width: 28px;
}
#region-main .calendarwrapper table.calendarmonth td.weekend .day-number-circle { color: rgba(var(--mindoe-text-rgb), .55); }
#region-main .calendarwrapper table.calendarmonth td.today .day-number-circle {
    background: var(--bs-primary);
    box-shadow: 0 6px 14px -6px rgba(var(--bs-primary-rgb), .8);
    color: #fff;
}
#region-main .calendarwrapper table.calendarmonth td.day:not(.dayblank):hover .day-number-circle:not(:where(td.today *)) { background: #ebe9fd; color: var(--bs-primary); }
/* Events in a day: small tinted chips. */
#region-main .calendarwrapper table.calendarmonth [data-region="event-item"] a {
    border-radius: 8px;
    display: block;
    font-size: 12px;
    font-weight: 500;
    overflow: hidden;
    padding: 2px 8px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Loading a month: Moodle lays a 60% white square over the whole area (the lavender around the rounded card too).
   A soft veil over the card only, and the spinner in a white chip. */
#region-main .calendarwrapper .overlay-icon-container {
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    background: rgba(240, 241, 254, .45);
    border-radius: 24px;
    transition: opacity .15s ease-out;
}
#region-main .calendarwrapper .overlay-icon-container .loading-icon {
    align-items: center;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 12px 28px -14px rgba(var(--mindoe-shadow-rgb), .6);
    color: var(--bs-primary);
    display: inline-flex;
    height: 48px;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: min(50%, 220px);
    transform: translateX(-50%);
    width: 48px;
}
/* "Import or export calendars" as a pill link under the month. */
#region-main .maincalendar .bottom { margin-top: 16px; }
#region-main .maincalendar .bottom a {
    align-items: center;
    background: #e7e5fc;
    border-radius: 999px;
    color: var(--bs-primary);
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 18px;
    text-decoration: none;
}
#region-main .maincalendar .bottom a:hover { background: #dcd9fb; }

/* Events key (calendar block): each type a row with its colour as a rounded swatch holding the show/hide eye; the
   name in body text, a lavender row on hover; a hidden type fades. */
.calendar_filters ul { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
.calendar_filters ul li { margin: 0; }
.calendar_filters ul li { margin: 0 !important; }
.calendar_filters ul li a {
    align-items: center;
    border-radius: 12px;
    color: var(--mindoe-text);
    display: flex;
    font-size: 14px;
    gap: 10px;
    margin: 0 -8px;
    padding: 6px 8px;
    text-decoration: none;
    transition: background-color .15s ease-out, opacity .15s ease-out;
}
.calendar_filters ul li a:hover { background: var(--mindoe-lavender); color: var(--bs-primary); }
.calendar_filters ul li a > span:nth-child(2) { display: none; }
.calendar_filters ul li a > span[class^="calendar_event_"] {
    align-items: center;
    border: 0;
    border-radius: 8px;
    display: inline-flex;
    flex: none;
    height: 28px;
    justify-content: center;
    margin: 0;
    width: 28px;
}
.calendar_filters ul li a > span[class^="calendar_event_"] .icon { color: rgba(0, 0, 0, .55); font-size: 13px; margin: 0; }
.calendar_filters ul li a[data-eventtype-hidden="true"] { opacity: .45; }

/* ---- Block drawer (right; dashboard, courses) ------------------------------------------------- */
/* A white sheet in the hero's card language instead of Boost's grey panel; the blocks inside are sections of it,
   divided by a hairline, not cards in a box. */
#theme_boost-drawers-blocks.drawer {
    background: #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 28px;
    box-shadow: 0 30px 60px -40px rgba(var(--mindoe-shadow-rgb), .5);
    overflow: hidden;
}
/* Opening and closing: Boost wipes the drawer in with a 0.2s clip-path (which slices through the rounded sheet and its
   shadow) while the page moves on its own timer. Instead the sheet glides and fades in, and the page makes room on
   the same curve and duration, so both move as one. */
#theme_boost-drawers-blocks.drawer.drawer-right {
    clip-path: none;
    opacity: 0;
    transition:
        opacity .2s ease-out,
        translate .5s cubic-bezier(.16, 1, .3, 1),
        left .5s cubic-bezier(.16, 1, .3, 1),
        right .5s cubic-bezier(.16, 1, .3, 1),
        max-height .2s ease,
        visibility 0s linear .5s;
    translate: 24px 0;
}
#theme_boost-drawers-blocks.drawer.drawer-right.show {
    opacity: 1;
    transition:
        opacity .3s ease-out .05s,
        translate .5s cubic-bezier(.16, 1, .3, 1),
        left .5s cubic-bezier(.16, 1, .3, 1),
        right .5s cubic-bezier(.16, 1, .3, 1),
        max-height .2s ease,
        visibility 0s;
    translate: 0 0;
}
#page.drawers {
    transition: margin-left .5s cubic-bezier(.16, 1, .3, 1), margin-right .5s cubic-bezier(.16, 1, .3, 1),
        padding-left .5s cubic-bezier(.16, 1, .3, 1), padding-right .5s cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
    #theme_boost-drawers-blocks.drawer.drawer-right,
    #theme_boost-drawers-blocks.drawer.drawer-right.show { translate: 0 0; transition: opacity .15s linear, visibility 0s; }
    #page.drawers { transition: none; }
}
#theme_boost-drawers-blocks .drawerheader { background: transparent; box-shadow: none; padding-left: 10px; }
/* Content scrolls away under a soft fade instead of a hard edge (Boost's "scrolled" header shadow is dropped). */
#theme_boost-drawers-blocks .drawercontent {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    /* Content starts and ends outside the 18px fades, so only what is scrolled away fades (edit mode puts "Add a block"
       right at the top). */
    padding: 18px 6px 20px;
    scrollbar-color: #d4d1fb transparent;
    scrollbar-width: thin;
}
#theme_boost-drawers-blocks section.block .block-header { border: 0; }
/* Edit mode: "Add a block" with the same 14px inset as the block contents, not the full drawer width. */
#theme_boost-drawers-blocks [data-key="addblock"] { margin-left: 14px; margin-right: 14px; }
#theme_boost-drawers-blocks section.block .btn-secondary {
    background: var(--mindoe-lavender);
    border: 0;
    border-radius: 999px;
    color: var(--bs-primary);
    font-weight: 600;
    padding: 6px 14px;
}
#theme_boost-drawers-blocks section.block .btn-secondary:hover { background: #e3e1fb; }
#theme_boost-drawers-blocks section.block.card { background: transparent; border: 0; border-radius: 0; box-shadow: none; margin: 0 !important; }
#theme_boost-drawers-blocks section.block.card + section.block.card { border-top: 1px solid rgba(var(--mindoe-text-rgb), .08); }
#theme_boost-drawers-blocks section.block > .card-body { padding: 18px 14px !important; }
#theme_boost-drawers-blocks section.block .card-title { color: var(--mindoe-text); font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
#theme_boost-drawers-blocks section.block .content.mt-3 { margin-top: 12px !important; }
/* Open/close buttons: round lavender buttons (the closed one floats on the page, so it gets a white face). */
#theme_boost-drawers-blocks .drawertoggle,
.drawer-toggles .drawer-right-toggle .btn {
    align-items: center;
    background: var(--mindoe-lavender);
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    height: 40px;
    justify-content: center;
    transition: background-color .15s ease-out, transform .3s cubic-bezier(.16, 1, .3, 1);
    width: 40px;
}
.drawer-toggles .drawer-right-toggle .btn { background: #fff; box-shadow: 0 12px 24px -14px rgba(var(--mindoe-shadow-rgb), .55); }
#theme_boost-drawers-blocks .drawertoggle:hover,
.drawer-toggles .drawer-right-toggle .btn:hover { background: #e3e1fb; }
.drawer-toggles .drawer-right-toggle .btn:hover { transform: translateX(-2px); }
:is(#theme_boost-drawers-blocks, #theme_boost-drawers-courseindex) .drawertoggle:focus,
.drawer-toggles :is(.drawer-right-toggle, .drawer-left-toggle) .btn:focus { box-shadow: none; outline: 0; }
:is(#theme_boost-drawers-blocks, #theme_boost-drawers-courseindex) .drawertoggle:focus-visible,
.drawer-toggles :is(.drawer-right-toggle, .drawer-left-toggle) .btn:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }

/* Level Up XP: the badge on a lavender stage, the total as an indigo pill, the level bar in the course-progress
   gradient, small-caps section labels and the Leaderboard/Report/Settings links as tiles. */
#theme_boost-drawers-blocks .block_xp .level-badge {
    margin: 0 auto;
}
#theme_boost-drawers-blocks .block_xp .content > div > .xp-my-3 {
    align-items: center;
    background: radial-gradient(70% 90% at 50% 40%, #fff 0%, #e9e8fd 70%, #dedcfb 100%);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    margin: 0 !important;
    padding: 22px 0;
}
#theme_boost-drawers-blocks .block_xp .xp-mt-6 { margin-top: 20px !important; }
#theme_boost-drawers-blocks .block_xp .xp-uppercase,
#theme_boost-drawers-blocks .block_xp .block_xp-heading {
    border: 0;
    color: rgba(var(--mindoe-text-rgb), .55);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    margin-bottom: 4px;
    text-transform: uppercase;
}
#theme_boost-drawers-blocks .block_xp .xp-bg-gray-200.xp-rounded-full:not([role="progressbar"]) { background: #e3e1fb; color: var(--bs-primary); font-weight: 700; }
#theme_boost-drawers-blocks .block_xp [role="progressbar"] { background: #ebeafd; height: 8px; }
#theme_boost-drawers-blocks .block_xp [role="progressbar"] > div { background: linear-gradient(90deg, var(--bs-primary), #8b88f5); border-radius: 999px; }
#theme_boost-drawers-blocks .block_xp img.xp-rounded-full { border-color: #e3e1fb; }
/* Leaderboard / Report / Settings (learners only get Leaderboard): rows like Recently accessed items - the icon in a
   lavender circle, the label, an arrow on hover - so one link or three both look complete. */
#theme_boost-drawers-blocks .block_xp nav {
    border-top: 1px solid rgba(var(--mindoe-text-rgb), .08);
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 -4px;
    padding-top: 12px;
}
#theme_boost-drawers-blocks .block_xp nav .nav-button {
    align-items: center;
    background: transparent;
    border-radius: 14px;
    color: var(--mindoe-text);
    display: flex;
    font-size: 14px;
    font-weight: 500;
    gap: 12px;
    padding: 6px 12px 6px 6px;
    text-decoration: none;
    transition: background-color .15s ease-out, color .15s ease-out;
}
/* The icon: a tinted rounded tile with a crisp line icon (a mask, so it takes the tile's ink) instead of Level Up's grey
   bitmaps - gold trophy for the leaderboard, indigo chart for the report, slate sliders for settings. Matched by the
   link, as the set of links depends on the user (learners only get the leaderboard). */
#theme_boost-drawers-blocks .block_xp nav .nav-button > div:first-child {
    --xp-tint: var(--mindoe-lavender);
    --xp-ink: var(--bs-primary);
    align-items: center;
    background: var(--xp-tint);
    border-radius: 12px;
    display: flex;
    flex: none;
    height: 36px;
    justify-content: center;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease-out;
    width: 36px;
}
#theme_boost-drawers-blocks .block_xp nav .nav-button > div:first-child .icon { display: none; }
#theme_boost-drawers-blocks .block_xp nav .nav-button > div:first-child::before {
    background: var(--xp-ink);
    content: "";
    height: 18px;
    -webkit-mask: var(--xp-icon) center / contain no-repeat;
    mask: var(--xp-icon) center / contain no-repeat;
    width: 18px;
}
#theme_boost-drawers-blocks .block_xp nav .nav-button[href*="/ladder/"] > div:first-child {
    --xp-tint: #fff3d9;
    --xp-ink: #b26a00;
    --xp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 17v4M7 4h10v5a5 5 0 0 1-10 0V4zM17 6h3v1.5A3.5 3.5 0 0 1 16.5 11M7 6H4v1.5A3.5 3.5 0 0 0 7.5 11'/%3E%3C/svg%3E");
}
#theme_boost-drawers-blocks .block_xp nav .nav-button[href*="/report/"] > div:first-child {
    --xp-tint: #ebe9fd;
    --xp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 20h16M7 16v-4M12 16V7M17 16v-7'/%3E%3C/svg%3E");
}
#theme_boost-drawers-blocks .block_xp nav .nav-button[href*="/config/"] > div:first-child {
    --xp-tint: #eef0f5;
    --xp-ink: #565b70;
    --xp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h9M19 7h1M4 17h3M13 17h7'/%3E%3Ccircle cx='16' cy='7' r='2.5'/%3E%3Ccircle cx='10' cy='17' r='2.5'/%3E%3C/svg%3E");
}
/* Any other link Level Up may add: the indigo tile with its own (bitmap) icon. */
#theme_boost-drawers-blocks .block_xp nav .nav-button:not([href*="/ladder/"]):not([href*="/report/"]):not([href*="/config/"]) > div:first-child .icon { display: inline-block; margin: 0; }
#theme_boost-drawers-blocks .block_xp nav .nav-button:not([href*="/ladder/"]):not([href*="/report/"]):not([href*="/config/"]) > div:first-child::before { display: none; }
#theme_boost-drawers-blocks .block_xp nav .nav-button::after {
    color: var(--bs-primary);
    content: "→";
    margin-left: auto;
    opacity: 0;
    transition: opacity .15s ease-out, translate .2s cubic-bezier(.16, 1, .3, 1);
    translate: -4px 0;
}
#theme_boost-drawers-blocks .block_xp nav .nav-button:hover { background: var(--mindoe-lavender); color: var(--bs-primary); }
#theme_boost-drawers-blocks .block_xp nav .nav-button:hover > div:first-child { box-shadow: 0 6px 14px -8px rgba(var(--mindoe-shadow-rgb), .5); transform: translateY(-1px); }
#theme_boost-drawers-blocks .block_xp nav .nav-button:hover::after { opacity: 1; translate: 0 0; }
#theme_boost-drawers-blocks .block_xp nav .nav-button:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 1px; }

/* Below lg Boost opens the drawer as an overlay from the right edge of the screen: a plain square panel there. Its open
   button, pinned to that edge (40px + 16px margins), covered the right corner of the cards - the blocks' ⋮ menus in
   edit mode, the course cards' ⋮ menus: a slim pull tab tucked into the screen edge instead. */
@media (max-width: 991.98px) {
    #theme_boost-drawers-blocks.drawer { border: 0; border-radius: 0; box-shadow: -24px 0 48px -32px rgba(var(--mindoe-shadow-rgb), .5); }
    .drawer-toggles .drawer-right-toggle .btn {
        border-radius: 22px 0 0 22px;
        box-shadow: -8px 8px 20px -12px rgba(var(--mindoe-shadow-rgb), .55);
        height: 44px;
        justify-content: flex-start;
        margin: 0;
        padding-left: 7px;
        width: 32px;
    }
    .drawer-toggles .drawer-right-toggle .btn:hover { transform: translateX(-3px); }
    .drawer-toggles .drawer-right-toggle .btn .icon { margin: 0; }
}

/* Recently accessed items as a learning trail: each activity's icon in a tile tinted by its purpose (Moodle colours
   the icon itself), the tiles joined by a dotted line - the rocket's dotted flight path from the front page - and
   the row lights up lavender with an arrow on hover. */
#theme_boost-drawers-blocks .block_recentlyaccesseditems [data-region="items-list"] .card {
    background: transparent;
    border: 0;
    border-radius: 16px;
    margin-bottom: 2px !important;
    position: relative;
    transition: background-color .15s ease-out;
}
/* The dots run from each item up to the one before it, so items Moodle hides (beyond the first three until "Show more
   items") or that we hide leave no loose end. */
#theme_boost-drawers-blocks .block_recentlyaccesseditems [data-region="items-list"] .card + .card::before {
    border-left: 2px dotted #c9c6f6;
    content: "";
    height: 10px;
    left: 27px;
    pointer-events: none;
    position: absolute;
    top: -6px;
}
/* Activities with no name in the current language (courses exist once per language, {mlang}): left out, as in the
   course lists. */
#theme_boost-drawers-blocks .block_recentlyaccesseditems [data-region="items-list"] .card:has(h4 .clickable:empty) { display: none !important; }
#theme_boost-drawers-blocks .block_recentlyaccesseditems [data-region="items-list"] .card a { color: var(--mindoe-text); display: block; text-decoration: none; }
#theme_boost-drawers-blocks .block_recentlyaccesseditems [data-region="items-list"] .card-body { margin: 0 !important; padding: 8px 30px 8px 8px !important; }
#theme_boost-drawers-blocks .block_recentlyaccesseditems [data-region="items-list"] .card a::after {
    color: var(--bs-primary);
    content: "→";
    opacity: 0;
    position: absolute;
    right: 12px;
    top: 50%;
    transition: opacity .15s ease-out, translate .2s cubic-bezier(.16, 1, .3, 1);
    translate: -4px -50%;
}
#theme_boost-drawers-blocks .block_recentlyaccesseditems [data-region="items-list"] .card:hover { background: var(--mindoe-lavender); }
#theme_boost-drawers-blocks .block_recentlyaccesseditems [data-region="items-list"] .card:hover a::after { opacity: 1; translate: 0 -50%; }
#theme_boost-drawers-blocks .block_recentlyaccesseditems [data-region="items-list"] .card a:focus-visible { border-radius: 16px; outline: 2px solid var(--bs-primary); outline-offset: -2px; }
#theme_boost-drawers-blocks .block_recentlyaccesseditems .activity-icon.activityiconcontainer {
    --ra-tint: #ebe9fd;
    align-items: center;
    background: var(--ra-tint);
    border-radius: 12px;
    display: flex;
    flex: none;
    height: 40px;
    justify-content: center;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease-out;
    width: 40px;
}
#theme_boost-drawers-blocks .block_recentlyaccesseditems .activity-icon.interactivecontent { --ra-tint: #fdeee2; }
#theme_boost-drawers-blocks .block_recentlyaccesseditems .activity-icon.content { --ra-tint: #e1f3f6; }
#theme_boost-drawers-blocks .block_recentlyaccesseditems .activity-icon.assessment { --ra-tint: #fce7f0; }
#theme_boost-drawers-blocks .block_recentlyaccesseditems .activity-icon.collaboration { --ra-tint: #e4f1fb; }
#theme_boost-drawers-blocks .block_recentlyaccesseditems .activity-icon.communication { --ra-tint: #ebe9fd; }
#theme_boost-drawers-blocks .block_recentlyaccesseditems .activity-icon.administration { --ra-tint: #f3e8fb; }
#theme_boost-drawers-blocks .block_recentlyaccesseditems .activity-icon img { height: 22px; width: 22px; }
#theme_boost-drawers-blocks .block_recentlyaccesseditems [data-region="items-list"] .card:hover .activity-icon {
    box-shadow: 0 6px 14px -8px rgba(var(--mindoe-shadow-rgb), .5);
    transform: translateY(-1px);
}
#theme_boost-drawers-blocks .block_recentlyaccesseditems [data-region="items-list"] .card .ms-2 { margin-left: 12px !important; }
#theme_boost-drawers-blocks .block_recentlyaccesseditems [data-region="items-list"] h4 {
    color: var(--mindoe-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    transition: color .15s ease-out;
}
#theme_boost-drawers-blocks .block_recentlyaccesseditems [data-region="items-list"] small { color: rgba(var(--mindoe-text-rgb), .55); display: block; font-size: 12px; margin-top: 2px; }
#theme_boost-drawers-blocks .block_recentlyaccesseditems [data-region="items-list"] .card:hover h4 { color: var(--bs-primary); }
#theme_boost-drawers-blocks .block_recentlyaccesseditems [data-region="more-items-button-container"] { margin-top: 10px !important; padding: 0 !important; }
#theme_boost-drawers-blocks .block_recentlyaccesseditems [data-action="more-items"] { width: 100%; }

/* ---- Reports & Analytics (local_edwiserreports) ----------------------------------------------- */
/* Edwiser's own look (orange/teal palette classes with !important, square cards) in the Mindoe language. The
   chart colours come from theme_mindoe_page_init() (lib.php); the plugin's code is left untouched. */
.path-local-edwiserreports :is(.theme-0-bg, .theme-primary-bg) { background-color: var(--bs-primary) !important; }
.path-local-edwiserreports :is(.theme-0-text, .theme-primary-text) { color: var(--bs-primary) !important; }
.path-local-edwiserreports :is(.theme-0-border, .theme-primary-border) { border-color: var(--bs-primary) !important; }
.path-local-edwiserreports .theme-1-bg { background-color: #26228c !important; }
.path-local-edwiserreports .theme-1-text { color: #26228c !important; }
.path-local-edwiserreports .theme-1-border { border-color: #26228c !important; }
.path-local-edwiserreports .theme-2-bg { background-color: #8b88f5 !important; }
.path-local-edwiserreports .theme-2-text { color: #6764e0 !important; }
.path-local-edwiserreports .theme-2-border { border-color: #8b88f5 !important; }
.path-local-edwiserreports .theme-primary-fill { fill: var(--bs-primary) !important; }
.path-local-edwiserreports .theme-secondary-fill { fill: rgba(139, 136, 245, .38) !important; }
.path-local-edwiserreports .theme-primary-stroke { stroke: var(--bs-primary) !important; }
.path-local-edwiserreports :is(.filter-selector, .block-filters, .filters) .dropdown-toggle::after,
.path-local-edwiserreports .edwiserreports-tabs .tab-item.dropdown .tab-link::after { border-top-color: var(--bs-primary) !important; }
.path-local-edwiserreports :is(.filter-selector, .panel-header, .block-filters, .filters) .dropdown-menu .dropdown-item:hover,
.path-local-edwiserreports .filter-selector .dropdown-menu .dropdown-item.active { color: var(--bs-primary) !important; }
.path-local-edwiserreports .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--bs-primary) transparent transparent transparent !important;
}
.path-local-edwiserreports :is(.select2-results__option--highlighted, .select2-results__option[aria-selected='true']),
.path-local-edwiserreports .reports-filter-body .fa,
.path-local-edwiserreports .nav-tabs .nav-link { color: var(--bs-primary) !important; }
.path-local-edwiserreports .checkbox-edwiserreports input:checked + .checkmark { background-color: var(--bs-primary) !important; }
.path-local-edwiserreports .summary-card { border-color: rgba(var(--bs-primary-rgb), .35) !important; }

/* Licence notice: Edwiser renders it as a randomly named element with an inline "position: fixed; top: 9rem" (Boost's
   old header height), so it floated over the report tabs and the title card. It stays fully visible, but in the
   page flow and sticky: it sits under the header bar while scrolling and covers nothing. Matched by its inline style. */
.path-local-edwiserreports #region-main [style*="#d9534f"][style*="position: fixed"] {
    background: #fff1f0 !important;
    border: 1px solid #f5c2bf;
    border-radius: 16px;
    box-shadow: 0 16px 32px -24px rgba(161, 38, 34, .45);
    color: #a12622 !important;
    display: block;
    font-size: 14px;
    left: auto !important;
    margin: 12px 12px 0;
    padding: 12px 20px !important;
    position: sticky !important;
    right: auto !important;
    top: 84px !important; /* 12px under the 72px header bar ($navbar-height in lib.php). */
    z-index: 20 !important;
}
.path-local-edwiserreports #region-main [style*="#d9534f"][style*="position: fixed"] a { color: #a12622; font-weight: 600; text-decoration: underline; }

/* Report tabs: the nav pills. */
.path-local-edwiserreports .edwiserreports-tabs { border: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.path-local-edwiserreports .edwiserreports-tabs .tab-item { background: transparent !important; border: 0; border-radius: 999px; padding: 0; }
.path-local-edwiserreports .edwiserreports-tabs .tab-link {
    align-items: center;
    border-radius: 999px;
    color: var(--mindoe-text);
    display: inline-flex;
    font-size: 15px;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    text-decoration: none;
}
.path-local-edwiserreports .edwiserreports-tabs .tab-item:hover .tab-link { background: rgba(227, 225, 251, .6); color: var(--bs-primary); }
.path-local-edwiserreports .edwiserreports-tabs .tab-item.active .tab-link { background: #e3e1fb; color: var(--bs-primary); font-weight: 600; }
/* Title, period and date filter: the hero card of the other signed-in pages. */
.path-local-edwiserreports .edwiserreports-header {
    align-items: center;
    background:
        radial-gradient(90% 150% at 100% 0%, #e3e1fb 0%, rgba(227, 225, 251, .5) 40%, rgba(255, 255, 255, 0) 72%),
        #fff;
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 32px;
    box-shadow: 0 30px 60px -46px rgba(var(--mindoe-shadow-rgb), .5);
    gap: 16px;
    margin: 16px 12px 32px !important; /* In line with the insight tiles (12px column gutter), not Edwiser's mx-4. */
    padding: 28px 32px;
}
.path-local-edwiserreports .edwiserreport-title h2 { color: var(--mindoe-text); font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -.025em; }
.path-local-edwiserreports .edwiserreport-title .selected-period {
    background-color: #e3e1fb !important;
    border-radius: 999px;
    color: var(--bs-primary) !important;
    font-size: 14px;
    font-weight: 600;
    margin-top: 12px;
    padding: 8px 16px;
}
.path-local-edwiserreports .edwiserreports-calendar { background: #fff; border-color: rgba(var(--mindoe-text-rgb), .12) !important; }
/* Open dropdowns (date filter, select2 filters): the theme's "active control" look (see Buttons). */
.path-local-edwiserreports .dropdown-toggle:is(.show, [aria-expanded="true"]).edwiserreports-calendar,
.path-local-edwiserreports .filter-selector .dropdown-toggle.show {
    border-color: rgba(var(--bs-primary-rgb), .45) !important;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .12);
    color: var(--bs-primary);
}
#page-wrapper .path-local-edwiserreports .dropdown-menu .dropdown-item.active,
.path-local-edwiserreports #page-wrapper .dropdown-menu .dropdown-item.active {
    background: rgba(var(--bs-primary-rgb), .06) !important; /* Edwiser paints it white with !important. */
    color: var(--bs-primary);
    font-weight: 600;
    text-decoration: none;
}
.path-local-edwiserreports .select2-container--open .select2-selection,
.path-local-edwiserreports .select2-container--focus .select2-selection {
    border-color: rgba(var(--bs-primary-rgb), .45) !important;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .12);
}
/* Insight tiles and report blocks: rounded white cards with the soft Mindoe shadow. */
.path-local-edwiserreports .insight-wrapper,
.path-local-edwiserreports .edwiserReport-block > div[id$="block"] {
    border: 1px solid rgba(var(--mindoe-text-rgb), .06);
    border-radius: 24px;
    box-shadow: 0 24px 48px -40px rgba(var(--mindoe-shadow-rgb), .5);
    overflow: hidden;
}
.path-local-edwiserreports .insight-wrapper { transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease-out; }
.path-local-edwiserreports .insight-wrapper:hover { box-shadow: 0 26px 48px -30px rgba(var(--mindoe-shadow-rgb), .5); transform: translateY(-3px); }
.path-local-edwiserreports .insight-title { color: rgba(var(--mindoe-text-rgb), .6); font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.path-local-edwiserreports .panel-header h5,
.path-local-edwiserreports .panel-header .panel-title { color: var(--mindoe-text); font-weight: 700; letter-spacing: -.01em; }
.path-local-edwiserreports .btn.theme-primary-bg {
    border-radius: 999px;
    box-shadow: 0 16px 30px -16px rgba(var(--bs-primary-rgb), .7);
    font-weight: 600;
    padding: 10px 22px;
}

@media (min-width: 768px) {
    .mindoe-hero--dashboard,
    .mindoe-hero--mycourses { grid-template-columns: minmax(0, 1fr) 260px; min-height: 280px; }
    .mindoe-hero-art { display: block; margin: -36px 0 -40px; position: relative; }
    .mindoe-hero-blob { left: 50%; position: absolute; top: 50%; translate: -50% -50%; width: 240px; }
    .mindoe-hero--dashboard .mindoe-hero-img { height: 420px; left: 50%; position: absolute; top: 34px; translate: -50% 0; }
    .mindoe-hero--mycourses .mindoe-hero-img {
        animation: mindoe-float 6s ease-in-out infinite;
        left: 50%;
        margin: -110px 0 0 -125px; /* Centred by margins: mindoe-float animates translate. */
        position: absolute;
        top: 50%;
        width: 250px;
    }
}
@media (max-width: 767.98px) {
    .mindoe-hero { border-radius: 24px; margin-left: 0; margin-right: 0; padding: 24px 22px 26px; } /* No 15px pad here. */
    .mindoe-hero-continue-name { flex: 1; }
    .mindoe-hero--admin .simplesearchform .form-control { min-width: 0; }
    .mindoe-hero--admin #page-header .header-actions-container { margin-left: 0; width: 100%; }
    .mindoe-hero--admin #page-header .header-action { margin-left: 0 !important; }
    .mindoe-hero--admin #page-header .simplesearchform,
    .mindoe-hero--admin #page-header .simplesearchform form { padding: 0; width: 100%; }
    .mindoe-hero-continue { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
    .mindoe-hero--mycourses .mindoe-hero-img { animation: none; }
}

/* ---- Breakpoints (Bootstrap 5: md 768px, lg 992px) -------------------------------------------- */
/* The rocket drifts gently (all sizes); nothing moves for people who ask for reduced motion. */
@keyframes mindoe-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -10px; }
}
.mindoe-fp .hero .fly { animation: mindoe-float 6s ease-in-out infinite; }

@keyframes mindoe-menu-in {
    from { opacity: 0; translate: 0 14px; }
    to { opacity: 1; translate: 0 0; }
}

@media (max-width: 767.98px) {
    .navbar.fixed-top .navbar-brand .logo { height: 24px; }
    .navbar.fixed-top .navbar-brand.d-none { margin-left: 4px !important; }
    /* Admin toolbar: on phones the first button keeps its own padding (no pull-left onto the screen edge). */
    :is(#page-site-index.pagelayout-frontpage, body:has(.mindoe-catalogue)) .secondary-navigation .nav-item:first-child > .mds-nav-pill { margin-left: 0; }

    /* Hero on phones: centred text and button, then a small scene - the girl on her floor triangle in front of
       the lavender blob, the rocket leaving her hand (desktop composition at 75%). The girl + rocket group is
       360px wide (150px girl + 210px rocket reach) and centred as a whole. */
    .mindoe-fp .hero { display: block; min-height: 0; padding: 48px 0 56px; text-align: center; }
    .mindoe-fp .hero .hero-content h1 { font-size: clamp(34px, 10.5vw, 46px); letter-spacing: -.02em; line-height: 1.08; text-wrap: balance; }
    .mindoe-fp .hero .hero-content p { font-size: 15px; line-height: 1.6; margin: 16px auto 0; max-width: 34ch; }
    .mindoe-fp .hero .btn-signup { margin-top: 24px; }
    /* The desktop shapes are corner pieces (flat edges meant to sit on the window edge); on phones they would
       look cut, so the scene gets a whole blob (pix/fp/blob.svg) behind the girl and rocket instead, and a small
       full purple orb in place of the half circle. */
    .mindoe-fp .hero .shape-1,
    .mindoe-fp .hero .hero-top-right { display: none; }
    .mindoe-fp .hero .girl { display: block; margin: 36px 0 0 calc(50% - 180px); position: relative; width: 150px; }
    .mindoe-fp .hero .girl::before {
        aspect-ratio: 600 / 560;
        background: url('../pix/fp/blob.svg') no-repeat center / contain;
        content: '';
        left: 22px;
        position: absolute;
        top: 6px;
        width: 330px;
    }
    .mindoe-fp .hero .girl::after {
        background: linear-gradient(200deg, #8667ff 0%, #e1dcec 100%);
        border-radius: 50%;
        bottom: 96px;
        content: '';
        height: 56px;
        left: -28px;
        position: absolute;
        width: 56px;
    }
    .mindoe-fp .hero .girl .character { display: block; position: relative; width: 150px; z-index: 2; }
    .mindoe-fp .hero .girl .triangle { bottom: -45px; left: -90px; max-width: 285px; }
    .mindoe-fp .hero .girl .fly { max-width: 270px; right: -210px; top: 12px; z-index: 1; }

    /* Menu on phones: a full-screen sheet instead of Boost's 285px side drawer - logo and round close button
       on top, large links that slide in one after another, the lavender blob in the corner. */
    .drawer.drawer-primary {
        background:
            url('../pix/fp/hero-fly-1.svg') no-repeat right 44px bottom 196px / 230px auto,
            #fff url('../pix/fp/blob.svg') no-repeat right 24px bottom 40px / 280px auto;
        border: 0;
        box-shadow: none;
        height: 100dvh;
        left: 0 !important;
        max-height: none;
        max-width: none !important; /* Boost caps the drawer at 285px. */
        opacity: 0;
        top: 0 !important;
        transition: opacity .25s ease-out, translate .4s cubic-bezier(.16, 1, .3, 1), visibility .4s;
        translate: 0 -10px;
        visibility: hidden;
        width: 100vw !important;
        z-index: 1040;
    }
    .drawer.drawer-primary.show { opacity: 1; translate: 0 0; visibility: visible; }
    /* Boost sets the drawer backdrop one below the first drawer (this menu, 1040): the blocks drawer must sit above
       it, or the backdrop dims it too. */
    #theme_boost-drawers-blocks.drawer { z-index: 1041; }
    .drawer.drawer-primary::before {
        background: linear-gradient(90deg, var(--bs-primary) 0%, #9f9ef6 55%, #feedba 100%);
        content: '';
        height: 3px;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
    }
    .drawer.drawer-primary .drawerheader { height: 64px; padding: 3px 12px 0 20px; }
    .drawer.drawer-primary .drawerheading a { height: auto !important; }
    .drawer.drawer-primary .drawerheader .logo { height: 26px; max-height: none; width: auto; }
    .drawer.drawer-primary .drawertoggle {
        background-color: var(--mindoe-lavender);
        border-radius: 50%;
        color: var(--mindoe-text);
        height: 44px;
        width: 44px;
    }
    .drawer.drawer-primary .drawertoggle:hover { background-color: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary); }
    .drawer.drawer-primary .drawertoggle:focus,
    .drawer.drawer-primary .drawertoggle:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--bs-primary); outline: 0; }
    /* Rows: label + small arrow, hairlines between rows; the current page in indigo with a dot. */
    /* Side padding sits inside the rows, so the hairlines run the full width of the screen. */
    .drawer.drawer-primary .drawercontent { background: transparent; padding: 16px 0 40px; }
    .drawer.drawer-primary .list-group { --bs-list-group-bg: transparent; border-radius: 0; }
    .drawer.drawer-primary .list-group > a.list-group-item {
        align-items: center;
        background: transparent;
        border: 0;
        border-bottom: 1px solid rgba(var(--mindoe-text-rgb), .08);
        border-radius: 0;
        color: var(--mindoe-text);
        display: flex;
        font-size: 19px;
        font-weight: 600;
        letter-spacing: -.01em;
        line-height: 1.3;
        padding: 18px 26px;
        transition: color .15s ease-out;
    }
    .drawer.drawer-primary .list-group > a.list-group-item:not(.icons-collapse-expand)::after {
        background-color: currentColor;
        content: '';
        flex: none;
        height: 18px;
        margin-left: auto;
        -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14M13 6l6 6-6 6'/%3e%3c/svg%3e") no-repeat center / contain;
        mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14M13 6l6 6-6 6'/%3e%3c/svg%3e") no-repeat center / contain;
        opacity: .3;
        transition: opacity .15s ease-out, translate .25s cubic-bezier(.16, 1, .3, 1);
        width: 18px;
    }
    .drawer.drawer-primary .list-group > a.list-group-item:hover { color: var(--bs-primary); }
    .drawer.drawer-primary .list-group > a.list-group-item:hover::after { opacity: 1; translate: 4px 0; }
    .drawer.drawer-primary .list-group > a.list-group-item.active { color: var(--bs-primary); }
    .drawer.drawer-primary .list-group > a.list-group-item.active::before {
        background: var(--bs-primary);
        border-radius: 50%;
        content: '';
        flex: none;
        height: 7px;
        margin-right: 12px;
        width: 7px;
    }
    /* Keyboard focus only: a slim indigo outline (no ring after a tap). */
    .drawer.drawer-primary .list-group-item:focus { box-shadow: none; outline: 0; }
    .drawer.drawer-primary .list-group-item:focus-visible { border-radius: 10px; outline: 2px solid var(--bs-primary); outline-offset: 2px; }
    /* Expandable row (Content): muted chevron, indigo while open. */
    .drawer.drawer-primary .icons-collapse-expand .icon { color: rgba(var(--mindoe-text-rgb), .4); font-size: 14px; }
    /* While open, the row's hairline goes away so the row and its sub-items read as one group (no lines inside). */
    .drawer.drawer-primary .list-group > a.icons-collapse-expand:not(.collapsed) { border-bottom-color: transparent; color: var(--bs-primary); }
    .drawer.drawer-primary .icons-collapse-expand:not(.collapsed) .icon { color: var(--bs-primary); }
    /* Sub-items (e.g. Content → All categories, Courses): a smaller, indented list. */
    .drawer.drawer-primary .list-group > .list-group-item.collapse,
    .drawer.drawer-primary .list-group > .list-group-item.collapsing {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0;
        padding: 0 0 10px !important;
    }
    .drawer.drawer-primary .list-group-item .list-group-item {
        background: transparent !important;
        border: 0;
        color: rgba(var(--mindoe-text-rgb), .8);
        font-size: 16px;
        font-weight: 500;
        padding: 8px 26px 8px 44px !important;
        transition: color .15s ease-out;
    }
    .drawer.drawer-primary .list-group-item .list-group-item:hover,
    .drawer.drawer-primary .list-group-item .list-group-item.active { color: var(--bs-primary); }
    .drawer.drawer-primary.show .list-group > .list-group-item { animation: mindoe-menu-in .5s cubic-bezier(.16, 1, .3, 1) both; }
    .drawer.drawer-primary.show .list-group > .list-group-item:nth-child(2) { animation-delay: .05s; }
    .drawer.drawer-primary.show .list-group > .list-group-item:nth-child(3) { animation-delay: .1s; }
    .drawer.drawer-primary.show .list-group > .list-group-item:nth-child(4) { animation-delay: .15s; }
    .drawer.drawer-primary.show .list-group > .list-group-item:nth-child(5) { animation-delay: .2s; }
    .drawer.drawer-primary.show .list-group > .list-group-item:nth-child(n+6) { animation-delay: .25s; }
}

/* The primary drawer is the phone menu (its button is d-md-none). Boost keeps it open when the window is widened,
   where it would show as a stray panel; from md up the navbar has the same links, so never show it there. */
@media (min-width: 768px) {
    .drawer.drawer-primary { display: none !important; }
    /* Its backdrop goes at the same instant (theme_mindoe_page_init() then closes the drawer properly). */
    body:has(#theme_boost-drawers-primary.show) .modal-backdrop[data-region="modal-backdrop"] { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .mindoe-fp .hero .fly,
    .drawer.drawer-primary.show .list-group > .list-group-item { animation: none; }
    .drawer.drawer-primary { transition: none; }
}

@media (min-width: 768px) {
    .mindoe-fp .hero { min-height: 660px; }
    /* From md the rocket is placed relative to the girl (Alpha's composition: its trail leaves her raised hand). */
    .mindoe-fp .hero .girl .fly { max-width: 320px; right: -230px; top: 20px; z-index: 1; }
    .mindoe-fp .hero .hero-top-right .shape-2 { max-width: 420px; }
    .mindoe-fp .hero .girl { display: block; position: absolute; right: 260px; top: 80px; }
    .mindoe-fp .hero .girl .character { display: block; max-width: 200px; position: relative; z-index: 2; }
    .mindoe-fp .hero .girl .triangle { bottom: -60px; left: -120px; max-width: 380px; position: absolute; }
    .mindoe-fp .section .section-info h2 { font-size: 30px; }
    .coaches { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 3rem; }
    .category-wrapper .col { padding: 1px 20px; }
    .category-wrapper .category { max-width: 364px; min-height: 300px; padding: 60px 20px; }
    .m-footer .m-footer-content { flex-direction: row; justify-content: space-between; text-align: left; }
    .m-footer .links,
    .m-footer .links div { justify-content: flex-end; }
}

@media (min-width: 992px) {
    .mindoe-fp .hero .hero-content h1 { font-size: 60px; }
    /* Alpha's composition, fixed size: 360px wide, reaching 280px past her right edge, the trail starting at her
       raised hand. On narrower windows the hero (overflow: hidden) clips it at the window edge. */
    .mindoe-fp .hero .girl .fly { max-width: 360px; right: -280px; top: 16px; }
    .mindoe-fp .hero .hero-top-right .shape-2 { max-width: 520px; }
    /* The girl's right edge sits on the content column's right edge (container width minus its 12px padding),
       in line with the header's Log in button. The blob and rocket (.hero-top-right) stay on the window edge. */
    .mindoe-fp .hero .girl { bottom: 80px; right: calc(max(0px, (100% - 1140px) / 2) + 12px); top: unset; }
}