// ============================================================================
// IILMP brand — EXTRA SCSS (injected after Boost so these component rules win
// over Bootstrap/Boost defaults). Uses the $iilmp-* vars from pre.scss.
// ============================================================================

// --- Base typography -------------------------------------------------------
body {
    font-family: $font-family-base;
    color: $iilmp-text;
    background-color: $iilmp-page-bg;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: $headings-font-family;
    color: $iilmp-text;
    font-weight: 600;
}

// Eyebrow / meta labels — Archivo Narrow, uppercase, tracked.
.text-uppercase,
.eyebrow,
.badge,
.activity-icon + .activityname .accesshide,
.section .sectionname .accesshide {
    font-family: "Archivo Narrow", $font-family-base;
    letter-spacing: 0.04em;
}

// --- Top bar (navbar) — solid dark brown -----------------------------------
.navbar {
    background-color: $iilmp-topbar !important;
    border-bottom: 1px solid $iilmp-topbar;
    box-shadow: none;

    &.navbar-light,
    &.bg-white,
    &.fixed-top {
        background-color: $iilmp-topbar !important;
    }

    // Light text/icons across the bar.
    .navbar-brand,
    .nav-link,
    .navbar-nav .nav-link,
    .navbar-text,
    .primary-navigation .nav-link,
    a,
    .btn.btn-icon,
    .drawer-toggler .btn {
        color: $iilmp-on-primary !important;
    }

    .nav-link:hover,
    .navbar-nav .nav-link:hover,
    .nav-link:focus {
        color: $iilmp-warm-hover !important;
    }

    // Primary-nav (.moremenu) hover + active. Boost paints both a jarring
    // near-white #f8f9fa box on the dark bar; replace with an on-brand warm pill.
    // Hover is a faint seat; ACTIVE lifts to a stronger pill + a bright cream
    // label + a crisp warm-gold accent bar — the one rare bright accent on the
    // bar (impeccable's "10%"), so "you are here" reads at a glance.
    .moremenu .nav-link {
        position: relative;
        border-radius: 0;   // square, full-height tab highlight (not a rounded pill)
        transition: background-color 140ms ease, color 140ms ease;

        &:hover,
        &:focus {
            background-color: rgba(245, 239, 228, 0.08) !important;
            color: $iilmp-warm-hover !important;
        }
        &.active,
        &.active:hover,
        &.active:focus {
            background-color: rgba(245, 239, 228, 0.14) !important;
            color: $iilmp-card-bg !important;
            font-weight: 600;
        }
        // Centred, inset accent bar — sits inside the link's bottom padding.
        &.active::after {
            content: "";
            position: absolute;
            left: 0.55rem;
            right: 0.55rem;
            bottom: 2px;
            height: 3px;
            border-radius: 3px;
            background-color: #d9bd7a; // warm-gold active accent
        }
    }

    // Brand lockup: the RUFORUM logo sits on a light "chip" so its full-colour
    // mark + tagline stay legible on the dark bar (the logo is drawn for light
    // backgrounds), then a hairline divider, then the site wordmark in Spectral.
    .navbar-brand {
        display: inline-flex;
        align-items: center;
        gap: 0.9rem;
        padding-left: 0.15rem;
        font-family: $headings-font-family;
        font-weight: 600;
        font-size: 1.35rem;
        line-height: 1;
        letter-spacing: 0.01em;

        // Logo chip (cream plate holding the official logo, inset by padding).
        &::before {
            content: "";
            display: inline-block;
            box-sizing: border-box;
            width: 116px;
            height: 46px;
            padding: 6px 12px;
            background-color: $iilmp-card-bg;
            background-image: url('[[pix:theme|logo]]');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            background-origin: content-box;
            border: 1px solid $iilmp-border-strong;
            border-radius: 8px;
        }
    }
}

// --- Navbar dropdowns / pop-outs — dark text on a warm surface --------------
// The bar itself uses light text (see the rule above), but its dropdowns (user
// menu, the "More" overflow menu) and pop-over panels (notifications, messages)
// render on a light surface — where that light text is invisible. Restyle those
// pop-outs as warm cards with dark text. More specific than `.navbar a`, so it
// wins even against that rule's !important.
.navbar .dropdown-menu {
    background-color: $iilmp-card-bg;
    border: 1px solid $iilmp-border;
    border-radius: 0.6rem;
    box-shadow: 0 10px 28px rgba(28, 22, 16, 0.14);
    padding: 0.35rem;

    .dropdown-item {
        color: $iilmp-text !important;
        border-radius: 0.4rem;

        &:hover,
        &:focus,
        &.active,
        &:active {
            background-color: $iilmp-warm-hover;
            color: $iilmp-primary !important;
        }
        .icon { color: $iilmp-text-muted; }
    }
    .dropdown-divider { border-top-color: $iilmp-border; }
    .dropdown-header,
    h6 { color: $iilmp-text-muted; }
}

// Notification / message pop-over panels also open from the bar onto white.
.navbar [data-region="popover-region-container"] {
    a,
    .popover-region-header-text,
    .content-item-container { color: $iilmp-text !important; }
    a:hover { color: $iilmp-primary !important; }
}

// --- Cards — flat, warm, rounded, 1px border -------------------------------
.card {
    background-color: $iilmp-card-bg;
    border: 1px solid $iilmp-border;
    border-radius: 0.75rem;
    box-shadow: none;
    background-image: none; // kill any gradient.
}

.card .card-header {
    background-color: $iilmp-card-bg;
    border-bottom: 1px solid $iilmp-border;
    font-family: $headings-font-family;
}

// Dashboard blocks / course boxes share the card look.
.block,
.dashboard-card,
.course-card,
.courses .coursebox {
    background-color: $iilmp-card-bg;
    border: 1px solid $iilmp-border;
    border-radius: 0.75rem;
    box-shadow: none;
}

// --- Buttons — solid primary, exact hover ----------------------------------
.btn-primary {
    background-color: $iilmp-primary;
    border-color: $iilmp-primary;
    color: $iilmp-on-primary;
    background-image: none;

    &:hover,
    &:focus,
    &:active,
    &.active,
    &:not(:disabled):not(.disabled):active {
        background-color: $iilmp-primary-hover !important;
        border-color: $iilmp-primary-hover !important;
        color: $iilmp-on-primary;
    }
}

.btn-outline-primary {
    color: $iilmp-primary;
    border-color: $iilmp-primary;

    &:hover,
    &:focus {
        background-color: $iilmp-primary;
        border-color: $iilmp-primary;
        color: $iilmp-on-primary;
    }
}

.btn-secondary {
    background-color: $iilmp-warm-hover;
    border-color: $iilmp-border-strong;
    color: $iilmp-text;
    background-image: none;

    &:hover,
    &:focus {
        background-color: $iilmp-border;
        border-color: $iilmp-border-strong;
        color: $iilmp-text;
    }
}

// --- Links -----------------------------------------------------------------
a {
    color: $iilmp-primary;

    &:hover,
    &:focus {
        color: $iilmp-primary-hover;
    }
}

// --- Course index / drawer active state ------------------------------------
.courseindex .courseindex-item.pageitem,
.courseindex .courseindex-link:hover {
    background-color: $iilmp-warm-hover;
    border-radius: 0.375rem;
}
// Active course-index item — warm fill + olive text weight (no accent stripe).
.courseindex .courseindex-item.pageitem {
    background-color: $iilmp-warm-hover;
    .courseindex-link,
    .courseindex-name { color: $iilmp-primary; font-weight: 600; }
}

// --- Drawers / surfaces ----------------------------------------------------
#page,
#page.drawers,
.drawer,
[data-region="drawer"] {
    background-color: $iilmp-page-bg;
}
.drawer {
    border-right: 1px solid $iilmp-border;
    border-left: 1px solid $iilmp-border;
}

// --- Badges / status accents (RAG) -----------------------------------------
.badge.bg-success, .badge-success { background-color: $iilmp-green !important; color: #fff; }
.badge.bg-warning, .badge-warning { background-color: $iilmp-amber !important; color: #fff; }
.badge.bg-danger,  .badge-danger  { background-color: $iilmp-red !important;   color: #fff; }
.badge.bg-primary, .badge-primary { background-color: $iilmp-primary !important; color: #fff; }

// --- Kill Bootstrap gradients globally (belt & braces) ---------------------
.bg-gradient,
.dropdown-item.active,
.dropdown-item:active,
.page-item.active .page-link {
    background-image: none !important;
}
.page-item.active .page-link {
    background-color: $iilmp-primary;
    border-color: $iilmp-primary;
}

// ===========================================================================
// Login page — split-screen brand panel + warm form column (markup from our
// theme_boost/login.mustache fork). Flat fills only; stacks on small screens.
// ===========================================================================
body.pagelayout-login {
    background-color: $iilmp-page-bg;

    // Boost paints a light linear-gradient on #page for the login layout — flatten it.
    #page {
        background-color: $iilmp-page-bg;
        background-image: none;
    }

    .login-wrapper {
        display: flex;
        justify-content: center;
    }

    .iilmp-login-split {
        display: grid;
        grid-template-columns: minmax(300px, 30rem) minmax(320px, 34rem);
        width: 100%;
        max-width: 64rem;
        margin: 0 auto 2rem;
        border: 1px solid $iilmp-border;
        border-radius: 1rem;
        overflow: hidden;
        background-color: $iilmp-card-bg;
    }

    // Brand panel — solid dark olive, cream text.
    .iilmp-login-brand {
        display: flex;
        flex-direction: column;
        gap: 1.75rem;
        padding: 2.5rem 2.25rem 2rem;
        background-color: $iilmp-topbar;
        color: #e8dcc4;

        &__chip {
            align-self: flex-start;
            padding: 8px 14px;
            background-color: $iilmp-card-bg;
            border: 1px solid $iilmp-border-strong;
            border-radius: 8px;

            // The mustache pix helper emits <img class="icon"> (16px by core CSS).
            .icon,
            img {
                width: auto;
                height: 44px;
                max-width: 100%;
                margin: 0;
            }
        }

        &__body { flex: 1 0 auto; }

        &__eyebrow {
            font-family: "Archivo Narrow", $font-family-base;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            font-size: 0.78rem;
            font-weight: 600;
            color: #d9bd7a; // warm-gold accent
            margin-bottom: 0.85rem;
        }

        &__title {
            font-family: $headings-font-family;
            font-weight: 600;
            font-size: clamp(1.5rem, 2.4vw, 1.9rem);
            line-height: 1.2;
            color: $iilmp-card-bg;
            margin-bottom: 0.85rem;
        }

        &__lead {
            font-size: 0.95rem;
            line-height: 1.55;
            color: #e8dcc4;
            margin-bottom: 1.75rem;
        }

        &__points {
            margin: 0;

            li {
                display: flex;
                align-items: flex-start;
                gap: 0.75rem;
                font-size: 0.9rem;
                line-height: 1.45;
                margin-bottom: 0.9rem;
                &:last-child { margin-bottom: 0; }
            }
            .fa-solid {
                flex: none;
                width: 2rem;
                height: 2rem;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                margin-top: -0.2rem;
                border-radius: 0.5rem;
                background-color: rgba(245, 239, 228, 0.1);
                color: #d9bd7a;
                font-size: 0.85rem;
            }
        }

        &__foot {
            font-family: "Archivo Narrow", $font-family-base;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-size: 0.72rem;
            color: rgba(232, 220, 196, 0.65);
        }
    }

    // Form column — warm card surface (the split shell carries the border).
    // width/height 100% + zero margin so it fills its grid cell exactly
    // (Boost gives .login-container its own max-width and bottom margin).
    .login-container {
        background-color: $iilmp-card-bg;
        border: none;
        border-radius: 0;
        padding: 2.5rem 2.5rem 2rem;
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0;
        box-shadow: none;
    }

    .login-heading {
        font-size: 1.45rem;
        margin-bottom: 1.5rem;
    }

    // Sub-headings ("Log in using your account on:", "Is this your first time
    // here?") — quiet uppercase eyebrows instead of competing Spectral display.
    .login-identityproviders .login-heading,
    .login-instructions .login-heading,
    .login-container h2.login-heading {
        font-family: "Archivo Narrow", $font-family-base;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-size: 0.8rem;
        font-weight: 600;
        color: $iilmp-text-muted;
        margin-bottom: 0.85rem;
    }

    // SSO is the primary path — promote the identity-provider button to a
    // solid brand CTA (the manual form stays for local accounts).
    .login-identityprovider-btn {
        background-color: $iilmp-primary;
        border-color: $iilmp-primary;
        color: $iilmp-on-primary !important;
        font-weight: 600;
        padding: 0.6rem 1rem;
        border-radius: 0.5rem;

        &:hover,
        &:focus {
            background-color: $iilmp-primary-hover;
            border-color: $iilmp-primary-hover;
            color: $iilmp-on-primary !important;
        }
        // Seat the provider icon on a small cream disc so it stays legible on
        // the solid olive button (no colour filtering — keep the real mark).
        img {
            background-color: $iilmp-card-bg;
            border-radius: 50%;
            padding: 2px;
            margin-right: 0.35rem;
        }
    }

    .login-divider {
        border-top: 1px solid $iilmp-border;
        margin: 1.5rem 0;
    }

    // Stack: brand panel becomes a compact header band above the form.
    @media (max-width: 991.98px) {
        .iilmp-login-split {
            grid-template-columns: 1fr;
            max-width: 34rem;
        }
        .iilmp-login-brand {
            gap: 1.1rem;
            padding: 1.75rem 1.75rem 1.5rem;

            &__lead { margin-bottom: 0; }
            &__points,
            &__foot { display: none; }
        }
        .login-container { padding: 1.75rem 1.75rem 1.5rem; }
    }

    // The multi-column site footer band is for signed-in chrome; the login
    // page keeps its own compact © line inside the brand panel.
    .iilmp-site-footer { display: none; }
}

// --- Muted text ------------------------------------------------------------
.text-muted,
.dimmed_text,
small.text-muted {
    color: $iilmp-text-muted !important;
}

// ===========================================================================
// Content surface — one cohesive cream page. Boost wraps main content in a
// pure-white `.main-inner` card; pure white is off-brand and, combined with a
// cream #region-main, produced a jarring white/cream split. Blend the content
// column into the cream page and let real components (blocks, tables, the
// calendar) carry their own warm-card definition — matching the dashboard.
// ===========================================================================
// Match Boost's own `#page.drawers .main-inner` specificity so this wins.
#page.drawers .main-inner,
#topofscroll.main-inner,
.main-inner {
    background-color: transparent;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}
#region-main,
#region-main-box,
#region-main .card-body {
    background-color: transparent;
}

// Breadcrumb — a quiet Archivo Narrow meta rail, not a boxed bar.
.breadcrumb {
    background-color: transparent;
    padding: 0;
    margin-bottom: 0.75rem;
    font-family: "Archivo Narrow", $font-family-base;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.8125rem;

    .breadcrumb-item,
    .breadcrumb-item a { color: $iilmp-text-muted; }
    .breadcrumb-item a:hover { color: $iilmp-primary; }
    .breadcrumb-item.active { color: $iilmp-text; }
    .breadcrumb-item + .breadcrumb-item::before { color: $iilmp-border-strong; }
}

// Page H1 — Spectral display, a touch more air below.
#page-header h1,
.page-context-header h1,
#region-main > h1:first-child {
    font-family: $headings-font-family;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 1.25rem;
}

// ===========================================================================
// Navbar refinements
// ===========================================================================
// Non-link text (e.g. "You are currently using guest access") — Boost renders
// it low-contrast olive on the dark bar; lift it to a readable warm light.
// Non-link text on the dark bar (guest-access notice, the "Edit mode" switch
// label) — Boost renders it low-contrast/dark; lift it to a readable warm light.
.navbar .navbar-text,
.navbar .logininfo,
.navbar .usermenu > span,
.navbar .divider + span,
.navbar label,
.navbar .form-check-label {
    color: #e8dcc4 !important;
}

// (The active primary-nav item is styled in the `.navbar .moremenu` block above —
// warm pill + bright cream label + gold accent bar. No competing underline here.)

// ===========================================================================
// Calendar — warm card + refined month grid
// ===========================================================================
.maincalendar {
    background-color: $iilmp-card-bg;
    border: 1px solid $iilmp-border;
    border-radius: 0.75rem;
    padding: clamp(1rem, 2vw, 1.75rem);
}

// Month nav row: « June   July 2026   August »
.calendar-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;

    .current {
        flex: 1;
        text-align: center;
        font-family: $headings-font-family;
        font-size: clamp(1.35rem, 2.2vw, 1.6rem);
        font-weight: 600;
        color: $iilmp-text;
    }
    .previous,
    .next {
        font-family: "Archivo Narrow", $font-family-base;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-size: 0.875rem;
        font-weight: 600;
        color: $iilmp-primary;
        white-space: nowrap;
        &:hover { color: $iilmp-primary-hover; }
    }
}

.calendarmonth.calendartable {
    width: 100%;
    border: none;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;

    // Weekday header — uppercase tracked meta labels.
    thead th.header {
        font-family: "Archivo Narrow", $font-family-base;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-size: 0.75rem;
        font-weight: 600;
        color: $iilmp-text-muted;
        background-color: transparent;
        border: none;
        border-bottom: 1.5px solid $iilmp-border-strong;
        padding: 0 0.65rem 0.6rem;
        text-align: left;
    }

    // Day cells — warm tiles, soft grid, top-left dates.
    td.day,
    td.dayblank {
        border: 1px solid $iilmp-border;
        vertical-align: top;
        padding: 0.5rem 0.65rem;
        height: 6rem;
        background-color: $iilmp-card-bg;
        transition: background-color 120ms ease;
    }
    td.dayblank {
        background-color: $iilmp-page-bg;
        border-color: $iilmp-border;
    }
    td.weekend {
        background-color: $iilmp-page-bg;
    }
    td.day.clickable:hover {
        background-color: $iilmp-warm-hover;
    }

    // Today — solid olive disc on the date, white numeral.
    td.today {
        box-shadow: inset 0 0 0 1.5px $iilmp-primary;
    }
    td.today .sr-only + *,
    td.today a[data-day-number],
    td.today [data-region="day-content"] {
        color: inherit;
    }
}

// ===========================================================================
// Dashboard & blocks — P0 polish toward premium Moodle themes (SCSS-only).
// Deploys the accent colour, adds block-header icons, motion on course cards,
// tighter rhythm, and warm progress bars. No template forks; no dark mode.
// ===========================================================================

// --- Block header icons (leading olive glyph per block type) ---------------
.block .card-title::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: $iilmp-primary;
    margin-right: 0.55rem;
    font-size: 0.9em;
}
.block_myoverview .card-title::before             { content: "\f19d"; } // graduation-cap
.block_timeline .card-title::before               { content: "\f017"; } // clock
.block_calendar_upcoming .card-title::before,
.block_calendar_month .card-title::before         { content: "\f073"; } // calendar-days
.block_online_users .card-title::before           { content: "\f0c0"; } // users
.block_badges .card-title::before,
.block_recentbadges .card-title::before           { content: "\f559"; } // award
.block_recentlyaccessedcourses .card-title::before,
.block_recentlyaccesseditems .card-title::before  { content: "\f1da"; } // history
.block_starredcourses .card-title::before         { content: "\f005"; } // star
.block_settings .card-title::before               { content: "\f013"; } // cog

// --- Course overview list rows — richer meta + hover -----------------------
// The dedicated /my/courses.php page zeros the block's card-body padding to go
// full-bleed (core: `.page-mycourses .drawers .block_myoverview > .card-body`).
// Restore our section padding there (body. lifts specificity above that rule) so
// the block matches the dashboard.
body.page-mycourses .drawers .block_myoverview > .card-body {
    padding: 1.25rem 1.5rem 1.5rem !important;
}

.block_myoverview {
    // Section padding — give the block interior real horizontal + vertical room
    // instead of Boost's tight 1rem, so the header, filters, and rows breathe.
    .card-body {
        padding: 1.25rem 1.5rem 1.5rem !important;
    }

    // Under the title the block stacks TWO rules — .block-myoverview's own
    // border-top plus a leading <hr> — keep the border, drop the hr.
    .block-myoverview > hr:first-child { display: none; }

    .course-listitem {
        // Separate tiles: full border + radius + a gap between rows (Boost stacks
        // them flush with only a 1px bottom rule).
        border: 1px solid $iilmp-border !important;
        border-radius: 0.65rem !important;
        margin-bottom: 0.75rem !important;
        // Boost ships these rows at a cramped px-2 (8px). Give them room to breathe.
        padding: 1rem !important;
        transition: background-color 140ms ease, transform 140ms ease;
        &:last-child { margin-bottom: 0 !important; }
        &:hover {
            background-color: $iilmp-warm-hover;
            transform: translateX(2px);
        }
    }
    .list-image {
        border: 1px solid $iilmp-border;
        border-radius: 0.5rem;
    }
    .coursename { font-weight: 600; }
    .course-listitem:hover .coursename { color: $iilmp-primary; }

    // Category → Archivo Narrow uppercase meta (first .text-muted in the column).
    .col-md-9 > .text-muted:not(.mt-auto) {
        font-family: "Archivo Narrow", $font-family-base;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-size: 0.78rem;
    }
    // Category → a compact warm chip (markup already ships; this restyles it).
    .categoryname {
        display: inline-block;
        margin-top: 0.15rem;
        padding: 0.12rem 0.6rem;
        background-color: $iilmp-warm-hover;
        border: 1px solid $iilmp-border-strong;
        border-radius: 100px;
        font-family: "Archivo Narrow", $font-family-base;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-size: 0.72rem;
        font-weight: 600;
        line-height: 1.4;
        color: $iilmp-primary;
    }

    // --- "Continue" CTA (from our view-list.mustache fork) ------------------
    // Shares the bottom row with the progress bar; low-emphasis until row hover.
    .iilmp-course-footer {
        gap: 0.75rem;
        margin-top: 0.6rem;
    }
    .iilmp-course-cta {
        flex: none;
        padding: 0.2rem 0.7rem;
        font-family: "Archivo Narrow", $font-family-base;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-size: 0.76rem;
        font-weight: 600;
        opacity: 0.72;
        transition: opacity 140ms ease, background-color 140ms ease, color 140ms ease;
        span { margin-left: 0.15rem; }
    }
    .course-listitem:hover .iilmp-course-cta {
        opacity: 1;
        background-color: $iilmp-primary;
        border-color: $iilmp-primary;
        color: $iilmp-on-primary;
    }
    // Progress → a slim olive bar + bold % (markup from our progress-bar.mustache
    // override). Colours beat Moodle's inherited .text-muted !important.
    .iilmp-courseprogress { gap: 0.6rem; margin-top: 0.35rem; }
    .iilmp-progress {
        display: inline-block;
        flex: none;
        width: 160px;
        max-width: 45vw;
        height: 6px;
        background-color: $iilmp-border;
        border-radius: 100px;
        overflow: hidden;
    }
    .iilmp-progress-bar {
        display: block;
        height: 100%;
        background-color: $iilmp-primary;
        border-radius: 100px;
        transition: width 400ms ease;
    }
    .iilmp-progress-pct {
        color: $iilmp-primary !important;
        font-weight: 600;
        font-size: 0.8rem;
        white-space: nowrap;
    }
    .iilmp-progress-pct span { color: $iilmp-primary !important; }
}

// --- Progress bars everywhere (card view, course pages, completion) --------
.progress {
    background-color: $iilmp-border;
    border-radius: 100px;
    height: 0.5rem;
}
.progress-bar {
    background-color: $iilmp-primary;
    background-image: none;
    border-radius: 100px;
}

// --- Course cards (recently accessed + any card-view) — lift on hover ------
.block_recentlyaccessedcourses .card,
.block_myoverview .dashboard-card,
.card-deck .dashboard-card {
    border: 1px solid $iilmp-border !important;
    border-radius: 0.65rem;
    overflow: hidden;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
    &:hover {
        transform: translateY(-3px);
        border-color: $iilmp-border-strong;
        box-shadow: 0 6px 16px rgba(28, 22, 16, 0.08);
    }
    .courseimage,
    .card-img-top {
        transition: transform 240ms ease;
    }
    &:hover .courseimage,
    &:hover .card-img-top { transform: scale(1.04); }
}

// --- Empty states — softer, less "dead end" --------------------------------
.block .empty-message,
.block [data-region="empty-message"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: $iilmp-text-muted;
    padding: 1.75rem 1rem;
    // Warm the mono illustration and give it breathing room.
    img, svg {
        max-width: 92px;
        height: auto;
        margin-bottom: 0.85rem;
        opacity: 0.5;
        filter: sepia(0.35) saturate(0.7) hue-rotate(-8deg);
    }
    p, .text-muted { margin-bottom: 0; }
}

// --- Rhythm — tighten block spacing a touch --------------------------------
[data-region="blocks-column"] .block,
[data-region="block-region"] .block { margin-bottom: 1rem; }

// --- Dashboard hero -------------------------------------------------------
// Give the /my/ dashboard an opening statement: an eyebrow + larger Spectral
// heading + a supporting line. Scoped to the dashboard, SCSS-only (a fully
// personalised "Welcome back, {name}" would need a renderer/layout addition).
body.pagelayout-mydashboard {
    #page-header { margin-bottom: 1.75rem; }

    .page-header-headings h1 {
        font-size: clamp(2rem, 3vw, 2.6rem);
        line-height: 1.1;

        &::before {
            content: "Welcome back";
            display: block;
            margin-bottom: 0.4rem;
            font-family: "Archivo Narrow", $font-family-base;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            font-size: 0.82rem;
            font-weight: 600;
            color: $iilmp-primary;
        }
        &::after {
            content: "Your courses, calendar, and activity at a glance.";
            display: block;
            margin-top: 0.45rem;
            font-family: $font-family-base;
            font-size: 1rem;
            font-weight: 400;
            color: $iilmp-text-muted;
        }
    }
}

// ===========================================================================
// Sticky footer — on short pages, fill the viewport below the fixed navbar so
// the branded footer sits at the bottom instead of floating mid-screen. #page
// is already a flex column in Boost's drawers layout; we give it a viewport
// min-height and let the main region grow to absorb the slack.
// ===========================================================================
#page.drawers {
    // unquote() so scssphp emits the calc() verbatim instead of trying to
    // evaluate "100vh - var(...)" as Sass math (incompatible units → dropped).
    min-height: unquote("calc(100vh - var(--navbar-height, 60px))");
}
#page.drawers > #topofscroll.main-inner {
    flex: 1 0 auto;
}

// ===========================================================================
// Branded site footer (markup from our theme_boost/footer.mustache fork).
// Boost's own footer is a floating "?" popover, so this adds the only visible
// footer on the page: a quiet, centred brand strip closing off the cream page.
// ===========================================================================
.iilmp-site-footer {
    margin-top: 3rem;
    // Full-bleed: #page has horizontal padding, so break the band out to the
    // viewport edges. calc-free pattern (single-unit values only — scssphp drops
    // calc() that mixes %/vw/px); left:50% + -50vw nets to the viewport edge for
    // ANY page padding. The band's own content stays centred via &__inner.
    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 2.5rem 1.5rem 1.5rem;
    border-top: 1px solid $iilmp-border;
    background-color: $iilmp-card-bg;

    &__inner {
        max-width: 68rem;
        margin: 0 auto;
    }

    // Brand column + link columns.
    &__grid {
        display: grid;
        grid-template-columns: minmax(16rem, 1.6fr) repeat(2, minmax(9rem, 1fr));
        gap: 2rem 3rem;
        text-align: left;

        @media (max-width: 767.98px) {
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }
    }

    &__brand {
        font-family: $headings-font-family;
        font-weight: 600;
        font-size: 1.15rem;
        color: $iilmp-text;
    }
    &__tag {
        margin-top: 0.25rem;
        font-family: "Archivo Narrow", $font-family-base;
        text-transform: uppercase;
        letter-spacing: 0.09em;
        font-size: 0.78rem;
        color: $iilmp-primary;
    }
    &__blurb {
        margin: 0.75rem 0 0;
        max-width: 26rem;
        font-size: 0.88rem;
        line-height: 1.55;
        color: $iilmp-text-muted;
    }

    &__heading {
        font-family: "Archivo Narrow", $font-family-base;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-size: 0.78rem;
        font-weight: 600;
        color: $iilmp-text;
        margin-bottom: 0.75rem;
    }
    &__links {
        margin: 0;

        li { margin-bottom: 0.45rem; }
        a {
            font-size: 0.88rem;
            color: $iilmp-text-muted;
            &:hover,
            &:focus { color: $iilmp-primary; }
        }
    }

    &__legal {
        margin-top: 2rem;
        padding-top: 1rem;
        border-top: 1px solid $iilmp-border;
        text-align: center;
        font-size: 0.8rem;
        color: $iilmp-text-muted;
    }
}

// Keep the floating popover-footer button on-brand (Boost paints it grey).
#page-footer .btn-footer-popover {
    background-color: $iilmp-primary !important;
    border-color: $iilmp-primary !important;
    color: $iilmp-on-primary !important;
    &:hover,
    &:focus { background-color: $iilmp-primary-hover !important; }
}

// ===========================================================================
// Secondary navigation (course tabs: Course / Settings / Participants / …) —
// tracked uppercase tabs with the warm-gold active accent, echoing the topnav.
// ===========================================================================
.secondary-navigation {
    border-bottom: none;
    margin-bottom: 1.5rem;

    .moremenu {
        border-bottom: 1px solid $iilmp-border;
    }

    .nav-tabs {
        border-bottom: none;
        gap: 0.25rem;

        .nav-link {
            font-family: "Archivo Narrow", $font-family-base;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-size: 0.85rem;
            font-weight: 600;
            color: $iilmp-text-muted;
            background-color: transparent;
            border: none;
            border-bottom: 3px solid transparent;
            border-radius: 0;
            padding: 0.6rem 0.9rem;
            transition: color 140ms ease, border-color 140ms ease;

            &:hover,
            &:focus {
                color: $iilmp-primary;
                border-bottom-color: $iilmp-border-strong;
            }
            &.active {
                color: $iilmp-text;
                background-color: transparent;
                border-bottom-color: #d9bd7a; // warm-gold accent, as on the topnav
            }
        }
    }
}

// ===========================================================================
// Course page — sections as warm cards, activity rows with icon tiles + hover.
// Markup: Moodle 5.0 course format (.course-section / .activity-item).
// ===========================================================================
.course-content {

    // Section shell.
    .course-section {
        background-color: $iilmp-card-bg;
        border: 1px solid $iilmp-border;
        border-radius: 0.75rem;
        margin-bottom: 1.25rem;
        padding: 1.25rem 1.5rem;
    }

    .course-section-header {
        padding-bottom: 0.75rem;
        margin-bottom: 0.5rem;
        border-bottom: 1px solid $iilmp-border;

        .sectionname {
            font-family: $headings-font-family;
            font-weight: 600;
            font-size: 1.2rem;

            a { color: $iilmp-text; }
        }
        // Section collapse chevron.
        .icons-collapse-expand { color: $iilmp-primary; }
    }

    // Highlighted ("current") section — a slim warm-gold accent on the left edge.
    .course-section.current {
        border-left: 4px solid #d9bd7a;
        padding-left: calc(1.5rem - 3px);
    }

    // Section summary text.
    .summarytext {
        color: $iilmp-text-muted;
        font-size: 0.95rem;
    }

    // Activity rows — soft tiles that seat on hover.
    .activity-item {
        border-radius: 0.6rem;
        padding: 0.6rem 0.75rem;
        margin: 0.15rem 0;
        transition: background-color 140ms ease;

        &:hover {
            background-color: $iilmp-warm-hover;
        }

        .activityname a {
            font-weight: 600;
            color: $iilmp-text;
            &:hover { color: $iilmp-primary; }
        }
    }

    // Activity icon — seat the coloured glyph on a warm bordered tile so the
    // mixed purpose colours read as one system.
    .activityiconcontainer.courseicon {
        background-color: $iilmp-warm-hover;
        border: 1px solid $iilmp-border;
        border-radius: 0.55rem;
        padding: 0.45rem;
    }

    // Dates (Opened/Due) + descriptions — quiet meta under the title.
    .activity-dates {
        font-size: 0.82rem;
        color: $iilmp-text-muted;
        strong { color: $iilmp-text; }
    }
    .activity-altcontent {
        font-size: 0.92rem;
        color: $iilmp-text-muted;
    }

    // Completion dropdown ("Completion" / "Done") — a compact warm chip.
    .activity-completion .btn {
        font-family: "Archivo Narrow", $font-family-base;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-size: 0.76rem;
        font-weight: 600;
        padding: 0.25rem 0.7rem;
        border-radius: 100px;
        background-color: $iilmp-card-bg;
        border: 1px solid $iilmp-border-strong;
        color: $iilmp-text-muted;

        &:hover,
        &:focus {
            background-color: $iilmp-warm-hover;
            color: $iilmp-primary;
        }
    }
    // Marked done — quiet success state.
    .activity-completion .btn.btn-success,
    .activity-completion .btn[data-toggletype="manual:mark-done"].btn-success {
        background-color: $iilmp-green;
        border-color: $iilmp-green;
        color: #fff;
    }

    // Availability / restriction notes.
    .availabilityinfo {
        background-color: $iilmp-page-bg;
        border: 1px dashed $iilmp-border-strong;
        border-radius: 0.5rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
        color: $iilmp-text-muted;
        .badge { background-color: transparent; }
    }
}

// "Collapse all" toggle above the sections.
.course-content [data-toggle="toggleall"],
#collapsesections {
    font-family: "Archivo Narrow", $font-family-base;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
    font-weight: 600;
    color: $iilmp-primary;
}

// ===========================================================================
// Course cards — card view (dashboard / my courses) + category course listing.
// ===========================================================================
.block_myoverview .dashboard-card,
.block_recentlyaccessedcourses .card {
    .card-body { padding: 1rem 1.1rem; }

    .coursename {
        font-weight: 600;
        line-height: 1.35;
        // Clamp long titles to keep the card grid even.
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    // Category line → the same warm chip as list view.
    .categoryname,
    .coursecategory {
        display: inline-block;
        padding: 0.1rem 0.55rem;
        background-color: $iilmp-warm-hover;
        border: 1px solid $iilmp-border-strong;
        border-radius: 100px;
        font-family: "Archivo Narrow", $font-family-base;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-size: 0.7rem;
        font-weight: 600;
        color: $iilmp-primary;
    }
}

// Course category / site listing pages (.coursebox rows).
.courses .coursebox {
    padding: 1.1rem 1.25rem;
    margin-bottom: 0.85rem;
    transition: background-color 140ms ease, border-color 140ms ease;

    &:hover {
        background-color: $iilmp-warm-hover;
        border-color: $iilmp-border-strong;
    }

    .coursename {
        font-family: $headings-font-family;
        font-weight: 600;
        font-size: 1.05rem;
        a { color: $iilmp-text; }
        a:hover { color: $iilmp-primary; }
    }
    .summary,
    .teachers {
        font-size: 0.9rem;
        color: $iilmp-text-muted;
    }
    .teachers a { color: $iilmp-primary; }
}

// Category tree on course/index.php.
.course_category_tree .category > .info {
    background-color: transparent;
    border: none;
    .categoryname { font-family: $headings-font-family; }
}

// ===========================================================================
// Blocks — timeline, upcoming events, online users, badges.
// ===========================================================================
// Timeline / upcoming date-group headers → tracked meta labels.
.block_timeline [data-region="event-list-content-date"],
.block_timeline .timeline-event-list-header,
.block_calendar_upcoming .date {
    font-family: "Archivo Narrow", $font-family-base;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    font-weight: 600;
    color: $iilmp-text-muted;
}

// Timeline / upcoming event rows — soft hover tiles.
.block_timeline [data-region="event-list-item"],
.block_calendar_upcoming .event {
    border-radius: 0.5rem;
    padding: 0.5rem 0.6rem;
    transition: background-color 140ms ease;
    &:hover { background-color: $iilmp-warm-hover; }
}

// Online users — breathing room per row.
.block_online_users [data-region="online-users-list"] .list-group-item {
    background-color: transparent;
    border: none;
    padding: 0.35rem 0;
}

// ===========================================================================
// Forms, modals, tables, alerts — cohesive warm chrome.
// ===========================================================================
// Inputs — calm warm focus ring (flat, no glow stack).
.form-control,
.custom-select,
.form-select {
    background-color: #fff;
    border-color: $iilmp-border-strong;

    &:focus {
        border-color: $iilmp-primary;
        box-shadow: 0 0 0 0.2rem rgba(107, 83, 23, 0.15);
    }
}
.form-check-input:checked {
    background-color: $iilmp-primary;
    border-color: $iilmp-primary;
}
.form-check-input:focus {
    border-color: $iilmp-primary;
    box-shadow: 0 0 0 0.2rem rgba(107, 83, 23, 0.15);
}

// Modals — warm surface, Spectral title.
.modal-content {
    background-color: $iilmp-card-bg;
    border: 1px solid $iilmp-border;
    border-radius: 0.75rem;
}
.modal-header {
    border-bottom: 1px solid $iilmp-border;
    .modal-title { font-family: $headings-font-family; font-weight: 600; }
}
.modal-footer { border-top: 1px solid $iilmp-border; }

// Tables (participants, grader, admin lists) — meta header band + row hover.
.generaltable,
.table {
    thead th {
        font-family: "Archivo Narrow", $font-family-base;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-size: 0.78rem;
        font-weight: 600;
        color: $iilmp-text-muted;
        background-color: transparent;
        border-bottom: 1.5px solid $iilmp-border-strong;
    }
    tbody tr {
        transition: background-color 120ms ease;
        &:hover { background-color: $iilmp-warm-hover; }
    }
    td { border-color: $iilmp-border; }
}

// Alerts — flat warm cards with a slim status accent on the left edge.
.alert {
    border-radius: 0.6rem;
    border-left-width: 4px;
    background-image: none;
}

// Toasts.
.toast {
    background-color: $iilmp-card-bg;
    border: 1px solid $iilmp-border;
    border-radius: 0.6rem;
    color: $iilmp-text;
}

// ===========================================================================
// Micro-interactions & accessibility.
// ===========================================================================
// Brand text selection.
::selection {
    background-color: $iilmp-primary;
    color: $iilmp-on-primary;
}

// Visible keyboard focus — warm-gold ring, distinct from hover styling.
a:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible {
    outline: 2px solid #d9bd7a;
    outline-offset: 2px;
}

// Back-to-top button (injected by javascript/iilmp.js). Sits above Boost's
// floating "?" footer button in the same right rail.
.iilmp-back-to-top {
    position: fixed;
    right: 1rem;
    bottom: 4.5rem;
    z-index: 1030;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid $iilmp-primary;
    border-radius: 50%;
    background-color: $iilmp-primary;
    color: $iilmp-on-primary;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;

    &.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    &:hover,
    &:focus {
        background-color: $iilmp-primary-hover;
        border-color: $iilmp-primary-hover;
        color: $iilmp-on-primary;
    }
}

// Respect reduced-motion preferences: drop the theme's decorative movement.
@media (prefers-reduced-motion: reduce) {
    .block_myoverview .course-listitem,
    .block_myoverview .course-listitem:hover,
    .block_recentlyaccessedcourses .card,
    .block_recentlyaccessedcourses .card:hover,
    .block_myoverview .dashboard-card,
    .block_myoverview .dashboard-card:hover,
    .card-deck .dashboard-card,
    .card-deck .dashboard-card:hover,
    .iilmp-back-to-top {
        transition: none;
        transform: none;
    }
    .block_recentlyaccessedcourses .card:hover .courseimage,
    .block_recentlyaccessedcourses .card:hover .card-img-top,
    .block_myoverview .dashboard-card:hover .courseimage,
    .card-deck .dashboard-card:hover .card-img-top {
        transform: none;
    }
}