@import url("color-variables.css");
@import url("font-size-variables.css");

body {
}

/* Shared subtle-lift hover — same feel as the result details action pills.
   NOTE: custom.css is rendered BEFORE style.css / bootstrap-theme-fix.css and
   (in some layouts) before sweetalert2.min.css, so the theme would win every
   specificity tie. !important + doubled selectors keep these utilities applied
   on every button no matter the load order. */
.btn-hover-lift,
.btn-hover-lift.btn-hover-lift,
.swal2-actions .swal2-confirm,
.swal2-actions .swal2-cancel {
    transition: transform .15s ease, box-shadow .15s ease !important;
}

/* Hover = subtle lift + deeper background. The inset shadow overlays the
   background only (text/icons stay untouched), unlike filter:brightness
   which also darkened the label. */
.btn-hover-lift:hover,
.btn-hover-lift.btn-hover-lift:hover,
.btn-hover-lift:focus,
.btn-hover-lift.btn-hover-lift:focus,
.swal2-actions .swal2-confirm:hover,
.swal2-actions .swal2-confirm:focus,
.swal2-actions .swal2-cancel:hover,
.swal2-actions .swal2-cancel:focus {
    transform: translateY(-1px) !important;
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, .12) !important;
}

.btn-loader {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Uniform button height — works on <button>, anchor-as-button and Swal
   buttons (sent via customClass). Vertical padding is zeroed and line-height
   matches the height so single-line labels stay vertically centered without
   touching display (keeps d-none / d-inline-* utilities working). Doubledinin s
   selectors + !important beat the theme regardless of stylesheet order.
   NOTE: px (not rem) on purpose — the admin theme uses a smaller root
   font-size, so rem resolved to 38.4px there vs 40px elsewhere. px keeps the
   height identical on every page/layout. Tweak --button-height app-wide. */
:root {
    --button-height: 26px;
}

/* SweetAlert2 always sits above every other layer (modals, glightbox, dropdowns). */
.swal2-container,
.swal2-container.swal-over-modal {
    z-index: 2147483647 !important;
}

.btn-height-26px,
button.btn-height-26px,
a.btn-height-26px,
.btn.btn-height-26px,
.swal2-container .btn-height-26px {
    box-sizing: border-box !important;
    height: var(--button-height) !important;
    min-height: var(--button-height) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: var(--button-height) !important;
}

/* Taller variant (30px) - same rules as .btn-height-26px, driven by
   --button-height-30px. Used by the login button. */
:root {
    --button-height-30px: 30px;
}

.btn-height-30px,
button.btn-height-30px,
a.btn-height-30px,
.btn.btn-height-30px,
.swal2-container .btn-height-30px {
    box-sizing: border-box !important;
    height: var(--button-height-30px) !important;
    min-height: var(--button-height-30px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: var(--button-height-30px) !important;
}

/* PowerTip panels that had to be nudged back inside the viewport (see
   main.js): the arrow no longer lines up with the trigger it came from, so
   showing it just points at the wrong thing. !important because style.css
   loads after this file and sets the arrow borders per placement class. */
#powerTip.powertip-shifted::before {
    display: none !important;
}

/* Small round "already in cart" badge - the course grid tile's own top-right
   corner only (via .in-cart-ribbon below), overlaid on the thumbnail image
   where a text pill wouldn't fit. Icon-only (the same cart icon "Add to
   cart" uses, just muted) with a native tooltip (the title attribute on the
   element) rather than a text label. Every other spot - the tile's own
   hover popup, the course details page, and the bundle list row - uses
   .in-cart-text-badge instead (further down this file): each of those sits
   inline in a row of text/controls rather than over an image, so it spells
   out "Already in Cart" directly rather than asking for a hover/tap. */
.in-cart-badge {
    /* display is deliberately NOT !important - Bootstrap's .d-none is
       display:none!important, and custom.css loading after bootstrap.min.css
       means an !important here would win that tie and show the badge
       unconditionally, d-none or not. Only width/height (and .in-cart-ribbon's
       position/top/right/left below) need !important, to beat Bootstrap's
       .ratio > * utility - that utility never touches display, so d-none stays
       free to work normally. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px !important;
    height: 30px !important;
    border: none;
    border-radius: 50%;
    padding: 0;
    background: #6c757d;
    color: #fff;
    font-size: 13px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    cursor: not-allowed;
}

/* Pins .in-cart-badge to the tile's own top-right corner - _CourseList.cshtml's
   grid card only, the one place it still overlays an image rather than
   sitting inline in a row of text/controls. The position/left/top/right here
   also has to beat Bootstrap's .ratio > * utility (the tile thumbnail's
   aspect-ratio box forces every direct child to position:absolute;inset:0;
   width/height:100%) - hence !important, since .in-cart-badge's own width/
   height above already need the same treatment for the same reason. */
.in-cart-ribbon {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    z-index: 5;
}

/* "Already in Cart" text pill - the tile's own hover popup, the course
   details page, and the bundle list row all use this in place of
   .in-cart-badge: each is the one thing a pupil is looking at in that
   moment (as opposed to the grid tile itself, glanced at among many), so it
   spells the state out directly rather than asking for a hover/tap on an
   icon to find out. Sized to match "Add to cart"'s own button height so
   swapping between the two doesn't shift the surrounding layout. */
.in-cart-text-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--button-height, 32px);
    padding: 0 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #495057;
    background: #e9ecef;
    border: 1.5px solid #ced4da;
    white-space: nowrap;
}

    .in-cart-text-badge i {
        color: #198754;
    }

    /* Two labels sit in the markup at all times (see CourseDetails.cshtml /
       Bundle.cshtml / _CourseList.cshtml) - only one is ever shown, picked
       by whether .just-added is on the badge, so JS only has to toggle one
       class rather than rewrite text content. */
    .in-cart-text-badge .in-cart-label--already {
        display: inline;
    }

    .in-cart-text-badge .in-cart-label--just-added {
        display: none;
    }

    .in-cart-text-badge.just-added .in-cart-label--already {
        display: none;
    }

    .in-cart-text-badge.just-added .in-cart-label--just-added {
        display: inline;
    }

/* Freshly-added flash state (window.p4cJustAddedCodes - see _Layout.cshtml):
   a livelier green in place of the settled gray, cleared on window blur.
   Applies to both badge shapes - the text pill above and the icon-only
   .in-cart-badge (course grid tile ribbon), whose tooltip text is swapped by
   JS alongside this class since it carries no visible label of its own. */
.in-cart-text-badge.just-added,
.in-cart-badge.just-added {
    background: #d1e7dd;
    border-color: #a3cfbb;
    color: #0f5132;
}

    .in-cart-text-badge.just-added i {
        color: #0f5132;
    }
/* A 3px rule across the top of the footer, separating it from the page above.
   It sits on .footer-section - the outermost footer wrapper, shared by all
   five layouts that render Views/Shared/Footer.cshtml - so the line spans the
   full width rather than stopping at a .container gutter.

   No !important needed: nothing in style.css targets .footer-section, so
   this file loading first does not cost it the tie. #cacaca is one of the
   theme's own greys - the border grey #ededed read too faint at 3px. */
.footer-section {
    margin-top: 15px;
    border-top: 3px solid #cacaca;
}

/* ---- Subscription tag + Add to cart: shared by CourseDetails, the course list
   hover popup and Bundle. The gold pill pulses and glints; the cart button gets
   a sheen sweep and a nudging cart icon (.btn-cta-shine). ---- */
.purchase-type-badge.subscription,
.bundle-purchase-type-badge.subscription,
.browse-bundle-item__badge.subscription {
    position: relative;
    overflow: hidden;
    background: var(--color-gold-soft);
    color: var(--color-gold-dark);
    border: 1.5px solid var(--color-gold);
    animation: pulse-gold 2s infinite;
}

    .purchase-type-badge.subscription::after,
    .bundle-purchase-type-badge.subscription::after,
    .browse-bundle-item__badge.subscription::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -60%;
        width: 40%;
        background: linear-gradient(100deg, rgba(var(--color-white-rgb), 0) 0%, rgba(var(--color-white-rgb), .85) 50%, rgba(var(--color-white-rgb), 0) 100%);
        transform: skewX(-20deg);
        animation: gold-sheen 3s ease-in-out infinite;
    }

@keyframes pulse-gold {
    0%, 100% { box-shadow: 0 2px 8px rgba(var(--color-gold-rgb), .30); }
    50% { box-shadow: 0 2px 18px rgba(var(--color-gold-rgb), .85); }
}

@keyframes gold-sheen {
    0%, 55% { left: -60%; }
    100% { left: 130%; }
}

.btn-cta-shine {
    position: relative;
    overflow: hidden;
}

    .btn-cta-shine::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -70%;
        width: 45%;
        background: linear-gradient(100deg, rgba(var(--color-white-rgb), 0), rgba(var(--color-white-rgb), .55), rgba(var(--color-white-rgb), 0));
        transform: skewX(-20deg);
        animation: cta-sheen 3.2s ease-in-out infinite;
        pointer-events: none;
    }

    .btn-cta-shine svg,
    .btn-cta-shine > i {
        animation: cta-nudge 3.2s ease-in-out infinite;
    }

    .btn-cta-shine:hover svg,
    .btn-cta-shine:hover > i {
        animation: none;
    }

@keyframes cta-sheen {
    0%, 50% { left: -70%; }
    100% { left: 140%; }
}

@keyframes cta-nudge {
    0%, 70%, 100% { transform: translateX(0); }
    78% { transform: translateX(-3px); }
    86% { transform: translateX(4px); }
    94% { transform: translateX(-2px); }
}

@media (prefers-reduced-motion: reduce) {
    .purchase-type-badge.subscription,
    .purchase-type-badge.subscription::after,
    .bundle-purchase-type-badge.subscription,
    .bundle-purchase-type-badge.subscription::after,
    .browse-bundle-item__badge.subscription,
    .browse-bundle-item__badge.subscription::after,
    .btn-cta-shine::before,
    .btn-cta-shine svg,
    .btn-cta-shine > i {
        animation: none;
    }
}

/* Cart icon (stroke SVG): inside Add to cart buttons and in the header mini cart */
.btn-cart-icon {
    flex: none;
    vertical-align: -3px;
    margin-right: 2px;
}

.header-cart-icon {
    display: block;
}

/* ===== Login page (Views/Account/Login.cshtml) - soft teal card, icon inputs, gradient button ===== */
.login-d4 {
    position: relative;
    overflow: hidden;
    background: var(--color-theme-soft);
}


.login-d4 .container-fluid,
.login-d4 #signup_section {
    position: relative;
    z-index: 1;
}

.login-d4 .card {
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
    background: var(--color-white);
    border: 1px solid var(--color-theme-border);
    border-radius: 22px;
    box-shadow: 0 20px 44px -26px rgba(var(--color-theme-rgb), .55);
}

.login-d4 .card-body {
    padding: 28px !important;
}

.login-d4 .login-title {
    margin: 0 0 18px;
    text-align: center;
    font-size: var(--fs-20);
    font-weight: 800;
    color: var(--color-theme-dark);
}

/* Tabs: two equal pills */
.login-d4 .login-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    max-width: 348px;
    margin: 0 auto 18px;
    padding: 0;
    background: transparent !important;
}

.login-d4 .login-tabs .nav-item {
    min-width: 0;
    display: flex;
}

.login-d4 .login-tabs .nav-link {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 30px;
    padding: 0 14px;
    white-space: nowrap;
    text-align: center;
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--color-text-muted-3);
    background: var(--color-bg-nav-hover);
    border-radius: 999px;
}

.login-d4 .login-tabs .nav-link i {
    font-size: var(--fs-12);
}

.login-d4 .login-tabs .nav-link.active {
    background: var(--color-theme);
    color: var(--color-white);
}

/* Inputs with an icon capsule on the left */
.login-d4 .login-input {
    position: relative;
}

.login-d4 .login-input .form-control {
    height: 46px;
    padding-left: 52px;
    font-size: var(--font-size-input);
    color: var(--color-navy);
    background: var(--color-bg-soft);
    border: 1px solid transparent;
    border-radius: 12px;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.login-d4 .login-input .form-control:focus {
    background: var(--color-white);
    border-color: var(--color-theme);
    box-shadow: 0 0 0 3px rgba(var(--color-theme-rgb), .15);
}

.login-d4 .login-input-icon {
    position: absolute;
    left: 6px;
    top: 6px;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--color-theme-soft);
    color: var(--color-theme);
    font-size: var(--fs-14);
    pointer-events: none;
    transition: background-color .2s;
}

.login-d4 .login-input:focus-within .login-input-icon {
    background: var(--color-theme-border);
}

.login-d4 .login-input .password-addon {
    top: 0;
    bottom: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
    z-index: 3;
}

.login-d4 .login-input .password-addon i {
    vertical-align: baseline;
}

/* Login button: solid pill with a sliding arrow (height comes from .btn-height-30px) */
.login-d4 .login-btn-wrap .btn {
    background: var(--color-theme) !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: var(--color-white) !important;
    box-shadow: 0 8px 16px -8px rgba(var(--color-theme-rgb), .7);
}

.login-d4 .login-btn-wrap .btn i {
    margin-left: 6px;
    transition: transform .25s;
}

.login-d4 .login-btn-wrap .btn:hover i {
    transform: translateX(5px);
}

@media (max-width: 479.98px) {
    .login-d4 .card-body {
        padding: 22px 18px !important;
    }

    .login-d4 .login-title {
        font-size: var(--fs-18);
    }

    .login-d4 .login-tabs {
        gap: 6px;
    }

    /* Chips stay two equal columns (grid); only the inside padding tightens */
    .login-d4 .login-tabs .nav-link {
        padding: 0 6px;
        gap: 3px;
        font-size: var(--fs-11);
    }
}

/* ------------------------------------------------------------------
   Page background: the content area of every page (public, user and
   organization layouts) uses the theme soft colour, the same as the
   home page. The headers and the footer keep their own colours.
   ------------------------------------------------------------------ */
html:root { --color-bg-page: var(--color-theme-soft); } /* Course details paints its page with this variable */

body,
.dashboard-page,
.main-wrapper,
.dashboard-main-wrapper {
    background: var(--color-theme-soft);
}

/* Pages wrapped in .slider-section (Bundle, Cart, Checkout...) painted it light gray (login included). */
.main-wrapper .slider-section,
.dashboard-main-wrapper .slider-section {
    background-color: var(--color-theme-soft);
}

/* The strip behind the footer's download banner (the half above the navy footer) shows the page colour. */
.hpf-bannerwrap::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: var(--f-over);
    background: var(--color-theme-soft);
}

/* ------------------------------------------------------------------
   Footer spacing: every page leaves exactly the same gap (40px) between its content and the footer.
   The gap is a fixed spacer that belongs to the page wrapper, not to the footer. On a page shorter than
   the screen the footer itself grows downward (its navy area), so the gap above it never changes.
   ------------------------------------------------------------------ */
.main-wrapper::after,
.dashboard-main-wrapper::after {
    content: "";
    order: 1;
    flex: 0 0 40px;
}

.main-wrapper > .hpf,
.dashboard-main-wrapper > .hpf {
    order: 2;
    margin-top: 0;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.hpf > .hpf-main {
    flex: 1 0 auto;
}

/* slim footer (logged in): keep its bar at the bottom of the screen */
.hpf--compact > .hpf-main {
    display: flex;
    align-items: flex-end;
}

.hpf--compact > .hpf-main > .hpf-wrap {
    width: 100%;
}

/* On a short page the slim footer keeps just its own height and sits at the bottom of the screen; the leftover space
   becomes page background above it, instead of a tall empty navy block. Only the logged-in (compact) footer: the full
   footer still grows as before. */
.main-wrapper > .hpf--compact,
.dashboard-main-wrapper > .hpf--compact {
    flex: 0 0 auto;
    margin-top: auto;
}
/* Page-level bottom padding that used to add to the gap */
.main-wrapper .cd-page {
    padding-bottom: 0;
}

.cd-page .cd-main {
    padding-bottom: 0;
}

/* Page wrappers and page-level containers add no bottom space of their own, so the 40px spacer above is the whole gap on every page
   (Bundle, Courses, Cart... use .slider-section, which carried 65px of bottom padding plus .pb-3 containers). */
.main-wrapper > .slider-section,
.main-wrapper > .container-fluid,
.dashboard-main-wrapper > .container-fluid,
.dashboard-main-wrapper > .dashboard-content {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.main-wrapper .container.pb-3,
.main-wrapper .container-fluid.pb-3,
.dashboard-main-wrapper .container.pb-3,
.dashboard-main-wrapper .container-fluid.pb-3 {
    padding-bottom: 0 !important;
}

/* ===== Register / OTP / Sign Up pages (Views/Account/Register, OTP, Signup.cshtml) - Login-style card with a tinted top and a 3-step progress strip ===== */
.reg-d4 {
    position: relative;
    overflow: hidden;
    background: var(--color-theme-soft);
}

    .reg-d4 .container-fluid {
        position: relative;
        z-index: 1;
    }

    .reg-d4 .card {
        max-width: 440px;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
        background: var(--color-white);
        border: 1px solid var(--color-theme-border);
        border-radius: 22px;
        box-shadow: 0 20px 44px -26px rgba(var(--color-theme-rgb), .55);
    }

    .reg-d4.reg-d4--wide .card {
        max-width: 640px;
    }

    .reg-d4 .reg-top {
        padding: 22px 28px 18px;
        background: var(--color-bg-soft);
        border-bottom: 1px dashed var(--color-theme-border);
    }

    .reg-d4 .reg-body {
        padding: 24px 28px 26px !important;
    }

    .reg-d4 .reg-title {
        margin: 0;
        text-align: center;
        font-size: var(--fs-20);
        font-weight: 800;
        color: var(--color-theme-dark);
    }

        .reg-d4 .reg-title mark {
            background: none;
            padding: 0;
            color: var(--color-theme);
        }

    .reg-d4 .reg-sub {
        margin: 0 0 20px;
        text-align: center;
        line-height: 1.6;
        font-size: var(--font-size-body);
        color: var(--color-text-secondary);
    }

    /* Progress strip: 1 Email (Register), 2 Verify (OTP), 3 Sign Up */
    .reg-d4 .reg-track {
        display: flex;
        align-items: flex-start;
        margin: 14px 0 0;
        padding: 0;
        list-style: none;
    }

        .reg-d4 .reg-track li {
            position: relative;
            flex: 1;
            text-align: center;
            font-size: var(--font-size-small);
            font-weight: 700;
            color: var(--color-text-muted-3);
        }

            .reg-d4 .reg-track li::before {
                content: "";
                position: absolute;
                top: 13px;
                left: -50%;
                width: 100%;
                height: 3px;
                border-radius: 3px;
                background: var(--color-white);
            }

            .reg-d4 .reg-track li:first-child::before {
                display: none;
            }

            .reg-d4 .reg-track li b {
                position: relative;
                z-index: 1;
                display: grid;
                place-items: center;
                width: 28px;
                height: 28px;
                margin: 0 auto 6px;
                border-radius: 50%;
                font-size: var(--fs-12);
                background: var(--color-white);
                border: 2px solid var(--color-theme-border);
                color: var(--color-text-muted-3);
            }

            .reg-d4 .reg-track li.now {
                color: var(--color-theme-dark);
            }

                .reg-d4 .reg-track li.now b {
                    border-color: var(--color-theme);
                    background: var(--color-theme);
                    color: var(--color-white);
                    box-shadow: 0 0 0 4px rgba(var(--color-theme-rgb), .18);
                }

            .reg-d4 .reg-track li.done b {
                border-color: var(--color-theme);
                background: var(--color-theme-soft);
                color: var(--color-theme);
            }

            .reg-d4 .reg-track li.done::before,
            .reg-d4 .reg-track li.now::before {
                background: var(--color-theme);
            }

    /* Inputs with an icon capsule on the left (same as Login and Forgot PIN) */
    .reg-d4 .reg-input {
        position: relative;
    }

        .reg-d4 .reg-input .form-control {
            height: 46px;
            padding-left: 52px;
            font-size: var(--font-size-input);
            color: var(--color-navy);
            background: var(--color-bg-soft);
            border: 1px solid transparent;
            border-radius: 12px;
            transition: border-color .2s, box-shadow .2s, background-color .2s;
        }

            .reg-d4 .reg-input .form-control:focus {
                background: var(--color-white);
                border-color: var(--color-theme);
                box-shadow: 0 0 0 3px rgba(var(--color-theme-rgb), .15);
            }

        .reg-d4 .reg-input select.form-control {
            padding-right: 36px;
            cursor: pointer;
        }

        .reg-d4 .reg-input .password-input {
            padding-right: 46px;
        }

        .reg-d4 .reg-input .password-addon {
            width: 38px;
            height: 38px;
            margin: 4px 4px 0 0;
            padding: 0;
            display: grid;
            place-items: center;
        }

            .reg-d4 .reg-input .password-addon:hover {
                color: var(--color-theme) !important;
            }

    .reg-d4 .reg-input-icon {
        position: absolute;
        left: 6px;
        top: 6px;
        z-index: 2;
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        background: var(--color-theme-soft);
        color: var(--color-theme);
        font-size: var(--fs-14);
        pointer-events: none;
        transition: background-color .2s;
    }

    .reg-d4 .reg-input:focus-within .reg-input-icon {
        background: var(--color-theme-border);
    }

    /* Submit button: solid pill, same as Login */
    .reg-d4 .reg-btn-wrap .btn {
        background: var(--color-theme) !important;
        border: 0 !important;
        border-radius: 999px !important;
        color: var(--color-white) !important;
        box-shadow: 0 8px 16px -8px rgba(var(--color-theme-rgb), .7);
    }

        .reg-d4 .reg-btn-wrap .btn i {
            margin-left: 6px;
            transition: transform .25s;
        }

        .reg-d4 .reg-btn-wrap .btn:hover i {
            transform: translateX(4px);
        }

    /* OTP: four large code boxes */
    .reg-d4 .reg-otp {
        gap: 12px;
        margin-top: 4px;
    }

        .reg-d4 .reg-otp .pin_digit-input {
            width: 56px;
            height: 60px;
            margin: 0 !important;
            padding: 0;
            font-size: var(--fs-24);
            font-weight: 800;
            color: var(--color-navy);
            background: var(--color-bg-soft);
            border: 1px solid transparent;
            border-radius: 14px !important;
            transition: border-color .2s, box-shadow .2s, background-color .2s;
        }

            .reg-d4 .reg-otp .pin_digit-input:focus {
                background: var(--color-white);
                border-color: var(--color-theme);
                box-shadow: 0 0 0 3px rgba(var(--color-theme-rgb), .15);
            }

    .reg-d4 .reg-secure {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 16px 0 0;
        padding-top: 12px;
        border-top: 1px dashed var(--color-border-dashed);
        font-size: var(--font-size-small);
        color: var(--color-text-secondary);
    }

        .reg-d4 .reg-secure i {
            color: var(--color-theme);
        }

    .reg-d4 .text-danger.error,
    .reg-d4 label.error {
        font-size: var(--font-size-small) !important;
        text-align: left !important;
        font-weight: 500;
        margin-top: 4px;
    }

@media (max-width: 575.98px) {
    .reg-d4 .reg-otp {
        gap: 8px;
    }

        .reg-d4 .reg-otp .pin_digit-input {
            width: 50px;
            height: 56px;
        }
}

@media (max-width: 479.98px) {
    .reg-d4 .reg-top {
        padding: 18px;
    }

    .reg-d4 .reg-body {
        padding: 20px 18px 22px !important;
    }

    .reg-d4 .reg-title {
        font-size: var(--fs-18);
    }
}


/* ======================================================================
   Logged-in layout: header 12 + left sidebar 6 + dashboard 2
   (the Header.cshtml and Navbar.cshtml partials under Views/Shared and the four Dashboard views).
   Rules are prefixed with .dashboard-page so they win over style.css, which loads after this file.
   ====================================================================== */
:root {
    --dash-hd-h: 84px; /* header height; the sidebar logo block uses the same value so the two bottom lines meet */
    --dash-sb-w: 224px;
}

@media (min-width: 1200px) {
    .dashboard-page.dashboard-nav-fixed:has(.dash-sb6) { margin-left: var(--dash-sb-w); }
}

/* ---------- Header 12: theme gradient, photo | name + type over email + phone | org + PIN | button ---------- */
.dashboard-page .dashboard-header {
    height: var(--dash-hd-h);
    padding: 0;
    box-sizing: border-box;
    background: linear-gradient(135deg, var(--color-theme-bright), var(--color-theme) 45%, var(--color-theme-dark));
    border-bottom: 3px solid var(--color-gold);
    box-shadow: none;
    color: var(--color-white);
}

.dashboard-page .dashboard-header > .container {
    max-width: none;
    height: 100%;
    padding: 0 20px;
}

.dashboard-page .dashboard-header__wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    margin: 0;
}

.dashboard-page .dashboard-header__wrap > * { margin: 0; }

.dashboard-page .dashboard-header__user {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.dashboard-page .dashboard-header__user-avatar { flex: 0 0 auto; }

.dashboard-page .dashboard-header__user-avatar img {
    display: block;
    width: 54px;
    height: 54px;
    max-width: unset;
    object-fit: cover;
    border: 3px solid var(--color-white) !important;
    border-radius: 14px;
    background: var(--color-white);
}

.dashboard-page .dashboard-header__user-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    min-width: 0;
}

.dashboard-page .dashboard-header__user-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.dashboard-page .dashboard-header__user-top h5 {
    margin: 0;
    font-size: var(--fs-16);
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-white);
    word-break: break-word;
}

.dashboard-page .dashboard-header__user-type {
    flex: 0 0 auto;
    padding: 3px 11px;
    border-radius: 99px;
    background: var(--color-gold);
    color: var(--color-navy);
    font-size: var(--fs-10);
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.dashboard-page .dashboard-header__user-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    font-size: var(--fs-12);
    color: var(--color-teal-on-dark);
}

.dashboard-page .dashboard-header__user-contact span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    word-break: break-word;
}

.dashboard-page .dashboard-header__user-contact i { font-size: var(--fs-11); }

.dashboard-page .dashboard-header__org {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 0;
    text-align: right;
}

.dashboard-page .dashboard-header__org-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-13);
    font-weight: 600;
    color: var(--color-white);
}

.dashboard-page .dashboard-header__org-pin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border: 1px solid rgba(var(--color-white-rgb), .32);
    border-radius: 99px;
    background: rgba(var(--color-white-rgb), .16);
    font-family: Consolas, Monaco, "Courier New", monospace;
    letter-spacing: .3px;
    font-size: var(--fs-11);
    color: var(--color-white);
}

.dashboard-page .dashboard-header__org-pin i,
.dashboard-page .dashboard-header__org-name i { color: var(--color-gold); font-size: var(--fs-11); }

.dashboard-page .dashboard-header__guest { flex: 1 1 auto; }

/* menu buttons: translucent squares (mobile menu on the left, account menu on the right) */
.dashboard-page .dashboard-header__toggle-menu .toggle-btn,
.dashboard-page .dashboard-header__toggle .btn-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    line-height: 1;
    border: 1px solid rgba(var(--color-white-rgb), .4);
    border-radius: 10px;
    background: rgba(var(--color-white-rgb), .18);
    color: var(--color-white);
    font-size: var(--fs-14);
}

.dashboard-page .dashboard-header__toggle-menu svg * { fill: var(--color-white); }

/* quick access button: keeps the square shape of the header buttons, with a 3x3 dot grid; the corner and centre dots turn gold and grow on hover / while the menu is open */
.dashboard-page .dashboard-header__toggle .qa-dots { width: 18px; height: 18px; fill: var(--color-white); }

.dashboard-page .dashboard-header__toggle .qa-dots circle {
    transition: transform .25s ease, fill .25s ease;
    transform-box: fill-box;
    transform-origin: center;
}

.dashboard-page .dashboard-header__toggle .btn-toggle:hover .qa-dots circle:nth-child(odd),
.dashboard-page .dashboard-header__toggle .btn-toggle:focus-visible .qa-dots circle:nth-child(odd),
.dashboard-page .dashboard-header__toggle .btn-toggle.is-active .qa-dots circle:nth-child(odd) {
    fill: var(--color-gold);
    transform: scale(1.25);
}

.dashboard-page .dashboard-header__toggle .btn-toggle:hover,
.dashboard-page .dashboard-header__toggle .btn-toggle:focus-visible,
.dashboard-page .dashboard-header__toggle .btn-toggle.is-active {
    background-color: rgba(var(--color-white-rgb), .3);
    border-color: var(--color-white);
    color: var(--color-white);
}

@media (max-width: 991px) {
    .dashboard-page .dashboard-header { height: auto; min-height: var(--dash-hd-h); }
    .dashboard-page .dashboard-header > .container { padding: 8px 14px; }
}

@media (max-width: 767px) {
    .dashboard-page .dashboard-header__wrap { flex-wrap: wrap; }
    /* The header wraps on a phone; keep the quick-access button on the right of whatever
       row it lands on instead of stranding it at the left, where its dropdown ran off screen. */
    .dashboard-page .dashboard-header__toggle { margin-left: auto; }
    .dashboard-page .dashboard-header__org { align-items: flex-start; text-align: left; order: 3; flex: 1 0 100%; }
}

/* ---------- Left sidebar 6 (white, lighter teal hover, deep teal selected, white hover/selected text): flat white background, transparent logo block as tall as the header, colorful icons that grow on hover ---------- */
.dashboard-page .dash-sb6 .dashboard-nav__wrapper {
    width: var(--dash-sb-w);
    background: var(--color-white);
    box-shadow: none;
}

.dashboard-page .dash-sb6 .dashboard-nav__header {
    flex: 0 0 auto;
    height: var(--dash-hd-h);
    padding: 0 14px;
    box-sizing: border-box;
}

.dashboard-page .dash-sb6 .dashboard-nav__header > * { margin-right: 12px; }
.dashboard-page .dash-sb6 .dashboard-nav__header > *:last-child { margin-right: 0; }
.dashboard-page .dash-sb6 .dashboard-nav__toggle .toggle-close { color: var(--color-navy); font-size: var(--fs-22); }
.dashboard-page .dash-sb6 .dashboard-nav__header .header-logo { flex: 1 1 auto; min-width: 0; }
.dashboard-page .dash-sb6 .dashboard-nav__header .header-logo a { display: flex; align-items: center; width: 100%; min-width: 0; }

/* transparent logo, scaled down to fit the sidebar (and the header-height block) at every screen size */
.dashboard-page .dash-sb6 .dashboard-nav__header .header-logo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(var(--dash-hd-h) - 24px);
    object-fit: contain;
    object-position: left center;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

.dashboard-page .dash-sb6 .dashboard-nav__content {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

.dashboard-page .dash-sb6 .offcanvas-footer { display: none; }

.dashboard-page .dash-sb6 .dashboard-nav__menu { padding: 0 10px 10px 12px; }

.dashboard-page .dash-sb6 .dashboard-nav__menu-list {
    margin: 0;
    padding: 7px 0;
    border-top: 1px solid rgba(var(--color-navy-rgb), .12);
}

.dashboard-page .dash-sb6 .dashboard-nav__menu-list:first-child { padding-top: 0; border-top: 0; }

.dashboard-page .dash-sb6 .dashboard-nav__menu-list li { position: relative; }

.dashboard-page .dash-sb6 .dashboard-nav__menu-list li a {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 32px;
    padding: 0 10px 0 16px;
    border-radius: 0 8px 8px 0;
    background: none;
    font-size: var(--fs-12);
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--color-text-body);
    transition: background-color .15s ease, color .15s ease;
}

.dashboard-page .dash-sb6 .dashboard-nav__menu-list li a .text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.dashboard-page .dash-sb6 .dashboard-nav__menu-list li a i {
    position: static;
    top: auto;
    left: auto;
    flex: 0 0 15px;
    width: 15px;
    min-width: 15px;
    text-align: center;
    font-size: var(--fs-12);
    color: var(--ic, var(--color-primary));
    transform: none;
    transform-origin: center;
    transition: transform .18s ease;
}

.dashboard-page .dash-sb6 .dashboard-nav__menu-list li a:hover { background: color-mix(in srgb, var(--color-theme) 60%, var(--color-white)); color: var(--color-white); }

/* hover and active share the same effect: the icon grows and turns white with the text */
.dashboard-page .dash-sb6 .dashboard-nav__menu-list li a:hover i,
.dashboard-page .dash-sb6 .dashboard-nav__menu-list li.active a i { transform: scale(1.45); color: var(--color-white); }

.dashboard-page .dash-sb6 .dashboard-nav__menu-list li.active a,
.dashboard-page .dash-sb6 .dashboard-nav__menu-list li.active a:hover {
    background: var(--color-theme-dark);
    color: var(--color-white);
    font-weight: 700;
}

/* shining left border: only on the active item, still (no animation) */
.dashboard-page .dash-sb6 .dashboard-nav__menu-list li.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--color-theme-bright);
    box-shadow: 0 0 9px 2px color-mix(in srgb, var(--color-theme-bright) 75%, transparent);
    z-index: 1;
}

.dashboard-page .dash-sb6 .dashboard-nav__menu-list li a.ic-1 { --ic: var(--color-primary); }
.dashboard-page .dash-sb6 .dashboard-nav__menu-list li a.ic-2 { --ic: var(--color-accent-orange); }
.dashboard-page .dash-sb6 .dashboard-nav__menu-list li a.ic-3 { --ic: var(--color-success); }
.dashboard-page .dash-sb6 .dashboard-nav__menu-list li a.ic-4 { --ic: var(--color-lead); }
.dashboard-page .dash-sb6 .dashboard-nav__menu-list li a.ic-5 { --ic: var(--color-danger); }
.dashboard-page .dash-sb6 .dashboard-nav__menu-list li a.ic-6 { --ic: var(--color-gold-dark); }
.dashboard-page .dash-sb6 .dashboard-nav__menu-list li a.ic-7 { --ic: var(--color-illus-blue-deep); }
.dashboard-page .dash-sb6 .dashboard-nav__menu-list li a.ic-8 { --ic: var(--color-certificate-course); }

/* ---------- Dashboard 2: separate KPI cards (icon + label over the value), clickable ones float on hover ---------- */
.dashboard-page .dashboard-content { padding-top: 14px; }
.dashboard-page .dashboard-content > .container:has(.dashboard-info) { max-width: none; padding: 0 20px; }

.dashboard-page .container:has(.dashboard-info) .dashboard-title {
    margin: 0 0 10px;
    font-size: var(--fs-18);
    font-weight: 700;
    color: var(--color-navy);
}

.dashboard-page .dashboard-info > .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    margin: 0;
    gap: 12px;
}

.dashboard-page .dashboard-info > .row > [class*="col-"] {
    flex: 1 1 130px;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

.dashboard-page .dashboard-info__card-box {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon label" "value value";
    align-items: center;
    gap: 4px 6px;
    height: 100%;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--dx-fg, var(--color-border-card)) 40%, var(--color-white));
    border-radius: 10px;
    background: var(--dx-bg, var(--color-white));
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, border-color .3s ease, background .3s ease;
}

.dashboard-page .dashboard-info__card-icon {
    grid-area: icon;
    position: static;
    width: auto;
    height: auto;
    border: 0;
    background: none;
    font-size: var(--fs-11);
    line-height: 1;
}

.dashboard-page .dashboard-info__card-icon i { position: static; transform: none; }
.dashboard-page .dashboard-info__card-content { display: contents; padding: 0; }

.dashboard-page .dashboard-info__card-heading {
    grid-area: label;
    margin: 0;
    font-size: var(--fs-11);
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-text-muted-3);
}

.dashboard-page .dashboard-info__card-value {
    grid-area: value;
    font-size: var(--fs-20);
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-navy);
}

.dashboard-page .dashboard-info__card-icon.icon-color-01 { color: var(--color-theme); }
.dashboard-page .dashboard-info__card-icon.icon-color-02 { color: var(--color-primary); }
.dashboard-page .dashboard-info__card-icon.icon-color-03 { color: var(--color-success); }
.dashboard-page .dashboard-info__card-icon.icon-color-04 { color: var(--color-gold-dark); }
.dashboard-page .dashboard-info__card-icon.icon-color-05 { color: var(--color-sky); }
.dashboard-page .dashboard-info__card-icon.icon-color-06 { color: var(--color-lead); }

/* tone (border/value colour + soft background) per card colour; needs :has() to read the icon colour */
.dashboard-page .dashboard-info__card-box:has(.icon-color-01) { --dx-fg: var(--color-theme);     --dx-bg: var(--color-theme-soft); }
.dashboard-page .dashboard-info__card-box:has(.icon-color-02) { --dx-fg: var(--color-primary);   --dx-bg: var(--color-primary-soft); }
.dashboard-page .dashboard-info__card-box:has(.icon-color-03) { --dx-fg: var(--color-success);   --dx-bg: var(--color-success-bg-soft); }
.dashboard-page .dashboard-info__card-box:has(.icon-color-04) { --dx-fg: var(--color-gold-dark); --dx-bg: var(--color-gold-soft); }
.dashboard-page .dashboard-info__card-box:has(.icon-color-05) { --dx-fg: var(--color-sky);       --dx-bg: var(--color-sky-soft); }
.dashboard-page .dashboard-info__card-box:has(.icon-color-06) { --dx-fg: var(--color-lead);      --dx-bg: var(--color-bg-panel-tint); }

/* cards that mirror a left sidebar item (.dx-ic-N = that item's .ic-N colour): icon, border/value tone and soft background all take the sidebar icon colour */
.dashboard-page .dashboard-info__card-icon.dx-ic-1 { color: var(--color-primary); }
.dashboard-page .dashboard-info__card-icon.dx-ic-2 { color: var(--color-accent-orange); }
.dashboard-page .dashboard-info__card-icon.dx-ic-3 { color: var(--color-success); }
.dashboard-page .dashboard-info__card-icon.dx-ic-4 { color: var(--color-lead); }
.dashboard-page .dashboard-info__card-icon.dx-ic-5 { color: var(--color-danger); }
.dashboard-page .dashboard-info__card-icon.dx-ic-7 { color: var(--color-illus-blue-deep); }

.dashboard-page .dashboard-info__card-box:has(.dx-ic-1) { --dx-fg: var(--color-primary);          --dx-bg: color-mix(in srgb, var(--dx-fg) 12%, var(--color-white)); }
.dashboard-page .dashboard-info__card-box:has(.dx-ic-2) { --dx-fg: var(--color-accent-orange);    --dx-bg: color-mix(in srgb, var(--dx-fg) 12%, var(--color-white)); }
.dashboard-page .dashboard-info__card-box:has(.dx-ic-3) { --dx-fg: var(--color-success);          --dx-bg: color-mix(in srgb, var(--dx-fg) 12%, var(--color-white)); }
.dashboard-page .dashboard-info__card-box:has(.dx-ic-4) { --dx-fg: var(--color-lead);             --dx-bg: color-mix(in srgb, var(--dx-fg) 12%, var(--color-white)); }
.dashboard-page .dashboard-info__card-box:has(.dx-ic-5) { --dx-fg: var(--color-danger);           --dx-bg: color-mix(in srgb, var(--dx-fg) 12%, var(--color-white)); }
.dashboard-page .dashboard-info__card-box:has(.dx-ic-7) { --dx-fg: var(--color-illus-blue-deep);  --dx-bg: color-mix(in srgb, var(--dx-fg) 12%, var(--color-white)); }

/* linked cards: same hover as the course and category cards - grows a little, lifts off the page,
   border lights up in the card's own tone, layered shadow on the bottom edge only */
.dashboard-page .dashboard-info a.dashboard-info__card-box:hover,
.dashboard-page .dashboard-info a.dashboard-info__card-box:focus-visible {
    position: relative;
    z-index: 5;
    outline: 0;
    transform: translateY(-6px) scale(1.04);
    border-color: var(--dx-fg, var(--color-theme));
    background: var(--dx-bg, var(--color-theme-soft));
    box-shadow: 0 10px 14px -8px color-mix(in srgb, var(--dx-fg, var(--color-theme)) 60%, transparent),
                0 20px 30px -14px color-mix(in srgb, var(--dx-fg, var(--color-theme)) 35%, transparent),
                0 22px 36px -18px rgba(var(--color-navy-rgb), .25);
}

/* the card's content (icon, label, value) never changes on hover, focus, press or any other event -
   only the card itself reacts. Pins the resting look against style.css and bootstrap-theme-fix.css hover rules. */
.dashboard-page .dashboard-info .dashboard-info__card-box .dashboard-info__card-icon,
.dashboard-page .dashboard-info .dashboard-info__card-box:is(:hover, :focus, :focus-visible, :focus-within, :active) .dashboard-info__card-icon {
    transform: none;
    transition: none;
}

.dashboard-page .dashboard-info .dashboard-info__card-box .dashboard-info__card-heading,
.dashboard-page .dashboard-info .dashboard-info__card-box:is(:hover, :focus, :focus-visible, :focus-within, :active) .dashboard-info__card-heading {
    color: var(--color-text-muted-3);
    transition: none;
}

.dashboard-page .dashboard-info .dashboard-info__card-box .dashboard-info__card-value,
.dashboard-page .dashboard-info .dashboard-info__card-box:is(:hover, :focus, :focus-visible, :focus-within, :active) .dashboard-info__card-value {
    color: var(--color-navy);
    transition: none;
}

/* ======================================================================
   P4C PAGER - toolbar (tabs / search / sort / page size) and footer (info + page buttons)
   Used with Scripts/p4cPager.js and Views/Shared/_PagerToolbar.cshtml / _PagerFooter.cshtml.
   Every class starts with p4c- so nothing here can touch DataTables or Bootstrap's .pagination.
   Order, left to right: tabs ... search | sort | page size (page size is always the right-most).
   ====================================================================== */
.p4c-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 16px;
    margin: 1rem 0 1.5rem;
}

/* Under a breadcrumb the breadcrumb's own bottom gap already spaces the toolbar, so its top margin would only stack on it
   (Bundle Courses, Enrolled Courses... for every user type). Pages whose breadcrumb is commented out keep the margin. */
body:has(.page-title-box) .courses-section > .container > .p4c-toolbar:first-child { margin-top: 0; }

.p4c-toolbar__tabs { flex: 1 1 auto; min-width: 0; }
.p4c-toolbar__tabs:empty { display: none; }

/* search | sort | page size always stay together as one group (never split over two lines on a wide screen):
   the group sits on the same line as the tabs when it fits, otherwise it drops as a whole below the tabs. */
.p4c-toolbar__controls {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px 12px;
    min-width: 0;
}

.p4c-field {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    height: 45px;
    padding: 0 14px;
    background: var(--color-white);
    border: 1px solid var(--color-border-pill);
    border-radius: 30px;
    box-shadow: 0 4px 10px rgba(var(--color-black-rgb), .06);
}

.p4c-field label {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-gray);
    white-space: nowrap;
}

.p4c-field select {
    min-width: 0;
    max-width: 100%;
    padding: 4px 10px;
    border: 0;
    border-radius: 20px;
    outline: 0;
    background: var(--color-bg-badge-light);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    transition: background .2s ease;
}

.p4c-field select:focus { background: var(--color-bg-select-focus); }

.p4c-field--search {
    position: relative;
    flex: 1 1 260px;
    min-width: 160px;
    max-width: 420px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.p4c-field--search i {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--color-text-light);
    pointer-events: none;
}

.p4c-field--search input {
    width: 100%;
    height: 45px;
    padding: 0 16px 0 45px;
    border: 1.5px solid var(--color-border-search);
    border-radius: 30px;
    background: var(--color-white);
    transition: border-color .3s ease, box-shadow .3s ease;
}

.p4c-field--search input:focus {
    outline: 0;
    border-color: var(--color-theme);
    box-shadow: 0 4px 12px rgba(var(--color-theme-rgb), .18);
}

.p4c-field:not(.p4c-field--search):focus-within {
    border-color: var(--color-theme);
    box-shadow: 0 4px 12px rgba(var(--color-theme-rgb), .18);
}

.p4c-field--sort, .p4c-field--size { flex: 0 0 auto; }

/* phones: tabs, then search on its own row, then sort and page size sharing the next row */
@media (max-width: 575.98px) {
    .p4c-toolbar__controls { justify-content: stretch; }
    .p4c-field--search { flex: 1 1 100%; max-width: none; }
    .p4c-field--sort { flex: 1 1 0; }
    .p4c-field--sort select { flex: 1 1 auto; }
    .p4c-field--size { flex: 0 0 auto; }
}

/* phones and small tablets: tabs on their own row, then the controls (they may wrap inside their row here) */
@media (max-width: 767.98px) {
    .p4c-toolbar__tabs { flex: 1 1 100%; }
    .p4c-toolbar__controls { flex: 1 1 100%; flex-wrap: wrap; }
    .p4c-field--search { flex: 1 1 220px; }
}

/* mobile: row 1 tabs, row 2 search box, row 3 sort + page size side by side (written after the rule above so it wins) */
@media (max-width: 575.98px) {
    .p4c-toolbar { gap: 10px; }
    .p4c-toolbar__controls { justify-content: stretch; gap: 10px; }
    .p4c-field--search { flex: 1 1 100%; max-width: none; min-width: 0; }
    .p4c-field--sort { flex: 1 1 0; min-width: 0; }
    .p4c-field--sort select { flex: 1 1 auto; min-width: 0; }
    .p4c-field--size { flex: 0 0 auto; margin-left: auto; } /* stays right-most, also on pages with no sort */
}

/* ---- status tabs: folder tabs on a line - the selected tab gets a soft theme fill, its count fills with the theme
   colour, and a theme line slides under it (the line is the .p4c-tabs__ink element the pager keeps between redraws) ---- */
.p4c-tabs {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    gap: 0 6px;
    max-width: 100%;
    overflow-x: auto;
    border-bottom: 1px solid var(--color-theme-border);
    scrollbar-width: none;
}

.p4c-tabs::-webkit-scrollbar { display: none; }

.p4c-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 12px 18px;
    border: 0;
    border-radius: 10px 10px 0 0;
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--color-text-gray);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.p4c-tab b {
    min-width: 24px;
    margin: 0;
    padding: 2px 8px;
    border-radius: 99px;
    background: var(--color-bg-badge-light-2);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    color: var(--color-text-gray);
    transition: background-color .2s ease, color .2s ease;
}

.p4c-tab:hover { background: color-mix(in srgb, var(--color-theme) 6%, var(--color-white)); color: var(--color-theme-dark); }
.p4c-tab.is-active, .p4c-tab.is-active:hover { background: var(--color-theme-soft); color: var(--color-theme-dark); }
.p4c-tab.is-active b { background: var(--color-theme); color: var(--color-white); }
.p4c-tab:focus-visible { outline: 2px solid var(--color-theme); outline-offset: -2px; }

.p4c-tabs__ink {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 5px;
    border-radius: 5px 5px 0 0;
    background: var(--color-theme);
    pointer-events: none;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), width .35s cubic-bezier(.2, .8, .2, 1);
}

/* narrow screens: tighter tabs; if they still do not fit the strip scrolls sideways (the line scrolls with it) */
@media (max-width: 575.98px) {
    .p4c-tab { gap: 6px; padding: 11px 12px; font-size: 14px; }
}

/* ---- footer: info on the left, page buttons centred ---- */
.p4c-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px 12px;
    margin-top: 1.25rem;
}

.p4c-footer__info { font-size: 14px; font-weight: 500; line-height: 1.15; color: var(--color-text-gray); }

.p4c-pager__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }

/* page buttons: bordered white tiles with a soft shadow, so they read clearly against the page colour */
.p4c-pager__link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1.5px solid var(--color-theme-border);
    border-radius: 10px;
    background: var(--color-white);
    box-shadow: 0 2px 6px rgba(var(--color-navy-rgb), .10);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    color: var(--color-theme-dark);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
}

/* previous / next arrows a little larger than the numbers */
.p4c-pager__link[data-p4c-page="prev"],
.p4c-pager__link[data-p4c-page="next"] { font-size: 22px; padding-bottom: 3px; }

.p4c-pager__item:not(.is-active):not(.is-disabled) .p4c-pager__link:hover,
.p4c-pager__item:not(.is-active):not(.is-disabled) .p4c-pager__link:focus-visible {
    border-color: var(--color-theme);
    background: var(--color-theme-soft);
    color: var(--color-theme-dark);
    box-shadow: 0 6px 12px -6px rgba(var(--color-theme-rgb), .55);
    transform: translateY(-2px);
    outline: 0;
}

/* the current page: solid theme colour with a glow */
.p4c-pager__item.is-active .p4c-pager__link {
    border-color: var(--color-theme);
    background: var(--color-theme);
    color: var(--color-white);
    box-shadow: 0 6px 14px -4px rgba(var(--color-theme-rgb), .65);
    cursor: default;
}

/* previous / next that cannot be used: clearly dimmed */
.p4c-pager__item.is-disabled .p4c-pager__link {
    border-color: var(--color-border-pill);
    background: var(--color-bg-badge-light);
    box-shadow: none;
    color: var(--color-text-light);
    opacity: .75;
    pointer-events: none;
    cursor: not-allowed;
}

.is-p4c-loading { opacity: .55; pointer-events: none; transition: opacity .2s ease; }

@media (max-width: 767.98px) {
    .p4c-footer { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

/* ======================================================================
   ENROLLED COURSES (user and organization) - the my-courses-v2 design.
   Cards sit in a CSS grid that fills the width: 1 column on phones, up to 6+ on a TV.
   ====================================================================== */
.ec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
    gap: 1.25rem;
}

.ec-item { min-width: 0; }

.ec-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-border-card);
    border-radius: 18px;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, border-color .3s ease;
}

/* hover is the same as the course cards (Course list): the card grows a little, lifts off the page with a layered
   shadow on its bottom edge, and the border lights up in the theme colour */
.ec-card:hover {
    z-index: 5;
    transform: translateY(-6px) scale(1.04);
    border-color: var(--color-theme);
    box-shadow: 0 10px 14px -8px rgba(var(--color-theme-rgb), .60),
                0 20px 30px -14px rgba(var(--color-theme-rgb), .35),
                0 22px 36px -18px rgba(var(--color-navy-rgb), .25);
}

.ec-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-bg-thumb);
}

.ec-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.ec-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .6rem;
    padding: 1rem 1.1rem 1.15rem;
}

.ec-cat {
    align-self: flex-start;
    max-width: 100%;
    padding: .2rem .6rem;
    overflow: hidden;
    border-radius: 6px;
    background: var(--color-theme-soft);
    color: var(--color-theme-dark);
    font-size: .78rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ec-title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: var(--fs-18);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.01em;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ec-title a { color: var(--color-navy); text-decoration: none; }
.ec-title a:hover { color: var(--color-theme-dark); }

/* progress: label and percentage always share one line */
.ec-prog { margin-top: auto; padding-top: .6rem; }

.ec-prog__top {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .15rem .75rem;
    margin-bottom: .5rem;
    color: var(--color-text-gray);
    font-size: .88rem;
}

.ec-prog__lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-prog__lbl b { color: var(--color-navy); }
.ec-prog__pct { flex: none; font-size: 1.15rem; font-weight: 800; color: var(--color-theme-dark); white-space: nowrap; }
.ec-card.is-done .ec-prog__pct { color: var(--color-success); }
.ec-card.is-new .ec-prog__pct { color: var(--color-text-gray); }

.ec-bar { height: 6px; overflow: hidden; border-radius: 99px; background: var(--color-theme-soft); }
.ec-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--color-theme); transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }
.ec-card.is-done .ec-bar > span { background: var(--color-success); }

.ec-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 26px;
    min-height: 26px;
    padding: 0 .9rem;
    border: 1.5px solid transparent;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.ec-btn--go { border-color: var(--color-theme); background: var(--color-theme); color: var(--color-white); }
.ec-btn--go:hover { border-color: var(--color-theme-dark); background: var(--color-theme-dark); color: var(--color-white); }
.ec-btn--soft { border-color: var(--color-theme-border); background: var(--color-white); color: var(--color-theme-dark); }
.ec-btn--soft:hover { border-color: var(--color-theme); background: var(--color-theme-soft); color: var(--color-theme-dark); }

/* ---- P4C pager: the search box's clear (x) button - soft round badge with a crisp x, fills with the theme colour on hover, pointer cursor.
   The x is drawn with two gradients so every colour can come from the colour variables. ---- */
.p4c-field--search input[type="search"]::-webkit-search-cancel-button {
    --p4c-x: var(--color-theme-dark);
    --p4c-x-bg: var(--color-theme-soft);
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    margin: 0 0 0 8px;
    border: 1px solid var(--color-theme-border);
    border-radius: 50%;
    background-color: var(--p4c-x-bg);
    background-image:
        linear-gradient(45deg, transparent 43%, var(--p4c-x) 43%, var(--p4c-x) 57%, transparent 57%),
        linear-gradient(-45deg, transparent 43%, var(--p4c-x) 43%, var(--p4c-x) 57%, transparent 57%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 9px 9px;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

.p4c-field--search input[type="search"]::-webkit-search-cancel-button:hover {
    --p4c-x: var(--color-white);
    --p4c-x-bg: var(--color-theme);
    border-color: var(--color-theme);
    box-shadow: 0 2px 8px rgba(var(--color-theme-rgb), .35);
    transform: scale(1.1);
}

.p4c-field--search input[type="search"]::-webkit-search-cancel-button:active {
    --p4c-x-bg: var(--color-theme-dark);
    border-color: var(--color-theme-dark);
    transform: scale(.95);
}

.p4c-field--search input[type="search"]::-ms-clear { display: none; }

/* The "no data" wrapper never carries its own spacing - the page's own spacing (toolbar, footer spacer) decides the gaps. */
#noDataAlert {
    margin: 0 !important;
    padding: 0 !important;
}

/* Enrolled course cards: focusing or clicking a card button never changes how it looks - no outline, no ring, no
   colour or position change. (Hover keeps its own look, defined above; a focused/pressed button that is not being
   hovered stays exactly as it rests.) */
.ec-btn:focus,
.ec-btn:focus-visible,
.ec-btn:active {
    outline: 0;
    box-shadow: none;
    transform: none;
}

.ec-btn--go:is(:focus, :focus-visible, :active):not(:hover) {
    border-color: var(--color-theme);
    background: var(--color-theme);
    color: var(--color-white);
}

.ec-btn--soft:is(:focus, :focus-visible, :active):not(:hover) {
    border-color: var(--color-theme-border);
    background: var(--color-white);
    color: var(--color-theme-dark);
}

.ec-btn--go:hover:active {
    border-color: var(--color-theme-dark);
    background: var(--color-theme-dark);
    color: var(--color-white);
}

.ec-btn--soft:hover:active {
    border-color: var(--color-theme);
    background: var(--color-theme-soft);
    color: var(--color-theme-dark);
}


/* ============================================================
   Breadcrumb spacing - one rule for every page that shows a breadcrumb
   (reference: Enrolled Course Details). Same gap above, below, left and right.
   ============================================================ */
.row:has(> [class*="col-"] > .page-title-box) { margin-top: 8px !important; margin-bottom: 0 !important; }
.page-title-box { margin-bottom: 8px; }
.page-title-box .breadcrumb { padding: 4px 0; background: transparent; }
@media (max-width: 575px) {
    .page-title-box { margin-bottom: 6px; }
}

/* ============================================================
   Enrolled Course Details (Views/User/EnrolledCourses/EnrolledCoursesDetails)
   Main card with Curriculum / Overview / Result tabs, sticky summary on the right.
   The Overview section bar and the four section cards follow Views/Course/CourseDetails.cshtml.
   ============================================================ */
.ecd-page { color: var(--color-text-body); font-size: var(--font-size-body); line-height: 1.6; padding-bottom: 48px; }
.ecd-page *, .ecd-page *::before, .ecd-page *::after { box-sizing: border-box; }
.ecd-page h1, .ecd-page h2, .ecd-page p, .ecd-page ul, .ecd-page ol { margin: 0; }
.ecd-page ul, .ecd-page ol { padding: 0; list-style: none; }
.ecd-page a { text-decoration: none; }
.ecd-page :focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }

.ecd-title { padding: 4px 0 4px; font-size: var(--fs-24); font-weight: 600; line-height: 1.2; color: var(--color-navy); }
.ecd-title__accent { color: var(--color-theme); }

.ecd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; margin-top: 4px; align-items: start; }
.ecd-main, .ecd-side, .ecd-pane, .ecd-ov, .ecd-sec { min-width: 0; }
.ecd-main { display: grid; gap: 20px; }

.ecd-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: 18px; box-shadow: 0 1px 2px rgba(var(--color-navy-rgb), .04), 0 18px 40px -26px rgba(var(--color-navy-rgb), .3); }

/* Tabs */
.ecd-tabs { display: flex; overflow: hidden; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-bg-soft); box-shadow: 0 1px 2px rgba(var(--color-navy-rgb), .04), 0 18px 40px -26px rgba(var(--color-navy-rgb), .3); }
.ecd-tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: -1px; padding: 6px 12px; border: 0; border-bottom: 3px solid transparent; background: transparent; font: inherit; font-size: var(--fs-12); font-weight: 700; color: var(--color-text-muted); cursor: pointer; transition: .18s; }
.ecd-tabs button:hover { color: var(--color-theme-dark); }
.ecd-tabs button.active { color: var(--color-theme-dark); background: var(--color-white); border-bottom-color: var(--color-theme); }
.ecd-pane.ecd-card { padding: 22px; }
.ecd-ov.tab-pane.active { display: grid; }
.ecd-ov { grid-template-columns: minmax(0, 1fr); gap: 20px; }

/* Curriculum list (single layer, clickable chapters, exam last) */
.enrolled-curriculum { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.enrolled-curriculum__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 18px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 6px; color: var(--color-text-dark); font-size: var(--fs-12); text-decoration: none; transition: background .2s ease, border-color .2s ease, transform .15s ease; }
.enrolled-curriculum__item:hover { background: var(--color-theme-soft); border-color: var(--color-theme-border); transform: translateX(2px); color: var(--color-theme-dark); text-decoration: none; }
.enrolled-curriculum__title { display: flex; align-items: baseline; gap: 6px; flex: 1 1 auto; min-width: 0; }
.enrolled-curriculum__title > i, .enrolled-curriculum__title > b { flex-shrink: 0; }
.enrolled-curriculum__desc { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
/* Flatten any block-level HTML inside the description */
.enrolled-curriculum__desc :is(p, div, h1, h2, h3, h4, h5, h6, ul, ol, li) { display: inline; margin: 0; padding: 0; }
.enrolled-curriculum__status { flex: 0 0 auto; margin-left: 12px; font-size: var(--fs-13); white-space: nowrap; }
.enrolled-curriculum__done { color: var(--color-success); }
.enrolled-curriculum__play { color: var(--color-theme); }
.chapter-sidebar__item--locked { opacity: .55; cursor: not-allowed; }
.chapter-sidebar__item--locked .chapter-sidebar__icon__locked { color: var(--color-icon-muted); }
.enrolled-curriculum__item.chapter-sidebar__item--locked:hover { background: var(--color-white); border-color: var(--color-border); transform: none; color: var(--color-text-dark); }

/* Overview: section bar + section cards (same rules as Course Details) */
.ecd-ov *, .ecd-ov *::before, .ecd-ov *::after { box-sizing: border-box; }
.ecd-sec { scroll-margin-top: 76px; padding: 26px 28px 28px; border-radius: 20px; box-shadow: 0 1px 2px rgba(var(--color-navy-rgb), .04), 0 18px 40px -22px rgba(var(--color-navy-rgb), .28); }
.ecd-sh { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ecd-sh h2 { font-weight: 600; font-size: var(--fs-16); line-height: 1.2; letter-spacing: -.01em; color: var(--color-navy); }
.ecd-sh-note { margin-left: auto; font-size: var(--fs-12); font-weight: 500; color: var(--color-text-muted-2); }
.ecd-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 12px; background: var(--color-teal-soft); color: var(--color-teal); flex: none; }
.ecd-lead { margin-bottom: 12px; font-size: var(--fs-13); font-weight: 700; font-style: italic; color: var(--color-lead); }
.ecd-rich { overflow-wrap: anywhere; }
.ecd-rich img, .ecd-rich video, .ecd-rich iframe { max-width: 100%; height: auto; border-radius: 12px; }
.ecd-cpd { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.ecd-cpd-detail { flex: 999 1 340px; min-width: 0; }

.ecd-mbar { position: sticky; top: 12px; z-index: 20; min-width: 0; border-radius: 16px; background: var(--color-white); border: 1px solid var(--color-border); box-shadow: 0 1px 2px rgba(var(--color-navy-rgb), .05), 0 14px 28px -18px rgba(var(--color-navy-rgb), .35); }
.ecd-mbar::before { content: ""; position: absolute; left: -1px; right: -1px; top: -13px; height: 12px; background: var(--color-bg-page); }
.ecd-page .ecd-rl { display: flex; flex-direction: row; gap: 4px; padding: 6px 6px 9px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: 15px; }
.ecd-rl::-webkit-scrollbar { display: none; }
.ecd-rl li { flex: none; }
.ecd-ri { display: flex; align-items: center; gap: 12px; min-height: 38px; padding: 0 12px; border-radius: 11px; white-space: nowrap; color: var(--color-text-muted); font-weight: 700; font-size: var(--fs-12); transition: background .15s ease, color .15s ease; }
.ecd-ri:hover { background: var(--color-bg-hover); color: var(--color-navy); }
.ecd-ri.is-done { color: var(--color-primary-dark); }
.ecd-ri.is-active { background: var(--color-primary); color: var(--color-white); }
.ecd-mtrack { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--color-border-track-light); border-radius: 0 0 15px 15px; overflow: hidden; }
.ecd-mfill { height: 100%; background: var(--color-primary); transition: width .2s ease; }

/* Summary card: sticky */
.ecd-side { position: sticky; top: 16px; display: grid; gap: 14px; padding: 0 0 14px; }
.ecd-side > :not(.ecd-media) { margin: 0 14px; }
.ecd-media { position: relative; border-radius: 17px 17px 0 0; overflow: hidden; background: var(--color-navy); aspect-ratio: 16 / 9; max-width: 100%; }
.ecd-media img, .ecd-media video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--color-black); }
.ecd-media__empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--color-black); }
.ecd-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.ecd-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px; border-radius: 999px; font-size: var(--fs-12); font-weight: 600; color: var(--color-theme-dark); background: var(--color-theme-soft); border: 1px solid var(--color-theme-border); }
.ecd-pill i { color: var(--color-theme); }
.ecd-pill--gold { color: var(--color-gold-dark); background: var(--color-gold-soft); border-color: var(--color-gold-soft); }
.ecd-pill--gold i { color: var(--color-gold-dark); }
.ecd-progress { display: flex; align-items: center; gap: 14px; }
.ecd-prog { flex: 1; min-width: 0; margin-top: 0; padding-top: 0; }
.ecd-prog .ec-bar { height: 8px; }
.ecd-prog .ec-prog__lbl { white-space: normal; }
.ecd-prog.is-done .ec-bar > span { background: var(--color-success); }
.ecd-ring { --s: 80px; position: relative; display: grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%; flex: none; background: conic-gradient(var(--color-theme) calc(var(--p) * 1%), var(--color-theme-soft) 0); }
.ecd-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--color-white); }
.ecd-ring b { position: relative; font-size: calc(var(--s) * .26); font-weight: 800; color: var(--color-theme-dark); line-height: 1; }
.ecd-ring b small { display: block; margin-top: 2px; font-size: .55em; font-weight: 700; text-align: center; }
.ecd-ring.is-done { background: conic-gradient(var(--color-success) calc(var(--p) * 1%), var(--color-theme-soft) 0); }
.ecd-ring.is-done b { color: var(--color-success); }
.ecd-ring.is-new b { color: var(--color-text-gray); }
.ecd-side .ecd-action { width: auto; }

@media (min-width: 1600px) {
    .ecd-page.custom-container { max-width: 1480px; padding-left: 24px; padding-right: 24px; }
    .ecd-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 26px; }
}
@media (max-width: 991px) {
    .ecd-grid { grid-template-columns: minmax(0, 1fr); }
    .ecd-side { position: static; order: -1; }
}
@media (max-width: 575px) {
    .ecd-title { padding-bottom: 4px; font-size: var(--fs-20, 20px); }
    .ecd-grid { gap: 14px; }
    .ecd-main { gap: 14px; }
    .ecd-side { padding: 0 0 10px; gap: 10px; }
    .ecd-side > :not(.ecd-media) { margin: 0 10px; }
    .ecd-side .ecd-media { aspect-ratio: 2 / 1; }
    .ecd-progress { gap: 10px; }
    .ecd-ring { --s: 64px; }
    .ecd-ring::before { inset: 7px; }
    .ecd-ring b { font-size: var(--fs-14); }
    .ecd-pill { min-height: 24px; padding: 0 9px; font-size: var(--fs-11); }
    .ecd-tabs button { padding: 5px 6px; font-size: var(--fs-11); gap: 5px; }
    .ecd-pane.ecd-card { padding: 12px; }
    .enrolled-curriculum { gap: 6px; }
    .enrolled-curriculum__item { padding: 10px 12px; font-size: var(--fs-11); }
    .enrolled-curriculum__title { gap: 5px; }
    .enrolled-curriculum__status { margin-left: 6px; font-size: var(--fs-11); }
    .ecd-ov { gap: 14px; }
    .ecd-sec { padding: 16px 14px 18px; }
    .ecd-sh { gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
    .ecd-sh h2 { font-size: var(--fs-14); }
    .ecd-ico { width: 28px; height: 28px; border-radius: 10px; }
    .ecd-ico svg { width: 18px; height: 18px; }
    .ecd-sh-note { flex: 1 1 100%; margin: -4px 0 0 38px; }
    .ecd-ri { min-height: 34px; padding: 0 10px; }
}


/* ============================================================
   Exam result list (Views/User/Exam/ExamResultList.cshtml and Views/Organization/Exam/ExamResultList.cshtml)
   One card per result: tinted header with the pass / fail word and View details, then the obtained / total marks as a
   ring and a bar, date and question count, and the exam name last. Search, sort and paging come from p4cPager.js.
   ============================================================ */
.erl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.erl-list > li { min-width: 0; }
.erl-list a { text-decoration: none; }
.erl-pass { --st: var(--color-success); --st-bg: var(--color-success-bg-soft); }
.erl-fail { --st: var(--color-danger); --st-bg: var(--color-danger-bg-soft); }
.erl { display: flex; flex-direction: column; height: 100%; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; font-size: var(--fs-12); box-shadow: 6px 7px 14px -6px rgba(var(--color-navy-rgb), .32); }
.erl-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; background: var(--st-bg); border-bottom: 2px solid var(--st); }
.erl-st { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); font-weight: 800; color: var(--st); text-transform: uppercase; letter-spacing: .03em; }
.erl-btn.ec-btn { width: auto; height: 26px; padding: 0 10px; font-size: var(--fs-12); font-weight: 700; }
/* All Exam Result List only: the course name sits in a navy band with a gold icon right under the header (navy and gold pair
   with the site footer and stay distinct from the teal View details button and the green / red status colors). */
.erl-course { display: flex; align-items: center; gap: 7px; padding: 6px 10px; background: var(--color-navy); font-size: var(--fs-11); font-weight: 700; color: var(--color-white); line-height: 1.3; }
.erl-course i { flex: none; font-size: var(--fs-11); color: var(--color-gold); }
.erl-course span { min-width: 0; overflow-wrap: anywhere; }
.erl-main { display: flex; align-items: center; gap: 12px; padding: 10px 10px 4px; }
.erl-ring { position: relative; display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: conic-gradient(var(--st) calc(var(--p) * 1%), var(--color-border-track) 0); }
.erl-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--color-white); }
.erl-ring b { position: relative; font-size: var(--fs-10, 10px); font-weight: 800; color: var(--color-navy); }
.erl-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.erl-t { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.erl-t b { font-size: var(--fs-13); font-weight: 800; color: var(--color-navy); }
.erl-t span { font-size: var(--fs-12); font-weight: 500; color: var(--color-text-body); }
.erl-bar { height: 5px; border-radius: 99px; background: var(--color-border-track); overflow: hidden; }
.erl-bar i { display: block; height: 100%; border-radius: 99px; background: var(--st); }
.erl-foot { display: flex; flex-wrap: wrap; gap: 2px 12px; padding: 4px 10px 8px; font-size: var(--fs-11); color: var(--color-text-muted); }
.erl-name { margin-top: auto; padding: 0 10px 9px; font-size: var(--fs-10, 10px); color: var(--color-icon-muted); overflow-wrap: anywhere; }
.ecd-pane .p4c-toolbar, .erl-page .p4c-toolbar { margin-bottom: 16px; }
.ecd-pane .p4c-footer, .erl-page .p4c-footer { margin-top: 16px; }

/* Enrolled Courses lists (user and org): same keyboard / click focus ring as the Enrolled Course Details page. */
.ec-list-page :focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }

/* Enrolled Course Details: a tab with nothing to show keeps only the "No Data Found" panel, without the white card around it. */
.ecd-pane.ecd-card:has(.p4c-nodata):not(:has(.erl-list)) { padding: 0; border: 0; background: transparent; box-shadow: none; }

/* Enrolled Course Details: the sticky section bar is an opaque page-colour strip with the white bar floating inside it,
   so scrolled content never shows through the gap above it or around its rounded corners. */
.ecd-mbar { top: 0; padding: 12px 0 8px; margin: -12px 0 -8px; background: var(--color-bg-page); border: 0; border-radius: 0; box-shadow: none; }
.ecd-mbar::before { display: none; }
.ecd-page .ecd-rl { background: var(--color-white); border: 1px solid var(--color-border); border-radius: 16px; box-shadow: 0 1px 2px rgba(var(--color-navy-rgb), .05), 0 14px 28px -18px rgba(var(--color-navy-rgb), .35); }
.ecd-mtrack { left: 1px; right: 1px; bottom: 9px; }

/* Enrolled course buttons that also carry Bootstrap's .btn (btn w-100 btn-hover-lift btn-height-26px): the theme's .btn loads after
   this file and would flatten them (52px height, 36px padding, transparent background, thin weight). The doubled selectors
   keep the .ec-btn look; the height still comes from .btn-height-26px and the hover lift from .btn-hover-lift. */
.ec-btn.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 .9rem; border: 1.5px solid transparent; border-radius: 8px; font-size: 13px; font-weight: 700; text-decoration: none; }
.ec-btn--go.btn { border-color: var(--color-theme); background-color: var(--color-theme); color: var(--color-white); }
.ec-btn--go.btn:hover,
.ec-btn--go.btn:hover:active { border-color: var(--color-theme-dark); background-color: var(--color-theme-dark); color: var(--color-white); }
.ec-btn--soft.btn { border-color: var(--color-theme-border); background-color: var(--color-white); color: var(--color-theme-dark); }
.ec-btn--soft.btn:hover,
.ec-btn--soft.btn:hover:active { border-color: var(--color-theme); background-color: var(--color-theme-soft); color: var(--color-theme-dark); }
.ec-btn--go.btn:is(:focus, :focus-visible, :active):not(:hover) { border-color: var(--color-theme); background-color: var(--color-theme); color: var(--color-white); }
.ec-btn--soft.btn:is(:focus, :focus-visible, :active):not(:hover) { border-color: var(--color-theme-border); background-color: var(--color-white); color: var(--color-theme-dark); }

/* Exam result cards' View details link also carries .btn: keep its compact size (the .ec-btn.btn rule above would widen the padding and font). */
.erl-btn.ec-btn.btn { width: auto; padding: 0 10px; font-size: var(--fs-12); font-weight: 700; line-height: 1.5; }

/* Enrolled Courses lists (user and organization) only: smaller card text, and the button at the same size as the
   exam and result pages' buttons (12px). Scoped to .ec-list-page so Bundle Courses and the details page keep theirs. */
.ec-list-page .ec-cat { font-size: var(--fs-11); }
.ec-list-page .ec-title { font-size: var(--fs-14); }
.ec-list-page .ec-prog__top { font-size: var(--fs-12); }
.ec-list-page .ec-prog__pct { font-size: var(--fs-14); }
.ec-list-page .ec-card .ec-btn.btn { padding: 0 10px; font-size: var(--fs-12); line-height: 1.5; }

/* The summary card's button carries w-100 (width:100% !important) and also a side margin; take the margin out of the width so it stays inside the card. */
.ecd-side > .ecd-action { width: calc(100% - 28px) !important; }
@media (max-width: 575px) { .ecd-side > .ecd-action { width: calc(100% - 20px) !important; } }

/* Narrow screens: let the main column shrink to the screen instead of growing to the widest thing inside it (the tabs, the
   search / sort / show row, the result cards), which pushed the Result tab and the Overview content off the right edge. */
.ecd-main { grid-template-columns: minmax(0, 1fr); }
.ecd-main > *, .ecd-main .tab-content, .ecd-main .tab-pane, .ecd-pane { min-width: 0; max-width: 100%; }
.erl-list { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
.ecd-pane .p4c-toolbar, .ecd-pane .p4c-footer { min-width: 0; max-width: 100%; }

/* ============================================================
   Enrolled User Course Map (Views/Organization/Admin/Course/EnrolledUserCourseMap/EnrolledUserCourseMap.cshtml)
   One table-style card: teal header strip, a row per user + course bundle (expand chevron, avatar + user, bundle chip,
   course count, Edit / Delete) with the bundle's courses opening under the row. Search, sort and paging come from p4cPager.js.
   The buttons here deliberately do not carry Bootstrap's .btn: that page restyles .btn for its modals.
   ============================================================ */
.ecm-page *, .ecm-page *::before, .ecm-page *::after { box-sizing: border-box; }
.ecm-page :focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.ecm-page a { text-decoration: none; }
.ecm-page ol { margin: 0; padding: 0; list-style: none; }
.ecm-page .p4c-toolbar { margin-bottom: 16px; }
.ecm-page .p4c-footer { margin-top: 16px; }
.ecm-page > .p4c-toolbar { margin-top: .5rem; }
.ecm-page h1 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--fs-18); font-weight: 700; line-height: 1.2; color: var(--color-navy); }
.ecm-hico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--color-theme-soft); color: var(--color-theme); font-size: var(--fs-18); }
.ecm-add.ec-btn { width: auto; padding: 0 14px; font-size: var(--fs-13); }
.ecm-btn.ec-btn { width: auto; padding: 0 10px; font-size: var(--fs-12); font-weight: 700; line-height: 1.5; }
.ecm-del { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 26px; padding: 0 10px; border: 1.5px solid var(--color-danger-border-soft); border-radius: 8px; background-color: var(--color-white); color: var(--color-danger); font-size: var(--fs-12); font-weight: 700; line-height: 1.5; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.ecm-del:hover, .ecm-del:focus { border-color: var(--color-danger); background-color: var(--color-danger); color: var(--color-white); }
.ecm-acts { display: inline-flex; flex-wrap: nowrap; justify-content: flex-end; gap: 6px; }

/* One card per user + bundle, several per row from tablet width up (design: enrolled-map-list-8-deep-theme-green). The courses scroll inside the card. */
.ecm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px; align-items: stretch; }
.ecm-item { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--color-white); border: 1px solid var(--color-success-border-soft); border-radius: 14px; box-shadow: 0 1px 2px rgba(var(--color-navy-rgb), .04);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, border-color .3s ease; }
/* hover = the course card hover of _CourseList.cshtml: lifts, grows a little, theme border, layered theme shadow */
.ecm-item:hover { z-index: 5; transform: translateY(-6px) scale(1.04); border-color: var(--color-theme);
    box-shadow: 0 10px 14px -8px rgba(var(--color-theme-rgb), .60), 0 20px 30px -14px rgba(var(--color-theme-rgb), .35), 0 22px 36px -18px rgba(var(--color-navy-rgb), .25); }
.ecm-hd { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 12px; background: linear-gradient(120deg, var(--color-theme), var(--color-theme-dark)); }
.ecm-hd > div { min-width: 0; }
.ecm-page .ecm-uname { margin: 0; font-size: var(--fs-15); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: var(--color-white); overflow-wrap: anywhere; }
.ecm-bn { display: block; margin-top: 2px; font-size: var(--fs-12); font-weight: 700; color: var(--color-mint); overflow-wrap: anywhere; }
.ecm-cnt { flex: none; margin-left: auto; display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 99px; background: var(--color-success-bg-soft); border: 1px solid var(--color-success-border-soft); color: var(--color-green); font-size: var(--fs-12); font-weight: 800; white-space: nowrap; }
.ecm-body { flex: 1 1 auto; min-height: 0; padding: 0 14px; }
.ecm-scroll { max-height: 124px; padding-right: 6px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--color-scrollbar) transparent; }
.ecm-scroll::-webkit-scrollbar { width: 6px; }
.ecm-scroll::-webkit-scrollbar-track { background: transparent; }
.ecm-scroll::-webkit-scrollbar-thumb { background-color: var(--color-scrollbar); border-radius: 3px; }
.ecm-scroll::-webkit-scrollbar-thumb:hover { background-color: var(--color-scrollbar-hover); }
.ecm-clist { counter-reset: c; display: grid; gap: 4px; }
.ecm-clist li { counter-increment: c; display: flex; align-items: baseline; gap: 10px; padding: 5px 8px; border-radius: 8px; background: var(--color-success-bg-soft); font-size: var(--fs-12); }
.ecm-clist li::before { content: counter(c); flex: none; width: 18px; text-align: center; font-weight: 800; color: var(--color-success); }
.ecm-ccode { flex: none; min-width: 58px; font-weight: 800; color: var(--color-green); }
.ecm-cname { min-width: 0; color: var(--color-text-dark); overflow-wrap: anywhere; }
.ecm-none { font-size: var(--fs-12); font-style: italic; color: var(--color-text-muted); }
.ecm-foot { display: flex; gap: 8px; padding: 10px 14px 14px; margin-top: auto; }
.ecm-foot .ecm-acts { display: flex; width: 100%; gap: 8px; justify-content: stretch; }
.ecm-foot .ecm-btn.ec-btn, .ecm-foot .ecm-del { flex: 1 1 0; width: auto; }
.ecm-foot .ecm-btn.ec-btn { border-color: var(--color-success-border-soft); color: var(--color-green); }
.ecm-foot .ecm-btn.ec-btn:hover { border-color: var(--color-success); background: var(--color-success-bg-soft); color: var(--color-green); }

/* ---- Add / Update User Course Map dialog (#myModal in EnrolledUserCourseMap.cshtml): navy-gold header design.
   Styles only - the markup hooks (em-*) sit on the existing elements and the script is untouched. Every colour comes from color-variables.css. ---- */
#myModal.em-shell {
    --em-hd-bg: linear-gradient(120deg, var(--color-theme), var(--color-theme-dark)); --em-hd-fg: var(--color-white); --em-ico-bg: rgba(var(--color-white-rgb), .12); --em-ico-line: rgba(var(--color-white-rgb), .18); --em-ico-fg: var(--color-gold);
    --em-body-bg: var(--color-bg-soft); --em-ft-bg: var(--color-white); --em-ctl-bg: var(--color-white); --em-radius: 16px; --em-ctl-h: 46px; --em-line: var(--color-border-input);
    --em-accent: var(--color-theme); --em-accent-dark: var(--color-theme-dark); --em-accent-soft: var(--color-theme-soft); --em-accent-line: var(--color-theme-border);
    --em-un-bg: var(--color-gold-soft); --em-un-fg: var(--color-gold-dark); --em-un-line: var(--color-gold);
    --em-as-fg: var(--color-theme-dark); --em-as-line: var(--color-theme);
    font-size: var(--font-size-body); color: var(--color-text-body);
}
#myModal.em-shell *, #myModal.em-shell *::before, #myModal.em-shell *::after { box-sizing: border-box; }
@media (min-width: 768px) { #myModal.em-shell .modal-dialog.modal-lg { max-width: 800px; } }
#myModal.em-shell .modal-content { padding: 0; border: 0; border-radius: var(--em-radius); overflow: hidden; box-shadow: 0 30px 60px -20px rgba(var(--color-navy-rgb), .45); }
/* compact header */
#myModal.em-shell .modal-header { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; margin: 0; padding: 8px 16px; background: var(--em-hd-bg); color: var(--em-hd-fg); border-bottom: 0; }
#myModal.em-shell .modal-header .modal-title { margin: 0; color: inherit; font-size: var(--fs-14); font-weight: 700; line-height: 1.2; }
#myModal.em-shell .em-hico { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--em-ico-bg); border: 1px solid var(--em-ico-line); color: var(--em-ico-fg); font-size: var(--fs-16); }
#myModal.em-shell .modal-header .btn-close { margin: 0; }
#myModal.em-shell .modal-body { padding: 20px; background: var(--em-body-bg); }
#myModal.em-shell .modal-footer { gap: 8px; padding: 12px 20px; background: var(--em-ft-bg); border-top: 1px solid var(--color-border-divider); }
#myModal.em-shell .modal-footer > * { margin: 0 !important; }
#myModal.em-shell .form-label { margin-bottom: 6px; font-size: var(--fs-12); font-weight: 700; color: var(--color-text-dark); }
#myModal.em-shell .form-label span[style] { color: var(--color-gold-dark) !important; }
#myModal.em-shell .alert-light { background: var(--color-white); border: 1px dashed var(--color-border-dashed); border-radius: 10px; font-size: var(--fs-12); color: var(--color-text-muted); }
#myModal.em-shell .form-check-input:focus { border-color: var(--color-theme); box-shadow: 0 0 0 3px rgba(var(--color-theme-rgb), .15); }

/* the User / Course Bundle dropdowns (Select2) */
#myModal.em-shell .select2-container { width: 100% !important; }
#myModal.em-shell .select2-container.select2-container--default .select2-selection--single,
#myModal.em-shell .select2-container.select2-container--default .select2-selection--multiple { min-height: var(--em-ctl-h); border: 1.5px solid var(--em-line); border-radius: 11px; background: var(--em-ctl-bg); color: var(--color-text-dark); cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
#myModal.em-shell .select2-container.select2-container--default .select2-selection--single { position: relative; display: flex; align-items: center; height: var(--em-ctl-h); }
#myModal.em-shell .select2-container--default .select2-selection--single .select2-selection__rendered { flex: 1; padding: 0 44px 0 14px; line-height: normal; font-size: var(--fs-14); font-weight: 600; color: var(--color-text-dark); }
#myModal.em-shell .select2-container--default .select2-selection--single .select2-selection__placeholder { font-weight: 500; color: var(--color-text-muted); }
#myModal.em-shell .select2-container--default .select2-selection--single .select2-selection__arrow { display: none; }
#myModal.em-shell .select2-container--default .select2-selection--single::after { content: ""; position: absolute; top: 50%; right: 14px; margin-top: -2px; border: solid; border-width: 5px 4px 0 4px; border-color: var(--color-text-muted) transparent transparent transparent; pointer-events: none; transition: transform .15s; }
#myModal.em-shell .select2-container.select2-container--default .select2-selection--multiple::after { right: 14px; border-color: var(--color-text-muted) transparent transparent transparent; transition: transform .15s; }
#myModal.em-shell .select2-container--default.select2-container--open .select2-selection--single::after,
#myModal.em-shell .select2-container--default.select2-container--open .select2-selection--multiple::after { transform: rotate(180deg); }
#myModal.em-shell .select2-container--default .select2-selection--single .select2-selection__clear { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); margin: 0; font-size: 18px; font-weight: 700; color: var(--color-text-muted); }
#myModal.em-shell .select2-container--default .select2-selection--single .select2-selection__clear:hover { color: var(--em-accent-dark); }
#myModal.em-shell .select2-container.select2-container--default .select2-selection--multiple { padding: 3px 34px 3px 8px; }
#myModal.em-shell .select2-container.select2-container--default .select2-selection--multiple .select2-selection__rendered { gap: 4px; }
#myModal.em-shell .select2-container.select2-container--default .select2-selection--multiple .select2-selection__choice { height: auto; margin: 2px 0; padding: 3px 10px 3px 6px; border: 1px solid var(--em-accent-line); border-radius: 99px; background: var(--em-accent-soft); font-size: var(--fs-12); font-weight: 700; line-height: 1.4; color: var(--em-accent-dark); }
#myModal.em-shell .select2-container.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { margin: 0 6px 0 0; padding: 0 2px; font-size: 15px; font-weight: 700; color: var(--em-accent); }
#myModal.em-shell .select2-container.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: var(--em-accent-dark); background: transparent; }
#myModal.em-shell .select2-container.select2-container--default .select2-selection--multiple.is-empty::before { left: 14px; font-size: var(--fs-14); font-weight: 500; line-height: var(--em-ctl-h); color: var(--color-text-muted); }
#myModal.em-shell .select2-container.select2-container--default.select2-container--focus .select2-selection--single,
#myModal.em-shell .select2-container.select2-container--default.select2-container--focus .select2-selection--multiple,
#myModal.em-shell .select2-container.select2-container--default.select2-container--open .select2-selection--single,
#myModal.em-shell .select2-container.select2-container--default.select2-container--open .select2-selection--multiple { border-color: var(--color-theme); background: var(--color-white); box-shadow: 0 0 0 3px rgba(var(--color-theme-rgb), .15); outline: 0; }
#myModal.em-shell .select2-container--default.select2-container--disabled .select2-selection--single { opacity: .75; cursor: not-allowed; background: var(--color-bg-hover); }
/* the dropdown list (Select2 appends it inside the dialog) */
#myModal.em-shell .select2-dropdown { z-index: 1080; border: 1px solid var(--em-accent-line); border-radius: 12px; overflow: hidden; background: var(--color-white); box-shadow: 0 22px 40px -18px rgba(var(--color-navy-rgb), .5); font-size: var(--font-size-body); }
#myModal.em-shell .select2-container--default .select2-search--dropdown { padding: 8px; background: var(--color-bg-soft); border-bottom: 1px solid var(--color-border-divider); }
#myModal.em-shell .select2-container--default .select2-search--dropdown .select2-search__field { height: 36px; padding: 0 12px; border: 1px solid var(--em-line); border-radius: 8px; font: inherit; font-size: var(--fs-13); background: var(--color-white); }
#myModal.em-shell .select2-container--default .select2-search--dropdown .select2-search__field:focus { outline: 0; border-color: var(--color-theme); box-shadow: 0 0 0 3px rgba(var(--color-theme-rgb), .15); }
#myModal.em-shell .select2-container--default .select2-results > .select2-results__options { max-height: 260px; overflow-y: auto; padding: 4px; }
#myModal.em-shell .select2-container--default .select2-results__option { padding: 9px 12px; border-radius: 8px; font-size: var(--fs-13); font-weight: 600; color: var(--color-text-dark); }
#myModal.em-shell .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--em-accent-soft); color: var(--em-accent-dark); }
#myModal.em-shell .select2-container--default .select2-results__option[aria-selected=true] { background: var(--em-accent-soft); color: var(--em-accent-dark); font-weight: 800; }
#myModal.em-shell .select2-container--default .select2-results__message { padding: 12px; font-size: var(--fs-12); color: var(--color-text-muted); }

/* the two course lists */
#myModal.em-shell .em-box.card { height: 100%; border: 0; border-top: 3px solid var(--em-un-line); border-radius: 14px; overflow: hidden; background: var(--color-white); box-shadow: 0 1px 2px rgba(var(--color-navy-rgb), .06), 0 10px 22px -14px rgba(var(--color-navy-rgb), .35); }
#myModal.em-shell .em-box--as.card { border-top-color: var(--em-as-line); }
#myModal.em-shell .em-box .card-header { padding: 9px 12px; border-bottom: 0; background: var(--color-white); font-size: var(--fs-12); }
#myModal.em-shell .em-box--un .card-header { color: var(--em-un-fg); }
#myModal.em-shell .em-box--as .card-header { color: var(--em-as-fg); }
#myModal.em-shell .em-box .card-header strong { font-size: var(--fs-13); font-weight: 800; color: inherit; }
#myModal.em-shell .em-box .card-header .form-check-input { margin-top: 0; border-color: currentColor; }
#myModal.em-shell .em-box .card-header .form-check-input:checked, #myModal.em-shell .em-box .card-header .form-check-input:indeterminate { background-color: var(--em-accent); border-color: var(--em-accent); }
#myModal.em-shell .em-box .card-header .form-check-label { font-size: var(--fs-12); font-weight: 600; color: inherit !important; cursor: pointer; }
#myModal.em-shell .em-box .card-header .badge { min-width: 22px; background: var(--color-bg-soft) !important; color: inherit !important; font-size: var(--fs-11); font-weight: 800; }
#myModal.em-shell .em-box .card-body { padding: 8px 10px 10px; }
#myModal.em-shell .em-box hr { display: none; }
#myModal.em-shell .em-q.form-control { height: 34px; padding: 0 12px; border: 1px solid var(--em-line); border-radius: 8px; font-size: var(--fs-12); background: var(--color-bg-soft); box-shadow: none; transition: border-color .2s, box-shadow .2s, background-color .2s; }
#myModal.em-shell .em-q.form-control:focus { background: var(--color-white); border-color: var(--color-theme); box-shadow: 0 0 0 3px rgba(var(--color-theme-rgb), .15); }
#myModal.em-shell #courseAssignPartial .course-item { margin-bottom: 4px !important; padding: .5rem !important; border: 1px solid var(--color-border) !important; border-radius: 8px !important; box-shadow: none; background: var(--color-white); font-size: var(--fs-12); color: var(--color-text-dark); user-select: none; }
#myModal.em-shell #courseAssignPartial .course-item:hover { background: var(--color-bg-soft); }
#myModal.em-shell #courseAssignPartial .course-item.selected, #myModal.em-shell #courseAssignPartial .course-item.selected:hover { background: var(--em-accent-soft) !important; border-color: var(--em-accent) !important; }
/* assign / unassign arrows */
#myModal.em-shell .btn.em-mv { display: grid !important; place-items: center; width: 54px !important; max-width: 54px; height: 32px; margin-inline: auto; padding: 0 !important; line-height: 1 !important; border: 1.5px solid var(--em-accent) !important; border-radius: 8px !important; background: var(--em-accent) !important; color: var(--color-white) !important; font-size: var(--fs-16) !important; }
#myModal.em-shell .btn.em-mv:hover { background: var(--em-accent-dark) !important; border-color: var(--em-accent-dark) !important; }
#myModal.em-shell .btn.em-mv.btnRemove { border-color: var(--em-un-line) !important; background: var(--color-white) !important; color: var(--em-un-fg) !important; }
#myModal.em-shell .btn.em-mv.btnRemove:hover { background: var(--em-un-line) !important; border-color: var(--em-un-line) !important; color: var(--color-navy) !important; }
/* clear (x) in the search fields: the course list's round badge, smaller */
#myModal.em-shell input[type="search"]::-webkit-search-cancel-button { --em-x: var(--color-theme-dark); --em-x-bg: var(--color-theme-soft); -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 16px; height: 16px; margin: 0 0 0 6px; border: 1px solid var(--color-theme-border); border-radius: 50%; background-color: var(--em-x-bg);
    background-image: linear-gradient(45deg, transparent 43%, var(--em-x) 43%, var(--em-x) 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, var(--em-x) 43%, var(--em-x) 57%, transparent 57%);
    background-position: center; background-repeat: no-repeat; background-size: 7px 7px; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, transform .15s ease; }
#myModal.em-shell input[type="search"]::-webkit-search-cancel-button:hover { --em-x: var(--color-white); --em-x-bg: var(--color-theme); border-color: var(--color-theme); transform: scale(1.1); }
/* footer buttons: the site's ec-btn look (the page's own .btn rules are !important, so it is restated here) */
#myModal.em-shell .modal-footer .btn.ec-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; width: auto !important; height: 26px; min-height: 26px; padding: 0 .9rem !important; border: 1.5px solid transparent !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; }
#myModal.em-shell .modal-footer .btn.ec-btn--go { border-color: var(--color-theme) !important; background: var(--color-theme) !important; color: var(--color-white) !important; }
#myModal.em-shell .modal-footer .btn.ec-btn--go:hover { border-color: var(--color-theme-dark) !important; background: var(--color-theme-dark) !important; }
#myModal.em-shell .modal-footer .btn.ec-btn--soft { border-color: var(--color-theme-border) !important; background: var(--color-white) !important; color: var(--color-theme-dark) !important; }
#myModal.em-shell .modal-footer .btn.ec-btn--soft:hover { border-color: var(--color-theme) !important; background: var(--color-theme-soft) !important; }
/* the dialog never grows taller than the window: the body scrolls and the header and footer (Close, Save / Update) stay in view */
#myModal.em-shell .modal-dialog { margin-top: 1.75rem; margin-bottom: 1.75rem; }
#myModal.em-shell .modal-dialog > form { display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
#myModal.em-shell .modal-content { flex: 1 1 auto; min-height: 0; max-height: 100%; }
#myModal.em-shell .modal-header, #myModal.em-shell .modal-footer { flex: 0 0 auto; }
#myModal.em-shell .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* stacked lists (below md): the arrows sit between Unassigned (top) and Assigned (bottom), side by side, and point down (assign) and up (unassign) */
#myModal.em-shell .em-av { display: none; }
@media (max-width: 767.98px) {
    #myModal.em-shell .em-ah { display: none; }
    #myModal.em-shell .em-av { display: block; }
    #myModal.em-shell .col-md-auto { padding-block: 10px; }
    #myModal.em-shell .col-md-auto > div { display: flex; justify-content: center; gap: 10px; }
    #myModal.em-shell .col-md-auto .btn.em-mv { width: 54px !important; margin: 0 !important; }
}

/* ---------- Dashboard header, new layout (designs: header-org-6-icons-pink-blue-mint for the organization roles, header-mass-4-based-on-org-6 for the mass user).
   Organization name with its PIN underneath on the left (not for the mass user); the personal details on the right, where the photo / name opens the
   quick access menu (the .dashboard-menu dropdown, opened by main.js from the .btn-toggle trigger) instead of a separate dots button. ---------- */
.dashboard-page .dashboard-header.dashboard-header--dh {
    background: linear-gradient(120deg, var(--color-theme), var(--color-theme-dark));
}

.dashboard-header--dh .dh-sp { flex: 1 1 auto; }

.dashboard-header--dh .dh-org {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding-left: 14px;
    border-left: 3px solid var(--color-gold);
}

.dashboard-header--dh .dh-orgtxt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.dashboard-header--dh .dh-orgname {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-18);
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-white);
    overflow-wrap: anywhere;
}

.dashboard-header--dh .dh-orgname i { font-size: var(--fs-14); color: var(--color-teal-bright); }

.dashboard-header--dh .dh-pin {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    padding: 2px 12px;
    border: 1px solid rgba(var(--color-white-rgb), .32);
    border-radius: 99px;
    background: rgba(var(--color-white-rgb), .16);
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: var(--fs-12);
    letter-spacing: .3px;
    color: var(--color-white);
}

.dashboard-header--dh .dh-pin i { color: var(--color-illus-pink); }

/* the personal block: the whole thing is the menu trigger. z-index lifts it above the menu's transparent overlay so a second click closes the menu. */
.dashboard-header--dh .dh-user { position: relative; z-index: 1036; flex: 0 1 auto; min-width: 0; }

.dashboard-header--dh .dh-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 100%;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    font: inherit;
    text-align: right;
    color: var(--color-white);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

.dashboard-header--dh .dh-trigger:hover,
.dashboard-header--dh .dh-trigger:focus-visible,
.dashboard-header--dh .dh-trigger.is-active {
    background: rgba(var(--color-white-rgb), .14);
    border-color: rgba(var(--color-white-rgb), .3);
}

.dashboard-header--dh .dh-trigger:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }

.dashboard-header--dh .dh-who { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; min-width: 0; }

.dashboard-header--dh .dh-name { font-size: var(--fs-16); font-weight: 700; line-height: 1.25; color: var(--color-white); overflow-wrap: anywhere; }

.dashboard-header--dh .dh-type {
    padding: 1px 10px;
    border-radius: 99px;
    background: var(--color-gold);
    color: var(--color-navy);
    font-size: var(--fs-10);
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

/* sound preference dropdown (Views/Shared/_HeaderSound.cshtml): same see-through pill look the contact chips had. Selection only, no sound. */
.dashboard-header--dh .dh-snd { position: relative; z-index: 1036; flex: none; }

.dashboard-header--dh .dh-sndbtn {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 12px;
    border: 1px solid rgba(var(--color-white-rgb), .4);
    border-radius: 99px;
    background: rgba(var(--color-white-rgb), .12);
    font: inherit;
    color: var(--color-white);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

.dashboard-header--dh .dh-sndbtn > i.fa-volume-up { font-size: var(--fs-14); color: var(--color-gold); }
.dashboard-header--dh .dh-sndtxt { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; text-align: left; }
.dashboard-header--dh .dh-sndlbl { font-size: var(--fs-10); font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--color-teal-on-dark); }
.dashboard-header--dh .dh-sndval { font-size: var(--fs-13); font-weight: 700; color: var(--color-white); }
.dashboard-header--dh .dh-sndcode { display: none; }
.dashboard-header--dh .dh-sndchev { flex: none; font-size: var(--fs-11); color: var(--color-teal-on-dark); transition: transform .2s ease; }
.dashboard-header--dh .dh-snd.open .dh-sndchev { transform: rotate(180deg); }

.dashboard-header--dh .dh-sndbtn:hover,
.dashboard-header--dh .dh-sndbtn:focus-visible,
.dashboard-header--dh .dh-snd.open .dh-sndbtn { background: rgba(var(--color-white-rgb), .22); border-color: rgba(var(--color-white-rgb), .55); }

.dashboard-header--dh .dh-sndbtn:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }

.dashboard-header--dh .dh-sndlist {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    display: none;
    width: 220px;
    max-width: calc(100vw - 24px);
    margin: 0;
    padding: 8px;
    list-style: none;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(var(--color-navy-rgb), .16);
    color: var(--color-navy);
}

.dashboard-header--dh .dh-snd.open .dh-sndlist { display: block; }
.dashboard-header--dh .dh-sndhead { padding: 6px 12px 4px; font-size: var(--fs-11); font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--color-text-muted); }

.dashboard-header--dh .dh-sndopt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: var(--fs-14);
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-navy);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.dashboard-header--dh .dh-sndopt:hover,
.dashboard-header--dh .dh-sndopt:focus-visible { background: rgba(var(--color-navy-rgb), .06); color: var(--color-theme-dark); outline: 0; }
.dashboard-header--dh .dh-sndopt small { margin-left: auto; font-size: var(--fs-11); font-weight: 600; color: var(--color-text-muted); }
.dashboard-header--dh .dh-sndopt .dh-tick { width: 18px; flex: none; text-align: center; font-size: var(--fs-13); color: var(--color-primary); visibility: hidden; }
.dashboard-header--dh .dh-sndopt[aria-selected="true"] { font-weight: 700; }
.dashboard-header--dh .dh-sndopt[aria-selected="true"] .dh-tick { visibility: visible; }

.dashboard-header--dh .dh-av {
    display: block;
    flex: none;
    width: 52px;
    height: 52px;
    max-width: unset;
    object-fit: cover;
    border: 3px solid var(--color-white) !important;
    border-radius: 14px;
    background: var(--color-white);
}

.dashboard-header--dh .dh-chev { flex: none; font-size: var(--fs-12); color: var(--color-teal-on-dark); transition: transform .2s ease; }
.dashboard-header--dh .dh-trigger.is-active .dh-chev { transform: rotate(180deg); }

@media (max-width: 767px) {
    .dashboard-header--dh .dh-org { order: 3; flex: 1 0 100%; }
    .dashboard-header--dh .dh-sp { display: none; }
    .dashboard-header--dh .dh-user { margin-left: auto; }
    /* the sound pill pushes itself to the right and the user block follows it directly */
    .dashboard-header--dh .dh-snd { margin-left: auto; }
    .dashboard-header--dh .dh-snd ~ .dh-user { margin-left: 0; }
}

@media (max-width: 575px) {
    .dashboard-header--dh .dh-who { display: none; }
    .dashboard-header--dh .dh-sndtxt, .dashboard-header--dh .dh-sndchev { display: none; }
    .dashboard-header--dh .dh-sndbtn { position: relative; padding: 8px 10px; }
    /* icon only: the accent shows as a small GB / US badge on the icon */
    .dashboard-header--dh .dh-sndcode { position: absolute; right: -6px; bottom: -6px; display: block; padding: 1px 6px; border-radius: 99px; background: var(--color-teal-bright); color: var(--color-navy); font-size: var(--fs-10); font-weight: 800; line-height: 1.4; }
}

/* ===== Exam: start modal + running page (Views/User|Organization/Exam/CourseExamDetails.cshtml and CourseExamDetailsPartial.cshtml) =====
   Design: exam-details-10-top-submit-caption-filter-tabs. Every colour comes from color-variables.css.
   .exam-page (added to .dashboard-page by the exam view) makes the page exactly one screen tall from tablet width up, so nothing scrolls
   but the options inside the question card and the question palette; .exam-running (added when Start Exam is pressed) takes the
   left sidebar away and gives the page its full width back. ---- */
.dashboard-page.exam-running { margin-left: 0 !important; }
.dashboard-page.exam-running > #offcanvasDashboard,
.dashboard-page.exam-running > .offcanvas-backdrop,
.dashboard-page.exam-running .dashboard-header__toggle-menu { display: none !important; }

/* -- buttons shared by the modal, the top card and the question card -- */
.ex-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 18px; border: 1.5px solid transparent; border-radius: 10px;
    font-size: var(--fs-14); font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ex-btn:hover { transform: translateY(-1px); text-decoration: none; }
.ex-btn:focus-visible { outline: 3px solid rgba(var(--color-theme-rgb), .35); outline-offset: 2px; }
.ex-btn--go { color: var(--color-white); background: var(--color-theme); border-color: var(--color-theme); box-shadow: 0 8px 16px -10px rgba(var(--color-theme-rgb), .8); }
.ex-btn--go:hover { color: var(--color-white); background: var(--color-theme-dark); border-color: var(--color-theme-dark); }
.ex-btn--ghost { color: var(--color-theme); background: var(--color-white); border-color: var(--color-theme-border); }
.ex-btn--ghost:hover { color: var(--color-theme-dark); background: var(--color-theme-soft); border-color: var(--color-theme); }
.ex-btn--done { color: var(--color-white); background: var(--color-success-cta); border-color: var(--color-success-cta); box-shadow: 0 8px 16px -10px rgba(var(--color-success-cta-rgb), .8); }
.ex-btn--done:hover { color: var(--color-white); background: var(--color-green); border-color: var(--color-green); }
.ex-btn i { font-size: var(--fs-16); line-height: 1; }

/* -- start modal (design: exam-start-modal-8-split-chips-rule-timeline) --
   Teal panel at the left (picture, exam name, course name, the exam time in its own orange card); at the right the four figures as
   coloured chips and the rules as a timeline. Tablet and phone stack the panel above as a band. Colours come from color-variables.css. */
/* the dialog keeps a 16px gutter from the screen edge at every size */
#staticBackdrop .modal-dialog { max-width: 912px; margin: 0 auto; padding: 16px; }
/* The chapter list stays out of sight while the start modal is open. */
body.start-modal-open #offcanvasDashboard { display: none !important; }
body.start-modal-open .dashboard-page { margin-left: 0 !important; }
#staticBackdrop .start-exam-content {
    position: relative; padding: 0; display: grid; grid-template-columns: 270px minmax(0, 1fr); max-height: calc(100vh - 32px);
    overflow: hidden; border: 0; border-radius: 20px; box-shadow: 0 30px 60px -24px rgba(var(--color-navy-rgb), .6);
}
.se-c-time { --c: var(--color-orange-500); --cs: var(--color-bg-card-warm-hover); --cv: var(--color-orange-500); }
.se-c-q { --c: var(--color-sky); --cs: var(--color-sky-soft); --cb: var(--color-sky-border); --cv: var(--color-sky); }
.se-c-w { --c: var(--color-violet-600); --cs: var(--color-bg-violet-pale); --cb: rgba(var(--color-violet-600-rgb), .28); --cv: var(--color-violet-600); }
.se-c-t { --c: var(--color-gold-dark); --cs: var(--color-gold-soft); --cb: var(--color-gold); --cv: var(--color-gold-dark); }
.se-c-p { --c: var(--color-success-cta); --cs: var(--color-success-bg-soft); --cb: var(--color-success-border-soft); --cv: var(--color-green); }
.se-r-1 { --c: var(--color-theme); --cs: var(--color-theme-soft); }
.se-r-2 { --c: var(--color-success-cta); --cs: var(--color-success-bg-soft); }
.se-r-3 { --c: var(--color-orange-500); --cs: var(--color-bg-card-warm-hover); }
.se-r-4 { --c: var(--color-danger); --cs: var(--color-danger-bg-soft); }
.se-r-5 { --c: var(--color-indigo); --cs: var(--color-bg-violet-pale); }

/* the close button; the right side keeps a gap below it (.se-body top padding) so it never touches the figures */
.se-x {
    position: absolute; top: 12px; right: 12px; z-index: 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    font-size: var(--fs-14); line-height: 1; text-decoration: none; color: var(--color-text-secondary);
    background: var(--color-bg-badge-light); border: 1px solid var(--color-border-badge); transition: background-color .15s ease, color .15s ease;
}
.se-x:hover { color: var(--color-heading); background: var(--color-bg-badge-light-2); }

.se-side {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 26px 20px; text-align: center;
    color: var(--color-white); background: linear-gradient(170deg, var(--color-theme-dark), var(--color-theme) 60%, var(--color-theme-bright));
}
.se-pic { width: 76px; height: 76px; padding: 12px; object-fit: contain; border-radius: 50%; background: rgba(var(--color-white-rgb), .94); }
.se-name { margin: 4px 0 0; font-size: var(--fs-16); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; color: var(--color-white); }
.se-course { margin: 0; font-size: var(--fs-12); line-height: 1.4; color: var(--color-teal-on-dark); }
.se-time { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; margin-top: 12px; padding: 12px; border-radius: 14px; color: var(--color-orange-500); background: var(--cs); border: 1px dashed var(--c); }
.se-time > i { font-size: var(--fs-24); }
.se-time > div { text-align: center; }
.se-time .se-l { display: block; font-size: var(--fs-11); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted-3); }
.se-time .se-v { font-size: var(--fs-24); font-weight: 800; line-height: 1.15; color: var(--cv); }

.se-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#staticBackdrop .se-body { flex: 1 1 auto; min-height: 0; padding: 56px 24px 8px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--color-scrollbar) transparent; }
.se-h { margin: 0 0 8px; font-size: var(--fs-12); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted-3); }
.se-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; }
.se-chip { padding: 10px 6px; text-align: center; border-radius: 12px; background: var(--cs); border: 1px solid var(--cb); }
.se-chip > i { display: block; margin-bottom: 3px; font-size: var(--fs-18); color: var(--cv); }
.se-chip .se-l { display: block; font-size: var(--fs-11); line-height: 1.25; color: var(--color-text-body); }
.se-chip .se-v { display: block; margin-top: 2px; font-size: var(--fs-20); font-weight: 800; line-height: 1.1; color: var(--cv); }
.se-rules { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.se-rules li { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 0 0 12px; font-size: var(--fs-13); line-height: 1.45; color: var(--color-text-body); }
.se-rules li:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--color-border-row); }
.se-rules li > i { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; font-size: var(--fs-14); color: var(--color-white); background: var(--c); box-shadow: 0 0 0 4px var(--cs); }
.se-rules li > span { padding-top: 4px; }
#staticBackdrop .se-foot { flex: 0 0 auto; display: flex; justify-content: flex-end; padding: 12px 24px 20px; border: 0; background: var(--color-white); }
.se-start {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 30px; padding: 0 22px; border: 1.5px solid var(--color-theme);
    border-radius: 10px; font-size: var(--fs-13); font-weight: 600; line-height: 1; cursor: pointer; color: var(--color-white); background: var(--color-theme);
    box-shadow: 0 8px 16px -10px rgba(var(--color-theme-rgb), .8); transition: background-color .15s ease, transform .15s ease;
}
.se-start:hover { background: var(--color-theme-dark); border-color: var(--color-theme-dark); transform: translateY(-1px); }
.se-start i { font-size: var(--fs-16); }

@media (max-width: 991px) and (min-width: 768px) { .se-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* tablet and phone: the panel becomes a band on top, the close button sits on it, and the whole dialog scrolls if it is taller than the screen */
@media (max-width: 767px) {
    #staticBackdrop .modal-dialog { max-width: 632px; }
    #staticBackdrop .start-exam-content { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: start; overflow-y: auto; }
    .se-side { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; text-align: left; gap: 4px 14px; padding: 16px 56px 16px 18px; }
    .se-pic { grid-row: 1 / span 2; width: 56px; height: 56px; padding: 8px; }
    .se-name { margin: 0; align-self: end; }
    .se-course { align-self: start; }
    .se-time { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 12px; margin-top: 8px; padding: 8px 12px; }
    .se-time > div { text-align: left; }
    .se-time .se-v { font-size: var(--fs-20); }
    .se-main { overflow: visible; }
    #staticBackdrop .se-body { overflow: visible; padding: 16px 18px 4px; }
    .se-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #staticBackdrop .se-foot { padding: 12px 18px 18px; }
    .se-start { width: 100%; }
    .se-x { color: var(--color-white); background: rgba(var(--color-white-rgb), .16); border-color: rgba(var(--color-white-rgb), .32); }
    .se-x:hover { color: var(--color-white); background: rgba(var(--color-white-rgb), .3); }
}
@media (max-width: 575px) {
    #staticBackdrop .modal-dialog { max-width: none; padding: 12px; }
    #staticBackdrop .start-exam-content { max-height: calc(100vh - 24px); border-radius: 16px; }
}

/* -- running page: top card (title, ring timer, count tiles, Submit) -- */
.ex-page { padding-top: 4px; }
.ex-top {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 20px; margin: 0 0 14px; padding: 10px 16px;
    background: var(--color-white); border: 1px solid var(--color-border); border-radius: 16px; box-shadow: 0 10px 24px -16px rgba(var(--color-navy-rgb), .3);
}
.ex-top__id { min-width: 0; }
.ex-top__id h1 { margin: 0; overflow: hidden; font-size: var(--fs-16); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; color: var(--color-navy); }
.ex-top__id span { font-size: var(--fs-12); font-weight: 600; color: var(--color-text-muted-3); }
.ex-clock { display: flex; align-items: center; gap: 12px; }
/* The ring is the share of time left: --p (0-100) is set every second from the timer, and the state class (is-ok / is-warn / is-crit)
   switches its colour at the same 50% / 20% marks the timer text uses. */
.ex-ring {
    --p: 100; --rc: var(--color-theme);
    position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
    background: conic-gradient(var(--rc) calc(var(--p) * 1%), var(--color-border-row) 0);
}
.ex-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--color-white); }
.ex-ring i { position: relative; font-size: var(--fs-18); line-height: 1; color: var(--rc); }
.ex-ring.is-warn { --rc: var(--color-gold); }
.ex-ring.is-crit { --rc: var(--color-danger); }
.ex-ring.is-crit i { animation: exTimerPulse 1s ease-in-out infinite; }
.ex-clock small { display: block; font-size: var(--fs-11); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted-3); }
#timer { display: block; font-size: var(--fs-24); font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: .02em; transition: color .3s ease; }
/* !important only because the Bootstrap text-* utilities the timer alternates with are themselves !important. */
#timer.timer-normal { color: var(--color-theme-dark) !important; }
#timer.timer-critical { animation: exTimerPulse 1s ease-in-out infinite; }
@keyframes exTimerPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.ex-tiles { display: flex; gap: 10px; }
.ex-tile { min-width: 84px; padding: 6px 12px; text-align: center; border-radius: 12px; background: var(--color-bg-soft); border: 1px solid var(--color-border); }
.ex-tile b { display: block; font-size: var(--fs-18); line-height: 1.2; color: var(--color-heading); }
.ex-tile span { font-size: var(--fs-11); color: var(--color-text-muted-3); }
.ex-tile.is-done { background: var(--color-success-bg-soft); border-color: var(--color-success-border-soft); }
.ex-tile.is-done b { color: var(--color-green); }
.ex-go { display: grid; gap: 2px; text-align: center; }
.ex-go small { font-size: var(--fs-11); color: var(--color-text-muted-3); }
.ex-go small b { color: var(--color-heading); }
.ex-go .ex-btn { height: 42px; padding: 0 26px; }

/* -- running page: question card + question palette -- */
.ex-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: minmax(0, 1fr); gap: 16px; align-items: stretch; height: 100%; min-height: 0; }
.ex-layout > * { min-height: 0; }
.ex-card { overflow: hidden; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 16px; box-shadow: 0 10px 24px -16px rgba(var(--color-navy-rgb), .3); }
.ex-question { display: flex; flex-direction: column; }
.ex-q__head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; background: var(--color-theme-soft); border-bottom: 1px solid var(--color-theme-border); }
.ex-q__no { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-13); font-weight: 700; color: var(--color-theme-dark); }
.ex-q__no b { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; font-size: var(--fs-14); color: var(--color-white); background: var(--color-theme); }
.ex-q__course { overflow: hidden; max-width: 55%; font-size: var(--fs-12); text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-muted-3); }
.ex-q__body { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px 18px 6px; }
.ex-q__text { flex: 1 1 auto; min-width: 0; font-size: var(--fs-16); line-height: 1.65; overflow-wrap: anywhere; color: var(--color-text-dark); }
.ex-q__text p, .ex-q__text div { margin: 0 0 6px; }
.ex-q__hint { flex: 0 0 auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin: 4px 18px 0; padding: 3px 10px; border-radius: 999px; font-size: var(--fs-12); font-weight: 600; color: var(--color-gold-dark); background: var(--color-gold-soft); border: 1px solid var(--color-gold); }
.sound_icon {
    display: inline-grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
    font-size: var(--fs-16); color: var(--color-theme); background: rgba(var(--color-theme-rgb), .2); border: 1px solid var(--color-theme-border);
    transition: color .2s ease, background-color .2s ease;
}
.sound_icon:hover { color: var(--color-white); background: var(--color-theme); }
.ex-opts { flex: 1 1 auto; min-height: 0; display: grid; align-content: start; gap: 10px; padding: 14px 18px 6px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--color-scrollbar) transparent; }
.ex-page .option-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer;
    background: var(--color-white); border: 1.5px solid var(--color-border); border-radius: 12px;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.ex-page .option-item:hover { background: var(--color-bg-soft); border-color: var(--color-theme-border); }
.ex-page .option-item:has(input:checked) { background: var(--color-theme-soft); border-color: var(--color-theme); box-shadow: 0 0 0 3px rgba(var(--color-theme-rgb), .12); }
.ex-page .option-item .form-check-input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--color-theme); }
.ex-page .option-item .form-check-input,
.ex-page .option-item .form-check-input:hover,
.ex-page .option-item .form-check-input:focus { cursor: pointer; }
.ex-page .option-item .form-check-input:checked { background-color: var(--color-theme); border-color: var(--color-theme); }
.ex-opt__letter { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; font-size: var(--fs-13); font-weight: 700; color: var(--color-theme-dark); background: var(--color-theme-soft); border: 1px solid var(--color-theme-border); }
.ex-page .option-item:has(input:checked) .ex-opt__letter { color: var(--color-white); background: var(--color-theme); border-color: var(--color-theme); }
.ex-page .option-item label { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--fs-14); line-height: 1.5; overflow-wrap: anywhere; color: var(--color-text-body); cursor: pointer; }
.ex-page .option-item input:checked ~ label { font-weight: 600; color: var(--color-heading); }
.ex-page .option-image-label { display: block; }
.ex-page .option-image-wrapper { display: inline-block; width: 100%; max-width: 220px; }
.ex-page .option-image { display: block; width: 100%; max-width: 220px; aspect-ratio: 3 / 2; object-fit: contain; border: 1px solid var(--color-border-badge); border-radius: 8px; background: var(--color-bg-badge-light); }
.ex-actions { flex: 0 0 auto; display: flex; gap: 10px; padding: 14px 18px 18px; }
.ex-actions .ex-btn { flex: 1 1 0; }
.ex-empty { padding: 32px 18px; text-align: center; color: var(--color-text-muted-3); }
.ex-empty img { width: 90px; }
.ex-empty h2 { margin: 12px 0 0; font-size: var(--fs-18); color: var(--color-heading); }

.ex-palette { display: flex; flex-direction: column; }
.ex-palette__head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; background: var(--color-theme-soft); border-bottom: 1px solid var(--color-theme-border); }
.ex-palette__title { margin: 0; font-size: var(--fs-14); font-weight: 700; color: var(--color-theme-dark); }
.ex-palette__count { font-size: var(--fs-12); color: var(--color-text-muted-3); }
.ex-tabs { flex: 0 0 auto; display: flex; gap: 6px; padding: 10px 16px 0; }
.ex-tabs button { flex: 1 1 0; height: 30px; border-radius: 999px; font-size: var(--fs-12); font-weight: 700; cursor: pointer; color: var(--color-text-muted-3); background: var(--color-white); border: 1px solid var(--color-border); transition: background-color .15s ease, color .15s ease; }
.ex-tabs button:hover { color: var(--color-theme-dark); border-color: var(--color-theme); }
.ex-tabs button.is-on { color: var(--color-white); background: var(--color-theme); border-color: var(--color-theme); }
.ex-palette__scroll { position: relative; flex: 1 1 auto; min-height: 0; padding: 14px 10px 14px 16px; overflow-y: scroll; scrollbar-width: thin; scrollbar-color: var(--color-scrollbar) transparent; }
.ex-palette__scroll::-webkit-scrollbar { width: 8px; }
.ex-palette__scroll::-webkit-scrollbar-track { background: transparent; }
.ex-palette__scroll::-webkit-scrollbar-thumb { background-color: var(--color-scrollbar); border-radius: 4px; }
.ex-palette__scroll::-webkit-scrollbar-thumb:hover { background-color: var(--color-scrollbar-hover); }
.ex-palette__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; }
.ex-nav-btn {
    height: 40px; padding: 0; border-radius: 10px; font-size: var(--fs-13); font-weight: 700; cursor: pointer;
    color: var(--color-text-muted-3); background: var(--color-white); border: 1.5px solid var(--color-border);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.ex-nav-btn:hover { color: var(--color-theme-dark); border-color: var(--color-theme); transform: translateY(-1px); }
.ex-nav-btn.is-answered { color: var(--color-green); background: var(--color-success-bg-soft); border-color: var(--color-success-border-soft); }
.ex-nav-btn.active { color: var(--color-white); background: var(--color-theme); border-color: var(--color-theme); box-shadow: 0 6px 12px -6px rgba(var(--color-theme-rgb), .8); }
.ex-palette[data-f="done"] .ex-nav-btn:not(.is-answered) { display: none; }
.ex-palette[data-f="left"] .ex-nav-btn.is-answered { display: none; }
.ex-palette__legend { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 16px; border-top: 1px solid var(--color-border-row); background: var(--color-bg-soft); font-size: var(--fs-11); color: var(--color-text-muted-3); }
.ex-palette__legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 3px; vertical-align: -1px; border: 1px solid var(--color-border); background: var(--color-white); }
.ex-palette__legend .is-now { background: var(--color-theme); border-color: var(--color-theme); }
.ex-palette__legend .is-done { background: var(--color-success-bg-soft); border-color: var(--color-success-border-soft); }

/* one screen tall from tablet width up: header, top card, question area and footer share the viewport */
@media (min-width: 768px) {
    .dashboard-page.exam-page { height: 100vh; overflow: hidden; }
    .exam-page .dashboard-main-wrapper { height: 100vh; min-height: 0; overflow: hidden; }
    .exam-page .dashboard-main-wrapper::after { display: none; }
    .exam-page .dashboard-main-wrapper > .ex-page { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; flex-shrink: 1; width: 100%; max-width: 1620px; margin: 0 auto; padding-bottom: 12px !important; }
    .exam-page .ex-page > * { flex: 0 0 auto; }
    .exam-page .ex-page > #test_details_partial { flex: 1 1 0; min-height: 0; }
}
@media (max-width: 1199px) {
    .ex-top { grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px 16px; }
    .ex-top .ex-tiles { grid-column: 1 / -1; order: 5; }
    .ex-top .ex-tile { flex: 1 1 0; }
}
@media (max-width: 991px) {
    .ex-layout { grid-template-columns: minmax(0, 1fr) 220px; gap: 12px; }
    .ex-palette__grid { grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; }
}
@media (max-width: 767px) {
    .ex-top { grid-template-columns: minmax(0, 1fr) auto; }
    .ex-top__id h1 { white-space: normal; }
    .ex-go { grid-column: 1 / -1; order: 6; }
    .ex-go .ex-btn { width: 100%; }
    .ex-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; height: auto; }
    .ex-palette { max-height: 320px; }
}
@media (max-width: 575px) {
    .ex-q__course { display: none; }
    .ex-q__body { padding: 14px 14px 4px; }
    .ex-q__text { font-size: var(--fs-14); }
    .ex-q__hint { margin-left: 14px; }
    .ex-opts { padding: 12px 14px 4px; }
    .ex-actions { padding: 12px 14px 16px; }
    .ex-actions .ex-btn { padding: 0 12px; }
    .ex-page .option-image-wrapper, .ex-page .option-image { max-width: 180px; }
}
/* short screens (laptops): tighter spacing so the question still fits without a page scroller */
@media (min-width: 768px) and (max-height: 760px) {
    .exam-page .ex-page > .row:first-child { display: none; }
    .ex-page { padding-top: 10px; }
    .ex-top { margin-bottom: 10px; padding: 6px 14px; }
    .ex-ring { width: 46px; height: 46px; }
    .ex-ring::before { inset: 5px; }
    #timer { font-size: var(--fs-20); }
    .ex-tile { padding: 3px 10px; }
    .ex-tile b { font-size: var(--fs-16); }
    .ex-tile span { font-size: var(--fs-10); }
    .ex-go small { display: none; }
    .ex-go .ex-btn { height: 36px; }
    .ex-q__head { padding: 8px 16px; }
    .ex-q__body { padding: 12px 16px 4px; }
    .ex-opts { gap: 8px; padding: 10px 16px 4px; }
    .ex-page .option-item { padding: 8px 12px; }
    .ex-actions { padding: 10px 16px 14px; }
    .ex-actions .ex-btn { height: 36px; }
}
@media (min-width: 1600px) {
    .ex-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; }
    .ex-q__text { font-size: var(--fs-18); }
    .ex-page .option-item label { font-size: var(--fs-16); }
}

/* ===== Profile pages (User, Admin, Carer, Office Staff and Organization profile): photo band design (design: profiles-1c-soft-gray) ===== */
.upf-card { overflow: hidden; background: var(--color-white); border: 1px solid var(--color-border-card); border-radius: 14px; box-shadow: 0 2px 8px rgba(var(--color-heading-rgb), .05); }
.upf-id { display: flex; align-items: center; gap: 18px; padding: 22px 28px; background: var(--color-bg-chip); border-bottom: 1px solid var(--color-border); }
.upf-av { position: relative; width: 104px; height: 104px; flex: 0 0 auto; }
.upf-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: var(--color-bg-avatar); border: 4px solid var(--color-white); box-shadow: 0 0 0 1px var(--color-theme-border), 0 6px 18px -8px rgba(var(--color-navy-rgb), .35); cursor: pointer; }
.upf-av-btns { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.upf-av-btn { position: absolute; width: 26px; height: 26px; padding: 0; display: flex; align-items: center; justify-content: center; margin: -13px 0 0 -13px; border-radius: 50%; font-size: var(--fs-12); cursor: pointer; pointer-events: auto; box-shadow: 0 2px 6px rgba(var(--color-black-rgb), .18); }
.upf-av-btn.cam { left: 85.4%; top: 85.4%; margin-left: -27px; border: 2px solid var(--color-border-badge); background: var(--color-bg-badge-light); color: var(--color-primary); }
.upf-av-btn.del { left: 85.4%; top: 85.4%; margin-left: 1px; border: 2px solid var(--color-danger); background: var(--color-danger); color: var(--color-white); }
.upf-who { min-width: 0; }
.upf-who h1 { margin: 0; font-size: var(--fs-22); font-weight: 700; color: var(--color-title-dark); overflow-wrap: anywhere; }
.upf-who p { margin: 2px 0 0; font-size: var(--font-size-small); color: var(--color-text-muted-3); overflow-wrap: anywhere; }
.upf-body { padding: 24px 28px 28px; }
.upf-sec { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-14); font-weight: 700; color: var(--color-theme-dark); }
.upf-sec i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font-size: var(--fs-13); color: var(--color-theme); background: var(--color-theme-soft); }
.upf-box { position: relative; border: 1.5px solid var(--color-theme-border); border-radius: 12px; padding: 24px 18px 18px; margin-top: 28px; }
.upf-box:first-child { margin-top: 14px; }
.upf-box .upf-sec { position: absolute; top: -15px; left: 14px; padding: 0 10px; background: var(--color-white); }
.upf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.upf-f { min-width: 0; }
.upf-f label { display: block; margin: 0 0 5px; font-size: var(--font-size-small); font-weight: 600; color: var(--color-text-muted); }
.upf-in { position: relative; }
.upf-in > i { position: absolute; left: 0; top: 0; width: 34px; height: 38px; display: grid; place-items: center; font-size: var(--fs-13); color: var(--color-theme); pointer-events: none; z-index: 1; }
.upf-f .form-control { height: 38px; padding: 0 12px 0 34px; border: 1px solid var(--color-border-input); border-radius: 10px; font-size: var(--font-size-input); color: var(--color-text-dark); background-color: var(--color-white); box-shadow: none; transition: border-color .2s, box-shadow .2s; }
.upf-f textarea.form-control { height: auto; min-height: 38px; padding-top: 9px; padding-bottom: 9px; resize: none; }
.upf-f .form-control:focus { border-color: var(--color-theme); box-shadow: 0 0 0 3px rgba(var(--color-theme-rgb), .15); }
.upf-f .form-control:disabled { background-color: var(--color-bg-input-disabled); color: var(--color-text-gray-3); cursor: not-allowed; }
/* full-width field in the two-column grid, and select2 dressed like the other .upf-in fields (Organization Profile) */
.upf-f.full { grid-column: 1 / -1; }
.upf-in .select2-container { width: 100% !important; }
.upf-in .select2-container--default .select2-selection--single { height: 38px; border: 1px solid var(--color-border-input); border-radius: 10px; background-color: var(--color-white); transition: border-color .2s, box-shadow .2s; }
.upf-in .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; padding-left: 34px; padding-right: 28px; font-size: var(--font-size-input); color: var(--color-text-dark); }
.upf-in .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
.upf-in .select2-container--default.select2-container--focus .select2-selection--single,
.upf-in .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--color-theme); box-shadow: 0 0 0 3px rgba(var(--color-theme-rgb), .15); }
.upf-in .select2-container--default.select2-container--disabled .select2-selection--single { background-color: var(--color-bg-input-disabled); cursor: not-allowed; }
.upf-in .select2-container--default.select2-container--disabled .select2-selection__rendered { color: var(--color-text-gray-3); }
.upf-foot { margin-top: 26px; }
.upf-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 30px; border: 0; border-radius: 10px; font-size: var(--font-size-button); font-weight: 700; color: var(--color-white); background: var(--color-theme); transition: transform .2s, box-shadow .2s; }
.upf-btn:hover:not(:disabled) { color: var(--color-white); transform: translateY(-2px); box-shadow: 0 10px 18px -10px rgba(var(--color-theme-rgb), .8); }
@media (max-width: 640px) { .upf-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .upf-id { flex-direction: column; align-items: flex-start; padding: 18px; } .upf-body { padding: 20px 18px 22px; } }
/* validation messages: same size as the Forgot PIN page */
.upf-card .text-danger.error, .upf-card .image-error { font-size: var(--fs-12) !important; text-align: left !important; font-weight: 500; margin-top: 4px; }
/* keep the Update label visible after submit (the validator adds d-none to .btn-text and disables the button) */
.upf-btn .btn-text.d-none { display: inline !important; }
.upf-btn:disabled { opacity: .7; cursor: not-allowed; }

/* ===== User chapter sidebar (Views/Shared/User/ChapterSidebar.cshtml): timeline design.
   Same width, flat white background and logo block as the dashboard sidebar (.dash-sb6) ===== */
.dash-sb6.chapter-sidebar .dashboard-nav__wrapper { overflow: hidden; }
.dash-sb6.chapter-sidebar .chapter-sidebar__progress { flex: 0 0 auto; padding: 12px 16px 14px; }
.dash-sb6.chapter-sidebar .chapter-sidebar__progress-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: var(--font-size-small); color: var(--color-navy); }
.dash-sb6.chapter-sidebar .chapter-sidebar__progress-label { font-size: var(--font-size-caption); font-weight: 800; letter-spacing: .3px; color: var(--color-navy); }
.dash-sb6.chapter-sidebar .chapter-sidebar__progress-count { font-weight: 600; color: var(--color-navy); }
.dash-sb6.chapter-sidebar .chapter-sidebar__progress-bar { height: 6px; border-radius: 3px; overflow: hidden; background: var(--color-border-track-light); }
.dash-sb6.chapter-sidebar .chapter-sidebar__progress-fill { height: 100%; border-radius: 3px; background: var(--color-theme); transition: width .6s ease; }
.dash-sb6.chapter-sidebar .chapter-sidebar__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--color-scrollbar) transparent; }
.dash-sb6.chapter-sidebar .chapter-sidebar__list { position: relative; margin: 0; padding: 6px 12px 12px 26px; list-style: none; }
.dash-sb6.chapter-sidebar .chapter-sidebar__list-item { position: relative; }
.dash-sb6.chapter-sidebar .chapter-sidebar__list-item::before { content: ""; position: absolute; left: 9px; top: 0; bottom: 0; width: 2px; background: rgba(var(--color-theme-rgb), .35); }
.dash-sb6.chapter-sidebar .chapter-sidebar__list-item:first-child::before { top: 17px; }
.dash-sb6.chapter-sidebar .chapter-sidebar__list-item:last-child::before { bottom: calc(100% - 17px); }
.dash-sb6.chapter-sidebar .chapter-sidebar__list-item.is-done::before { background: var(--color-theme); }
.dash-sb6.chapter-sidebar .chapter-sidebar__item { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 7px 8px 7px 0; text-decoration: none; color: var(--color-navy); }
.dash-sb6.chapter-sidebar .chapter-sidebar__item:hover, .dash-sb6.chapter-sidebar .chapter-sidebar__item:focus { color: var(--color-text-body); text-decoration: none; }
.dash-sb6.chapter-sidebar .chapter-sidebar__icon { position: relative; z-index: 1; flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: var(--fs-10); font-weight: 800; line-height: 1; background: var(--color-white); border: 2px solid var(--color-theme); color: var(--color-theme); }
.dash-sb6.chapter-sidebar .chapter-sidebar__text { flex: 1 1 auto; min-width: 0; padding-top: 1px; font-size: var(--font-size-small); font-weight: 600; line-height: 1.4; word-break: break-word; color: var(--color-text-body); }
.dash-sb6.chapter-sidebar .chapter-sidebar__item--done .chapter-sidebar__icon { background: var(--color-theme); color: var(--color-white); }
.dash-sb6.chapter-sidebar .chapter-sidebar__list-item.is-active .chapter-sidebar__icon { background: var(--color-theme-dark); border-color: var(--color-theme-dark); color: var(--color-white); box-shadow: 0 0 0 4px rgba(var(--color-white-rgb), .75); }
.dash-sb6.chapter-sidebar .chapter-sidebar__list-item.is-active .chapter-sidebar__text { font-weight: 800; color: var(--color-white); }
.dash-sb6.chapter-sidebar .chapter-sidebar__item--locked .chapter-sidebar__icon { border-color: var(--color-icon-muted); color: var(--color-icon-muted); }
.dash-sb6.chapter-sidebar .chapter-sidebar__list-item--exam .chapter-sidebar__text { font-weight: 800; }
.dash-sb6.chapter-sidebar .chapter-sidebar__empty { padding: 16px 18px; font-size: var(--font-size-small); color: var(--color-text-muted); }
.dash-sb6.chapter-sidebar .chapter-sidebar__footer { flex: 0 0 auto; padding: 10px 12px 12px; border-top: 1px solid var(--color-border-row); }
.dash-sb6.chapter-sidebar .chapter-sidebar__back { display: flex; align-items: center; justify-content: center; gap: 8px; height: 30px; border-radius: 10px; font-size: var(--font-size-small); font-weight: 700; text-decoration: none; color: var(--color-theme-dark); background: var(--color-theme-soft); }
.dash-sb6.chapter-sidebar .chapter-sidebar__back:hover, .dash-sb6.chapter-sidebar .chapter-sidebar__back:focus { color: var(--color-theme-dark); text-decoration: none; background: var(--color-theme-border); }
/* selected chapter / exam: same row highlight as the dashboard Navbar (translucent background + shining left border) */
.dash-sb6.chapter-sidebar .chapter-sidebar__list-item.is-active .chapter-sidebar__item { margin: 0 -2px 0 -14px; padding: 7px 8px 7px 14px; border-radius: 0 8px 8px 0; background: var(--color-theme-dark); }
.dash-sb6.chapter-sidebar .chapter-sidebar__list-item.is-active .chapter-sidebar__item::before { content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px; border-radius: 0 3px 3px 0; background: var(--color-theme-bright); box-shadow: 0 0 9px 2px color-mix(in srgb, var(--color-theme-bright) 75%, transparent); }
.dash-sb6.chapter-sidebar .chapter-sidebar__list-item:not(.is-active) .chapter-sidebar__item:not(.chapter-sidebar__item--locked):hover { margin: 0 -2px 0 -14px; padding: 7px 8px 7px 14px; border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--color-theme) 60%, var(--color-white)); }
.dash-sb6.chapter-sidebar .chapter-sidebar__list-item:not(.is-active) .chapter-sidebar__item:not(.chapter-sidebar__item--locked):hover .chapter-sidebar__text { color: var(--color-white); }

/* ============================================================
   My Certificates (Views/User/Exam/CertificateList.cshtml)
   Card list like the Result list: course name, score, completed date, CPD in that order of prominence,
   with preview and download icon buttons in the header's top right corner. Compact spacing; date and CPD share a row.
   ============================================================ */
.crl-page .p4c-toolbar { margin-bottom: 16px; }
.crl-page .p4c-footer { margin-top: 16px; }
.crl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.crl-list > li { min-width: 0; }
.crl-list a { text-decoration: none; }
.crl { display: flex; flex-direction: column; height: 100%; background: var(--color-white); border: 1px solid var(--color-theme-border); border-radius: 12px; overflow: hidden; font-size: var(--fs-12); box-shadow: 6px 7px 14px -6px rgba(var(--color-navy-rgb), .25); }
.crl-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 8px 10px 7px; background: var(--color-theme-soft); border-bottom: 2px solid var(--color-theme); }
.crl-name { min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-13); font-weight: 800; line-height: 1.3; color: var(--color-navy); }
.crl-acts { display: inline-flex; flex: none; gap: 6px; }
.crl-ic { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: var(--color-white); font-size: var(--fs-12); line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; }
.crl-ic:hover { transform: translateY(-1px); }
.crl-ic--view { border-color: rgba(var(--color-primary-rgb), .35); color: var(--color-primary); }
.crl-ic--view:hover { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-white); }
.crl-ic--dl { border-color: var(--color-success-border-soft); color: var(--color-success); }
.crl-ic--dl:hover { border-color: var(--color-success); background: var(--color-success); color: var(--color-white); }
/* While its loader runs the button is disabled; keep the green face so the white dots show. */
.crl-ic--dl:disabled { border-color: var(--color-success); background: var(--color-success); color: var(--color-white); }
.crl-body { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 8px 10px 9px; background: linear-gradient(180deg, var(--color-white) 0%, rgba(var(--color-theme-rgb), .07) 100%); }
.crl-lbl { display: block; margin-bottom: 1px; font-size: var(--fs-10, 10px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-gold-dark); }
.crl-score { font-size: var(--fs-16); font-weight: 800; line-height: 1; letter-spacing: -.01em; color: var(--color-theme); }
.crl-score small { margin-left: 1px; font-size: .5em; font-weight: 700; letter-spacing: 0; }
.crl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: auto; }
.crl-date { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 99px; background: var(--color-primary-soft); font-size: var(--fs-11); font-weight: 600; color: var(--color-primary-dark); }
.crl-date i { color: var(--color-primary); }
.crl-cpd { padding: 1px 9px; border: 1px solid var(--color-theme-border); border-radius: 99px; background: var(--color-theme-soft); font-size: var(--fs-10, 10px); font-weight: 500; color: var(--color-theme-dark); }
.crl-cpd b { font-weight: 700; }
/* Off-screen stand-in the download draws the certificate in at its native 1123x794 size. */
.crl-stage { position: fixed; left: -99999px; top: 0; }

/* ============================================================
   All Exam Result List (Views/User|Organization/Exam/AllExamResultList.cshtml)
   One card per course: name, Passed chip (only when a record passed), record count and a See all records button
   that opens the course's own Exam Result List page.
   ============================================================ */
.erc-page .p4c-toolbar { margin-bottom: 16px; }
.erc-page .p4c-footer { margin-top: 16px; }
.erc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.erc-list > li { min-width: 0; }
.erc-list a { text-decoration: none; }
.erc { display: flex; flex-direction: column; height: 100%; background: var(--color-white); border: 1px solid var(--color-border); border-left: 5px solid var(--st); border-radius: 12px; overflow: hidden; font-size: var(--fs-12); box-shadow: 6px 7px 14px -6px rgba(var(--color-navy-rgb), .25); }
.erc-pass { --st: var(--color-success); --st-bg: var(--color-success-bg-soft); --st-line: var(--color-success-border-soft); }
.erc-none { --st: var(--color-border); }
.erc-in { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 11px; }
.erc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.erc-name { min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-14); font-weight: 800; line-height: 1.3; color: var(--color-navy); }
.erc-chip { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--st-line); border-radius: 99px; background: var(--st-bg); font-size: var(--fs-11); font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--st); }
.erc-sum { font-size: var(--fs-11); color: var(--color-text-muted); }
.erc-acts { margin-top: auto; padding-top: 4px; }
.erc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 12px; border: 1.5px solid var(--color-theme); border-radius: 99px; background: var(--color-theme); color: var(--color-white); font-size: var(--fs-12); font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; }
.erc-btn:hover { border-color: var(--color-theme-dark); background: var(--color-theme-dark); color: var(--color-white); transform: translateY(-1px); }
.erc-btn i { font-size: var(--fs-11); transition: transform .15s ease; }
.erc-btn:hover i { transform: translateX(2px); }
/* Exam button: the lift and the darker overlay come from .btn-hover-lift, so .erc-btn keeps its own colours on hover. */
.erc-btn--exam:hover { border-color: var(--color-theme); background: var(--color-theme); }
/* Exam button: the icon stays put on hover, focus and press. */
.erc-btn--exam i,
.erc-btn--exam:hover i,
.erc-btn--exam:focus i,
.erc-btn--exam:active i { transform: none; transition: none; }

/* A course's own Exam Result List page: course name and a link back to the course list above the toolbar. */
.erl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 14px; }
.erl-head h1 { margin: 0; font-size: var(--fs-20); font-weight: 800; line-height: 1.25; color: var(--color-navy); }
/* Result tab: the single course card above the records. */
.erc-list--one { grid-template-columns: minmax(0, 360px); margin-bottom: 16px; }

/* ============================================================
   Settings - Change Password (Views/User/Settings/Settings.cshtml)
   Same card as the Login / Forgot PIN / Forgot Password pages, split in two: password rules on the left, form on the right.
   ============================================================ */
.cp-page { color: var(--color-text-body); }
.cp-page *, .cp-page *::before, .cp-page *::after { box-sizing: border-box; }
.cp-card { max-width: 860px; margin: 24px auto 0; overflow: hidden; background: var(--color-white); border: 1px solid var(--color-theme-border); border-radius: 22px; box-shadow: 0 20px 44px -26px rgba(var(--color-theme-rgb), .55); }
.cp-split { display: grid; grid-template-columns: 5fr 7fr; }
.cp-aside { padding: 28px 26px; background: var(--color-bg-soft); border-right: 1px dashed var(--color-theme-border); }
.cp-body { padding: 24px 28px 26px; }
.cp-big { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 16px; background: var(--color-theme-soft); border: 1px solid var(--color-theme-border); color: var(--color-theme); font-size: var(--fs-24); }
.cp-title { margin: 0 0 10px; font-size: var(--fs-20); font-weight: 800; color: var(--color-theme-dark); }
.cp-title mark { background: none; padding: 0; color: var(--color-theme); }
.cp-sub { margin: 0 0 16px; line-height: 1.6; font-size: var(--font-size-body); color: var(--color-text-secondary); }
.cp-rules { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cp-rules li { display: flex; align-items: center; gap: 10px; font-size: var(--font-size-small); font-weight: 600; color: var(--color-text-muted-3); transition: color .2s; }
.cp-rules li i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color-white); border: 2px solid var(--color-theme-border); font-size: 10px; color: transparent; transition: all .2s; }
.cp-rules li.ok { color: var(--color-theme-dark); }
.cp-rules li.ok i { background: var(--color-theme); border-color: var(--color-theme); color: var(--color-white); }
.cp-label { display: block; margin-bottom: 6px; font-size: var(--font-size-body); font-weight: 600; color: var(--color-text-dark); }
.cp-label span { color: var(--color-danger); }
.cp-field { margin-bottom: 16px; }
.cp-input { position: relative; }
.cp-input .form-control { height: 46px; padding-left: 52px; padding-right: 46px; font-size: var(--font-size-input); color: var(--color-navy); background: var(--color-bg-soft); border: 1px solid transparent; border-radius: 12px; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.cp-input .form-control:focus { background: var(--color-white); border-color: var(--color-theme); box-shadow: 0 0 0 3px rgba(var(--color-theme-rgb), .15); }
.cp-ico { position: absolute; left: 6px; top: 6px; z-index: 2; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--color-theme-soft); color: var(--color-theme); font-size: var(--fs-14); pointer-events: none; transition: background-color .2s; }
.cp-input:focus-within .cp-ico { background: var(--color-theme-border); }
.cp-eye { position: absolute; right: 6px; top: 6px; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--color-text-muted); font-size: var(--fs-14); cursor: pointer; transition: background-color .2s, color .2s; }
.cp-eye:hover { background: var(--color-theme-soft); color: var(--color-theme-dark); }
.cp-match { margin-top: 6px; min-height: 18px; font-size: var(--fs-12); font-weight: 600; color: var(--color-text-muted-3); }
.cp-match.ok { color: var(--color-success); }
/* Validation messages: same size as on the Profile page (.upf-card .text-danger.error). */
.cp-card .text-danger.error { font-size: var(--fs-12) !important; text-align: left !important; font-weight: 500; margin-top: 4px; }
.cp-btn-wrap .btn { background: var(--color-theme) !important; border: 0 !important; border-radius: 999px !important; color: var(--color-white) !important; box-shadow: 0 8px 16px -8px rgba(var(--color-theme-rgb), .7); }
.cp-btn-wrap .btn i { margin-right: 6px; transition: transform .25s; }
.cp-btn-wrap .btn:hover i { transform: translateX(4px); }
.cp-secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0 0; padding-top: 12px; border-top: 1px dashed var(--color-border-dashed); font-size: var(--font-size-small); color: var(--color-text-secondary); }
.cp-secure i { color: var(--color-theme); }
@media (max-width: 767.98px) { .cp-split { grid-template-columns: 1fr; } .cp-aside { padding: 20px 18px; border-right: 0; border-bottom: 1px dashed var(--color-theme-border); } .cp-body { padding: 20px 18px 22px; } }


/* ---- User creation (My Carers / My Office Staffs): Views/Organization/Admin/UserCreation/UserCreation.cshtml + EditUserCreation.cshtml.
   Cover cards (several per row) and the Add / Update / Delete dialogs in the Add User Course Map dialog look (gradient header with gold icon, soft body, white footer). ---- */
/* no white panel: the content sits on the page background, like the Enrolled Courses Map page */
.uc-panel { margin-top: .5rem; }
.uc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 1.5rem; }
.uc-head h4 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: var(--fs-18); font-weight: 700; line-height: 1.2; color: var(--color-navy); }
.uc-head h4 i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: var(--fs-18); color: var(--color-theme); background: var(--color-theme-soft); }
.uc-body { padding: 0; }
.uc-body .p4c-toolbar { margin-bottom: 16px; }
.uc-body .p4c-footer { margin-top: 16px; }

/* buttons (own class, so the page .btn rules do not touch them) */
.uc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 12px; border: 1px solid transparent; border-radius: 8px; font-size: var(--font-size-small); font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; transition: transform .15s, background-color .15s, border-color .15s; }
.uc-btn:hover { transform: translateY(-1px); }
.uc-btn--edit { color: var(--color-white); background: var(--color-theme); border-color: var(--color-theme); }
.uc-btn--edit:hover { color: var(--color-white); background: var(--color-theme-dark); }
.uc-btn--del { color: var(--color-remove); background: var(--color-remove-bg); border-color: var(--color-remove-border); }
.uc-btn--del:hover { color: var(--color-white); background: var(--color-remove); border-color: var(--color-remove); }

/* cover cards: several per row from small screens up */
#ucList { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 18px; align-items: stretch; }
#ucList > * { min-width: 0; }
.uc-card { display: flex; flex-direction: column; align-items: center; overflow: hidden; text-align: center; border: 1px solid var(--color-border-card); border-radius: 16px; background: var(--color-white); box-shadow: 0 2px 8px rgba(var(--color-heading-rgb), .05); }
.uc-card__cover { align-self: stretch; height: 64px; background: linear-gradient(135deg, var(--color-theme-dark), var(--color-theme) 60%, var(--color-theme-bright)); }
.uc-av { display: block; flex: none; border-radius: 50%; object-fit: cover; background: var(--color-bg-avatar); }
.uc-card__av { width: 84px; height: 84px; margin-top: -42px; border: 4px solid var(--color-white); box-shadow: 0 6px 16px -8px rgba(var(--color-navy-rgb), .5); }
.uc-card__name { margin: 10px 14px 6px; max-width: calc(100% - 28px); font-size: var(--fs-16); font-weight: 700; color: var(--color-heading); overflow-wrap: anywhere; }
.uc-card__info { align-self: stretch; margin: 0; padding: 0 16px; list-style: none; display: grid; gap: 6px; }
.uc-card__info li { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; font-size: var(--font-size-small); color: var(--color-text-muted-3); }
.uc-card__info li i { flex: none; color: var(--color-theme); }
.uc-card__info li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-card__act { display: flex; gap: 8px; justify-content: center; align-self: stretch; margin-top: auto; padding: 14px 16px 16px; }


/* ---- dialogs (#myModal Add, #editUserCreationModal Update, #deleteModal): .uc-shell ---- */
.uc-shell {
    --em-hd-bg: linear-gradient(120deg, var(--color-theme), var(--color-theme-dark)); --em-hd-fg: var(--color-white); --em-ico-bg: rgba(var(--color-white-rgb), .12); --em-ico-line: rgba(var(--color-white-rgb), .18); --em-ico-fg: var(--color-gold);
    --em-body-bg: var(--color-bg-soft); --em-ft-bg: var(--color-white); --em-ctl-bg: var(--color-white); --em-radius: 16px; --em-ctl-h: 46px; --em-line: var(--color-border-input);
    font-size: var(--font-size-body); color: var(--color-text-body);
}
.uc-shell *, .uc-shell *::before, .uc-shell *::after { box-sizing: border-box; }
@media (min-width: 768px) { .uc-shell .modal-dialog.modal-lg { max-width: 800px; } }
.uc-shell .modal-content { padding: 0; border: 0; border-radius: var(--em-radius); overflow: hidden; box-shadow: 0 30px 60px -20px rgba(var(--color-navy-rgb), .45); }
.uc-shell .modal-header { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; margin: 0; padding: 8px 16px; background: var(--em-hd-bg); color: var(--em-hd-fg); border-bottom: 0; }
.uc-shell .modal-header .modal-title { margin: 0; color: inherit; font-size: var(--fs-14); font-weight: 700; line-height: 1.2; }
.uc-shell .uc-hico { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--em-ico-bg); border: 1px solid var(--em-ico-line); color: var(--em-ico-fg); font-size: var(--fs-16); }
.uc-shell .modal-header .btn-close { margin: 0; }
.uc-shell .modal-body { padding: 20px; background: var(--em-body-bg); }
.uc-shell .modal-footer { gap: 8px; padding: 12px 20px; background: var(--em-ft-bg); border-top: 1px solid var(--color-border-divider); }
.uc-shell .modal-footer > * { margin: 0 !important; }
.uc-shell .uc-sec { margin-bottom: 8px; }
.uc-shell .uc-sec:last-child { margin-bottom: 0; }
.uc-shell .form-label { margin-bottom: 6px; font-size: var(--fs-12); font-weight: 700; color: var(--color-text-dark); }
.uc-shell .form-label span[style] { color: var(--color-gold-dark) !important; }

/* text fields: soft look, white with a theme border and a 3px theme ring on focus (the same focus as the Add User Course Map dropdowns) */
.uc-shell input.form-control { height: var(--em-ctl-h); padding: 0 14px; border: 1.5px solid var(--em-line); border-radius: 11px; font-size: var(--fs-14); font-weight: 600; color: var(--color-text-dark); background-color: var(--em-ctl-bg); box-shadow: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.uc-shell input.form-control::placeholder { font-weight: 500; color: var(--color-text-muted); }
.uc-shell input.form-control:focus, .uc-shell input.form-control:focus-visible { outline: 0; border-color: var(--color-theme); background-color: var(--color-white); box-shadow: 0 0 0 3px rgba(var(--color-theme-rgb), .15); }
.uc-shell input.form-control:disabled { opacity: .75; cursor: not-allowed; background-color: var(--color-bg-hover); }
.uc-shell .auth-pass-inputgroup input.form-control { padding-right: 46px; background-color: var(--em-ctl-bg) !important; }
.uc-shell .auth-pass-inputgroup .password-addon { top: 0; right: 4px; display: grid !important; place-items: center; width: 38px; height: var(--em-ctl-h); padding: 0 !important; color: var(--color-text-muted) !important; }

/* the User Type dropdown (Select2) */
.uc-shell .select2-container { width: 100% !important; }
.uc-shell .select2-container.select2-container--default .select2-selection--single { position: relative; display: flex; align-items: center; height: var(--em-ctl-h); min-height: var(--em-ctl-h); border: 1.5px solid var(--em-line); border-radius: 11px; background: var(--em-ctl-bg); color: var(--color-text-dark); cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.uc-shell .select2-container--default .select2-selection--single .select2-selection__rendered { flex: 1; padding: 0 44px 0 14px; line-height: normal; font-size: var(--fs-14); font-weight: 600; color: var(--color-text-dark); }
.uc-shell .select2-container--default .select2-selection--single .select2-selection__placeholder { font-weight: 500; color: var(--color-text-muted); }
.uc-shell .select2-container--default .select2-selection--single .select2-selection__arrow { display: none; }
.uc-shell .select2-container--default .select2-selection--single::after { content: ""; position: absolute; top: 50%; right: 14px; margin-top: -2px; border: solid; border-width: 5px 4px 0 4px; border-color: var(--color-text-muted) transparent transparent transparent; pointer-events: none; transition: transform .15s; }
.uc-shell .select2-container--default.select2-container--open .select2-selection--single::after { transform: rotate(180deg); }
.uc-shell .select2-container.select2-container--default.select2-container--focus .select2-selection--single,
.uc-shell .select2-container.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--color-theme); background: var(--color-white); box-shadow: 0 0 0 3px rgba(var(--color-theme-rgb), .15); outline: 0; }
.uc-shell .select2-dropdown { z-index: 1080; border: 1px solid var(--color-theme-border); border-radius: 12px; overflow: hidden; background: var(--color-white); box-shadow: 0 22px 40px -18px rgba(var(--color-navy-rgb), .5); font-size: var(--font-size-body); }
.uc-shell .select2-container--default .select2-search--dropdown { padding: 8px; background: var(--color-bg-soft); border-bottom: 1px solid var(--color-border-divider); }
.uc-shell .select2-container--default .select2-search--dropdown .select2-search__field { height: 36px; padding: 0 12px; border: 1px solid var(--em-line); border-radius: 8px; font: inherit; font-size: var(--fs-13); background: var(--color-white); }
.uc-shell .select2-container--default .select2-search--dropdown .select2-search__field:focus { outline: 0; border-color: var(--color-theme); box-shadow: 0 0 0 3px rgba(var(--color-theme-rgb), .15); }
.uc-shell .select2-container--default .select2-results > .select2-results__options { max-height: 260px; overflow-y: auto; padding: 4px; }
.uc-shell .select2-container--default .select2-results__option { padding: 9px 12px; border-radius: 8px; font-size: var(--fs-13); font-weight: 600; color: var(--color-text-dark); }
.uc-shell .select2-container--default .select2-results__option--highlighted[aria-selected], .uc-shell .select2-container--default .select2-results__option[aria-selected=true] { background: var(--color-theme-soft); color: var(--color-theme-dark); }

/* footer buttons use the site ec-btn classes; the Delete confirm is the same look in red */
.uc-shell .modal-footer .ec-btn--danger { border-color: var(--color-danger); background: var(--color-danger); color: var(--color-white); }
.uc-shell .modal-footer .ec-btn--danger:hover { border-color: var(--color-danger-hover); background: var(--color-danger-hover); color: var(--color-white); }

/* the dialog never grows taller than the window: the body scrolls and the header and footer stay in view */
.uc-shell .modal-dialog { margin-top: 1.75rem; margin-bottom: 1.75rem; }
.uc-shell .modal-dialog > form { display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
.uc-shell .modal-content { flex: 1 1 auto; min-height: 0; max-height: 100%; }
.uc-shell .modal-header, .uc-shell .modal-footer { flex: 0 0 auto; }
.uc-shell .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* Delete dialog keeps a red tint */
.uc-shell--del { --em-hd-bg: var(--color-remove-bg); --em-hd-fg: var(--color-remove); --em-ico-bg: var(--color-remove); --em-ico-line: var(--color-remove); --em-ico-fg: var(--color-white); --em-body-bg: var(--color-white); }
.uc-shell--del .modal-header { border-bottom: 1px solid var(--color-remove-border); }
.uc-shell--del .modal-body p { margin: 0; font-size: var(--fs-14); color: var(--color-text-body); }

/* Update dialog: round photo with camera and delete buttons */
.uc-photo { display: flex; align-items: center; gap: 18px; }
.uc-photo__ph { position: relative; flex: none; }
.uc-photo__img { display: block; width: 112px; height: 112px; border-radius: 50%; object-fit: cover; cursor: pointer; background: var(--color-bg-avatar); border: 3px solid var(--color-white); box-shadow: 0 6px 18px -8px rgba(var(--color-navy-rgb), .5); }
.uc-photo__btns { position: absolute; right: -4px; bottom: -2px; display: flex; gap: 4px; z-index: 10; pointer-events: none; }
.uc-photo__btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid var(--color-border-badge); font-size: var(--fs-13); cursor: pointer; pointer-events: auto; }
.uc-photo__btn--cam { color: var(--color-primary); background: var(--color-bg-badge-light); }
.uc-photo__btn--del { color: var(--color-white); background: var(--color-danger); border-color: var(--color-danger); }
.uc-photo__txt { margin: 0; font-size: var(--font-size-small); color: var(--color-text-muted-3); }
.uc-photo__txt b { display: block; margin-bottom: 2px; font-size: var(--fs-14); color: var(--color-heading); overflow-wrap: anywhere; }
@media (max-width: 575px) { .uc-photo { flex-direction: column; text-align: center; } }

/* ---- Locked chapter / exam modal (Scripts/lockedModal.js). Design: locked-modal-5-badge-next-chapter-card - lock badge, what is locked, a
   "finish this first" card naming the chapter number and title, the progress bar, and one Go to Chapter button in the same bordered
   footer as the exam start modal. Every colour comes from color-variables.css. ---- */
.lkm-back { position: fixed; inset: 0; z-index: 1090; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(var(--color-navy-rgb), .58); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.lkm-back[hidden] { display: none; }
.lkm-dialog { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow: hidden; border-radius: 16px; text-align: center; background: var(--color-white); box-shadow: 0 30px 60px -24px rgba(var(--color-navy-rgb), .6); }
.lkm-x { position: absolute; top: 12px; right: 12px; z-index: 3; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: var(--fs-14); line-height: 1; cursor: pointer; color: var(--color-text-secondary); background: var(--color-bg-badge-light); border: 1px solid var(--color-border-badge); transition: background-color .15s ease, color .15s ease; }
.lkm-x:hover { color: var(--color-heading); background: var(--color-bg-badge-light-2); }
.lkm-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 30px 26px 8px; scrollbar-width: thin; scrollbar-color: var(--color-scrollbar) transparent; }
.lkm-badge { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%; font-size: var(--fs-32); color: var(--color-theme-dark); background: var(--color-theme-soft); box-shadow: 0 0 0 8px rgba(var(--color-theme-rgb), .1); }
.lkm-kind { margin: 0 0 4px; font-size: var(--fs-12); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-secondary); }
.lkm-title[hidden] { display: none; }
.lkm-title { margin: 0 0 6px; font-size: var(--fs-20); font-weight: 700; color: var(--color-heading); overflow-wrap: anywhere; }
.lkm-lead { margin: 0 0 16px; font-size: var(--fs-15); font-weight: 600; color: var(--color-theme-dark); }
.lkm-next { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; padding: 12px 14px; text-align: left; border-radius: 12px; background: var(--color-theme-soft); border: 1px solid var(--color-theme-border); }
.lkm-next[hidden] { display: none; }
.lkm-next__ic { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; font-size: var(--fs-16); color: var(--color-white); background: var(--color-theme); }
.lkm-next small { display: block; font-size: var(--fs-11); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-theme-dark); }
.lkm-next b { display: block; font-size: var(--fs-14); color: var(--color-heading); overflow-wrap: anywhere; }
.lkm-bar { height: 8px; margin-top: 16px; border-radius: 999px; overflow: hidden; background: var(--color-theme-soft); }
.lkm-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--color-theme); }
.lkm-count { margin: 8px 0 0; font-size: var(--fs-12); color: var(--color-text-secondary); }
.lkm-foot { flex: 0 0 auto; display: flex; justify-content: center; padding: 14px 0 20px; border-top: 1px solid var(--color-border-neutral-2); background: var(--color-white); }
.lkm-go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 26px; border: 1.5px solid var(--color-theme); border-radius: 10px; font-size: var(--fs-14); font-weight: 600; line-height: 1; cursor: pointer; color: var(--color-white); background: var(--color-theme); box-shadow: 0 8px 16px -10px rgba(var(--color-theme-rgb), .8); }
.lkm-go[hidden] { display: none; }
@media (max-width: 575px) { .lkm-back { padding: 8px; } .lkm-go { width: calc(100% - 28px); } }