/*
    Program modules — the layer above a program's sections.
    Course builder (_CourseProgramDetailsPartial), batch management (Modules tab + module certificates in
    Enrollments, _BatchDetailsPartial) and the learner's program view / course page.

    Same tokens as the instructor dashboard (co-instructor-dash.css) and the violet modal theme
    (co-modal.css): Inter for text, Sora for names and headings, violet #6d4aff, gold for certificates.
*/
.pm-scope,
.pm-modal {
    --pm-ink: #14121f;
    --pm-ink-2: #3d3a4d;
    --pm-muted: #6c6980;
    --pm-line: #e4e2ee;
    --pm-wash: #f3f2f8;
    --pm-violet: #6d4aff;
    --pm-violet-ink: #4f30e0;
    --pm-violet-soft: #ece8ff;
    --pm-gold: #f2b233;
    --pm-gold-ink: #8a5a00;
    --pm-gold-soft: #fdf1d6;
    --pm-mint: #14a37f;
    --pm-mint-ink: #0b7a5e;
    --pm-mint-soft: #dcf3ec;
    --pm-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --pm-display: "Sora", "Inter", system-ui, sans-serif;
    font-family: var(--pm-sans);
}

/* ---------------- shared bits ---------------- */
.pm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 999px; font-family: var(--pm-sans); font-size: 13.5px; font-weight: 600; padding: 8px 16px; border: 1px solid transparent; cursor: pointer; line-height: 1.2; text-decoration: none; transition: background .15s, border-color .15s, color .15s; white-space: nowrap; }
.pm-btn:disabled { opacity: .55; cursor: default; }
.pm-btn-primary { background: var(--pm-violet); color: #fff; }
.pm-btn-primary:hover:not(:disabled) { background: var(--pm-violet-ink); color: #fff; }
.pm-btn-ghost { background: #fff; border-color: var(--pm-line); color: var(--pm-ink-2); }
.pm-btn-ghost:hover:not(:disabled) { border-color: #cfc9e6; background: var(--pm-wash); color: var(--pm-ink); }

.pm-cert { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.pm-cert.is-on { background: var(--pm-gold-soft); color: var(--pm-gold-ink); }
.pm-cert.is-on i { color: #c98a00; }
.pm-cert.is-off { background: var(--pm-wash); color: var(--pm-muted); }

/* ---------------- course builder ---------------- */
.pm-builder { padding: 4px 2px 12px; }
.pm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 2px 12px; flex-wrap: wrap; }
.pm-toolbar-title { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pm-muted); }
/* the builder's left panel is dark grey (#555) — the count sits on it directly */
#co-course-section-details .pm-toolbar-title { color: rgba(255, 255, 255, .82); }

.pm-empty { border: 1.5px dashed #cfc9e6; border-radius: 18px; background: #fff; padding: 30px 20px; text-align: center; color: var(--pm-ink-2); }
.pm-empty-ico { width: 52px; height: 52px; border-radius: 16px; display: inline-grid; place-items: center; background: var(--pm-violet-soft); color: var(--pm-violet); font-size: 24px; }
.pm-empty h4 { font-family: var(--pm-display); font-size: 17px; font-weight: 700; color: var(--pm-ink); margin: 12px 0 4px; }
.pm-empty p { margin: 0 auto 16px; font-size: 13.5px; color: var(--pm-muted); max-width: 380px; line-height: 1.5; }

.pm-mod { border: 1px solid var(--pm-line); border-radius: 18px; background: #fff; margin-bottom: 14px; box-shadow: 0 10px 26px -22px rgba(28, 22, 70, .55); overflow: hidden; }
.pm-mod-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: linear-gradient(180deg, #fcfbff, #f6f3ff); border-bottom: 1px solid #eeebfa; }
.pm-mod-num { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px; background: var(--pm-violet); color: #fff; display: grid; place-items: center; font-family: var(--pm-display); font-weight: 700; font-size: 13px; }
.pm-mod-main { flex: 1; min-width: 0; }
.pm-mod-name { font-family: var(--pm-display); font-weight: 600; font-size: 15.5px; color: var(--pm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-mod-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 3px; font-size: 12.5px; color: var(--pm-muted); }
.pm-mod-actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.pm-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--pm-ink-2); background: transparent; border: 1px solid transparent; cursor: pointer; padding: 0; font-size: 15px; }
.pm-ico:hover { background: #fff; border-color: var(--pm-line); color: var(--pm-violet-ink); }
.pm-ico.is-danger:hover { color: #c9283a; border-color: #f6cdd2; background: #fff6f7; }
.pm-ico:disabled { opacity: .28; pointer-events: none; }
.pm-mod-body { padding: 12px 14px 14px; }
.pm-mod-body .accordion-item { border-radius: 12px !important; border: 1px solid #eceaf3; margin-bottom: 8px; overflow: hidden; }
.pm-mod-body .accordion-button { font-family: var(--pm-sans); }
.pm-mod-empty { font-size: 13px; color: var(--pm-muted); padding: 2px 2px 10px; }
.pm-add-sec { width: 100%; border: 1.5px dashed #d8d1fb; background: #fcfbff; color: var(--pm-violet-ink); border-radius: 12px; }
.pm-add-sec:hover:not(:disabled) { background: var(--pm-violet-soft); color: var(--pm-violet-ink); }

@media (max-width: 575.98px) {
    .pm-mod-head { flex-wrap: wrap; }
    .pm-mod-actions { width: 100%; justify-content: flex-end; }
}

/* module modal body (the sheet itself comes from co-modal.css) */
.pm-modal label.pm-label { font-weight: 600; font-size: 14px; color: var(--pm-ink); margin-bottom: 6px; display: block; }
.pm-switch { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--pm-line); background: #fcfbff; border-radius: 14px; padding: 12px 14px; margin: 14px 0 4px; cursor: pointer; }
.pm-switch .form-check-input { width: 1.4em; height: 1.4em; margin: 2px 0 0; flex: 0 0 auto; cursor: pointer; }
.pm-switch .form-check-input:checked { background-color: var(--pm-violet); border-color: var(--pm-violet); }
.pm-switch-title { display: block; font-weight: 700; font-size: 14px; color: var(--pm-ink); }
.pm-switch-hint { display: block; font-size: 12.5px; color: var(--pm-muted); line-height: 1.5; margin-top: 2px; }
.pm-err { color: #c9283a; font-size: 12.5px; margin: 6px 0 0; }

/* ---------------- batch management: Modules tab ---------------- */
.bm-note { display: flex; gap: 10px; align-items: flex-start; border-radius: 14px; padding: 11px 14px; font-size: 13px; line-height: 1.55; margin-bottom: 14px; }
.bm-note i { font-size: 16px; margin-top: 1px; }
.bm-note.is-auto { background: var(--pm-mint-soft); color: #0b5e48; }
.bm-note.is-manual { background: var(--pm-violet-soft); color: #3a239e; }
.bm-row { display: flex; align-items: center; gap: 14px; border: 1px solid var(--pm-line); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }
.bm-row.is-done { background: #fbfefd; border-color: #c6eadc; }
.bm-num { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--pm-display); font-weight: 700; font-size: 13px; background: var(--pm-violet-soft); color: var(--pm-violet-ink); }
.bm-row.is-done .bm-num { background: var(--pm-mint); color: #fff; }
.bm-main { flex: 1; min-width: 0; }
.bm-name { font-family: var(--pm-display); font-weight: 600; color: var(--pm-ink); font-size: 14.5px; }
.bm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; font-size: 12.5px; color: var(--pm-muted); }
.bm-status { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.bm-status.is-done { color: var(--pm-mint-ink); }
.bm-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.bm-empty { text-align: center; color: var(--pm-muted); font-size: 13.5px; padding: 26px 10px; border: 1.5px dashed var(--pm-line); border-radius: 14px; }

@media (max-width: 575.98px) {
    .bm-row { flex-wrap: wrap; }
    .bm-actions { width: 100%; justify-content: flex-end; }
}

/* ---------------- batch management: module certificates in Enrollments ---------------- */
.bl-cert-stack { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.bl-cert-label { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9a97ab; margin-top: 2px; }
.bl-mcert { border-radius: 8px; font-size: 12px; font-weight: 600; padding: 4px 10px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; max-width: 240px; line-height: 1.4; }
.bl-mcert span { overflow: hidden; text-overflow: ellipsis; }
.bl-mcert.is-off { background: #fff; border: 1px dashed #c9bff8; color: var(--pm-violet-ink); cursor: pointer; }
.bl-mcert.is-off:hover { background: var(--pm-violet-soft); }
.bl-mcert.is-off:disabled { opacity: .6; cursor: default; }
.bl-mcert.is-on { background: var(--pm-gold-soft); border: 1px solid #f3dc9b; color: var(--pm-gold-ink); text-decoration: none; }
.bl-mcert.is-on:hover { color: var(--pm-gold-ink); filter: brightness(.98); }

/* ---------------- learner: program content and course page ---------------- */
.lm-head { display: flex; align-items: center; gap: 10px; margin: 16px 4px 8px; }
.lm-head:first-child { margin-top: 4px; }
.lm-num { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pm-violet); }
.lm-name { font-family: var(--pm-display); font-weight: 600; font-size: 15px; color: var(--pm-ink); }
.lm-badge { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; text-decoration: none; flex: 0 0 auto; }
.lm-badge.is-earned { background: var(--pm-gold-soft); color: var(--pm-gold-ink); }
.lm-badge.is-earned:hover { color: var(--pm-gold-ink); filter: brightness(.97); }
.lm-badge.is-done { background: var(--pm-mint-soft); color: var(--pm-mint-ink); }
.lm-badge.is-cert { background: var(--pm-violet-soft); color: var(--pm-violet-ink); }

.lmc { border: 1px solid var(--pm-line); border-radius: 16px; background: #fff; padding: 12px 14px; margin: 16px 5px 4px; max-width: 480px; }
.lmc-title { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pm-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.lmc-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px dashed #ebe8f3; font-size: 13.5px; }
.lmc-title + .lmc-row { border-top: none; }
.lmc-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; }
.lmc-row.is-earned .lmc-ico { background: var(--pm-gold-soft); color: #c98a00; }
.lmc-row.is-wait .lmc-ico { background: var(--pm-violet-soft); color: var(--pm-violet); }
.lmc-row.is-locked .lmc-ico { background: var(--pm-wash); color: #9a97ab; }
.lmc-name { flex: 1; min-width: 0; font-weight: 600; color: var(--pm-ink); line-height: 1.35; }
.lmc-sub { display: block; font-weight: 500; font-size: 12px; color: var(--pm-muted); }
.lmc-view { font-size: 12.5px; font-weight: 700; color: var(--pm-violet-ink); text-decoration: none; white-space: nowrap; }
.lmc-view:hover { color: var(--pm-violet); }

/* ---------------- learner: "Modules" tab — one expandable card per module ---------------- */
.lmods { padding: 10px 10px 14px; }
.lmods-sum { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 2px 12px; }
.lmods-sum > span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--pm-wash); color: var(--pm-ink-2); font-size: 12.5px; font-weight: 600; }
.lmods-sum > span i { color: var(--pm-violet); }
.lmods-sum > span.is-gold { background: var(--pm-gold-soft); color: var(--pm-gold-ink); }
.lmods-sum > span.is-gold i { color: #c98a00; }

.lmod { border: 1px solid var(--pm-line); border-radius: 18px; background: #fff; margin-bottom: 12px; box-shadow: 0 10px 26px -22px rgba(28, 22, 70, .55); overflow: hidden; }
.lmod[open] { border-color: #d9d2fb; }
.lmod.is-earned { border-color: #f0dca6; }
.lmod-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; user-select: none; }
.lmod-head::-webkit-details-marker { display: none; }
.lmod-head::marker { content: ""; }
.lmod-head:hover { background: #fcfbff; }
.lmod-head:focus-visible { outline: 2px solid var(--pm-violet); outline-offset: -2px; border-radius: 18px; }
.lmod[open] > .lmod-head { background: linear-gradient(180deg, #fcfbff, #f6f3ff); border-bottom: 1px solid #eeebfa; }
.lmod-num { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--pm-violet-soft); color: var(--pm-violet-ink); font-family: var(--pm-display); font-weight: 700; font-size: 14px; }
.lmod[open] .lmod-num { background: var(--pm-violet); color: #fff; }
.lmod.is-done .lmod-num, .lmod.is-earned .lmod-num { background: var(--pm-mint); color: #fff; }
.lmod-num.is-plain { background: var(--pm-wash); color: var(--pm-muted); }
.lmod-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lmod-kicker { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pm-violet); }
.lmod-name { font-family: var(--pm-display); font-weight: 600; font-size: 15.5px; color: var(--pm-ink); line-height: 1.3; }
.lmod-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 5px; font-size: 12.5px; color: var(--pm-muted); }
.lmod-meta .lm-badge { margin-left: 0; }
.lmod-chev { flex: 0 0 auto; color: var(--pm-muted); font-size: 15px; transition: transform .2s; }
.lmod[open] .lmod-chev { transform: rotate(180deg); color: var(--pm-violet); }
.lmod-body { padding: 12px 14px 14px; }

.lmod-cert { display: flex; align-items: center; gap: 12px; border-radius: 14px; padding: 11px 13px; margin-bottom: 12px; font-size: 13px; line-height: 1.45; }
.lmod-cert-ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; background: #fff; }
.lmod-cert-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lmod-cert-text b { font-weight: 700; color: var(--pm-ink); }
.lmod-cert-text span { color: var(--pm-ink-2); }
.lmod-cert.is-earned { background: var(--pm-gold-soft); }
.lmod-cert.is-earned .lmod-cert-ico { color: #c98a00; }
.lmod-cert.is-wait, .lmod-cert.is-cert { background: var(--pm-violet-soft); }
.lmod-cert.is-wait .lmod-cert-ico, .lmod-cert.is-cert .lmod-cert-ico { color: var(--pm-violet); }
.lmod-cert.is-none { background: var(--pm-wash); padding: 9px 13px; }
.lmod-cert.is-none .lmod-cert-ico { width: 28px; height: 28px; font-size: 14px; color: var(--pm-muted); }
.lmod-cert.is-none .lmod-cert-text span { color: var(--pm-muted); }
.lmod-cert-btn { flex: 0 0 auto; padding: 7px 14px; font-size: 12.5px; }

.lmod-secs .accordion-item { border-radius: 12px !important; border: 1px solid #eceaf3; margin-bottom: 8px; overflow: hidden; }
.lmod-secs .accordion-button { font-family: var(--pm-sans); font-size: 14px; font-weight: 600; color: var(--pm-ink); gap: 10px; padding: 11px 14px; }
.lmod-secs .accordion-button:not(.collapsed) { background: #faf9ff; color: var(--pm-violet-ink); box-shadow: none; }
.lmod-secs .accordion-button:focus { box-shadow: 0 0 0 3px rgba(109, 74, 255, .18); }
.lmod-sec-ico { color: var(--pm-violet); }
.lmod-sec-name { min-width: 0; }
.lmod-empty { margin: 0; font-size: 13px; color: var(--pm-muted); }

@media (max-width: 575.98px) {
    .lmods { padding: 8px 6px 12px; }
    .lmod-head { padding: 12px; gap: 10px; }
    .lmod-cert { flex-wrap: wrap; }
    .lmod-cert-btn { width: 100%; }
}

/* Icons inside the pills: the course page sets a fixed 24px line-height on <body> (co-tab.css), which
   every pill inherited — the glyphs then sat on that tall line instead of beside the text. Pills and
   their icons get their own line box, and the icon a fixed square so the text starts at a steady gap. */
.lmods .lm-badge,
.lmods .lmods-sum > span { line-height: 1.25; gap: 6px; }
.lmods .lm-badge > .bi,
.lmods .lmods-sum > span > .bi { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1em; height: 1em; margin: 0; line-height: 1; font-size: 1.05em; position: static; }
.lmods .lm-badge > .bi::before,
.lmods .lmods-sum > span > .bi::before { vertical-align: 0; line-height: 1; }

/* the module's status on the right of its card header, the certificate beside the section count */
/* pinned to the header's top-right corner so the name and its meta line keep the full width */
.lmod-head { position: relative; }
.lmod-status { position: absolute; top: 12px; right: 44px; margin: 0; }
.lmod-head:has(.lmod-status) .lmod-kicker { display: block; min-height: 24px; padding-right: 120px; }
.lm-badge.is-open { background: var(--pm-wash); color: var(--pm-muted); }
.lmod-meta { flex-wrap: wrap; }

/* the course page shows "Module certificates" as its own full-width row above the course documents */
.lmc-wide .lmc { max-width: none; margin: 20px 0 4px; padding: 14px 16px; }
.lmc-wide .lmc-title { margin-bottom: 8px; }

/* ---------------- course builder: drag-and-drop handles ----------------
   The grip in front of every module, section, chapter and topic card. A hand cursor says it can be
   picked up; the placeholder shows where the card will land. (Loaded by both builder partials.) */
.co-grip { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 22px; height: 30px; border-radius: 7px; color: #9a97ab; cursor: grab; font-size: 17px; line-height: 1; touch-action: none; user-select: none; transition: background .15s, color .15s; }
.co-grip:hover { background: #ece8ff; color: #6d4aff; }
.co-grip:active, .co-dragging .co-grip { cursor: grabbing; color: #6d4aff; }
.pm-mod-head > .co-grip { margin-left: -6px; margin-right: -4px; }
.co-drag-head { display: flex; align-items: center; }
.co-drag-head > .co-grip { margin-left: 6px; }
.co-drag-head > .accordion-button { flex: 1; min-width: 0; }
.co-grip-inline { margin-right: 6px; vertical-align: middle; position: relative; top: -2px; }
.co-topic-list .co-grip.user-handle { margin-right: 4px; }

.co-drag-placeholder { border: 2px dashed #c9bff8; background: #f6f3ff; border-radius: 14px; margin-bottom: 10px; visibility: visible !important; }
.co-dragging { box-shadow: 0 18px 40px -18px rgba(28, 22, 70, .55) !important; }
body.ui-sortable-helper, .ui-sortable-helper { cursor: grabbing !important; }

/* builder module cards: collapsed by default, the head toggles them */
.pm-collapsible > .pm-mod > .pm-mod-head { cursor: pointer; }
.pm-collapsible > .pm-mod > .pm-mod-head:focus-visible { outline: 2px solid #6d4aff; outline-offset: -2px; }
.pm-collapsible > .pm-mod:not(.is-open) > .pm-mod-body { display: none; }
.pm-collapsible > .pm-mod:not(.is-open) > .pm-mod-head { border-bottom: none; }
.pm-chev { pointer-events: none; color: #6c6980; }
.pm-chev i { transition: transform .2s; }
.pm-mod.is-open .pm-chev { color: #6d4aff; }
.pm-mod.is-open .pm-chev i { transform: rotate(180deg); }

/* ---------------- course builder (type: course): chapters → topics, same cards as modules → sections ---------------- */
.cs-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; flex: 0 0 auto; }
.cs-chip.is-ok { background: #dcf3ec; color: #0b7a5e; }
.cs-chip.is-warn { background: #fdf1d6; color: #8a5a00; }
.cs-chip.is-info { background: #e6f0ff; color: #1e4fb8; }
.cs-chip.is-bad { background: #fde3e6; color: #c9283a; }
.cs-chip.is-muted { background: #f3f2f8; color: #6c6980; }

.cs-topics { min-height: 4px; }
.cs-topics .cs-topic.co-chapter-info { margin: 0 0 8px !important; border: 1px solid #eceaf3; border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.cs-topics .cs-topic.co-chapter-info:hover { background: #fff !important; border-color: #d9d2fb; box-shadow: 0 6px 16px -14px rgba(28, 22, 70, .6); }
.cs-topics .cs-topic.is-selected { border-color: #6d4aff; box-shadow: 0 0 0 3px rgba(109, 74, 255, .14); }
.cs-topic .cs-topic-row.co-chapter-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 6px; border-radius: 12px; background: transparent !important; }
.cs-topic-ico { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: #ece8ff; color: #6d4aff; font-size: 15px; line-height: 1; }
.cs-topic-main { flex: 1; min-width: 0; }
.cs-topic-title { font-family: "Inter", system-ui, sans-serif; font-weight: 600; font-size: 14px; color: #14121f; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-topic-title.co-chapter-title:hover { text-decoration: none; color: #4f30e0; }
.cs-topic-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; font-size: 12px; color: #6c6980; line-height: 1.35; }
.cs-topic-meta i { font-size: 11px; }
.cs-topic-meta .is-free { color: #0b7a5e; font-weight: 600; }
.cs-link { color: #4f30e0; font-weight: 600; cursor: pointer; }
.cs-link:hover { text-decoration: underline; }
.cs-topic .pm-ico { width: 30px; height: 30px; flex: 0 0 auto; }

/* ---------------- module badges ----------------
   A square image per module (ProgramModule.BadgeImageUrl), cropped in the builder. Shown on the
   builder's module card, the learner's Modules tab (right of the card header), the "Module
   certificates" list and the head of the module certificate. Greyed while still to be earned. */

/* builder: thumbnail on the module card, between the M-number and the name */
.pm-mod-badge { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; object-fit: cover; background: #fff; border: 1px solid var(--pm-line); }

/* builder: the picker in the add / edit module modal */
.pm-badge-field { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--pm-line); background: #fcfbff; border-radius: 14px; padding: 12px 14px; margin: 14px 0 4px; }
.pm-badge-tile { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 16px; border: 1.5px dashed #cfc9e6; background: #fff; padding: 0; display: grid; place-items: center; overflow: hidden; cursor: pointer; transition: border-color .15s, background .15s; }
.pm-badge-tile:hover { border-color: var(--pm-violet); background: var(--pm-violet-soft); }
.pm-badge-tile:focus-visible { outline: 2px solid var(--pm-violet); outline-offset: 2px; }
.pm-badge-tile.has-img { border-style: solid; border-color: var(--pm-line); }
.pm-badge-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-badge-tile img[hidden], .pm-badge-empty[hidden], .pm-badge-actions .pm-btn[hidden] { display: none !important; }
.pm-badge-empty { color: #9a97ab; font-size: 30px; line-height: 1; }
.pm-badge-text { flex: 1; min-width: 0; }
.pm-badge-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pm-btn-sm { padding: 6px 12px; font-size: 12.5px; }
.pm-btn.is-danger { color: #b42318; }
.pm-btn.is-danger:hover:not(:disabled) { color: #b42318; border-color: #f7c7c1; background: #fdecec; }

/* learner Modules tab: the badge on the right of the card header, before the chevron; the status
   pill (pinned top-right) moves left of it */
.lmod-badge { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 14px; object-fit: cover; background: #fff; border: 1px solid var(--pm-line); box-shadow: 0 6px 16px -10px rgba(28, 22, 70, .45); transition: filter .2s, opacity .2s; }
.lmod.is-earned .lmod-badge { border-color: #f0dca6; box-shadow: 0 0 0 3px var(--pm-gold-soft), 0 6px 16px -10px rgba(138, 90, 0, .5); }
.lmod-badge.is-locked { filter: grayscale(1); opacity: .55; }
.lmod-head.has-badge .lmod-status { right: 112px; }

/* learner "Module certificates" list */
.lmc-badge { width: 40px; height: 40px; border-radius: 11px; object-fit: cover; flex: 0 0 auto; background: #fff; border: 1px solid var(--pm-line); display: block; }
.lmc-row.is-earned .lmc-badge { border-color: #f0dca6; }
.lmc-badge.is-locked { filter: grayscale(1); opacity: .5; }
.lmc-badge-wrap { position: relative; flex: 0 0 auto; display: block; }
.lmc-badge-wrap > .bi { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #6c6980; font-size: 10px; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); line-height: 1; }

@media (max-width: 575.98px) {
    .lmod-badge { width: 44px; height: 44px; border-radius: 12px; }
    .lmod-head.has-badge .lmod-status { right: 96px; }
    .pm-badge-tile { width: 72px; height: 72px; }
}