/*
 * local_coursematrix — global stylesheet overrides.
 *
 * Moodle auto-loads any local/<plugin>/styles.css into every page, so
 * fixes that need to apply site-wide (regardless of which local page
 * you're on) belong here.
 */

/*
 * Report User column — link into the per-user drilldown. No underline
 * at rest (Bootstrap's link colour is loud enough in a dense table);
 * underline on hover so it still reads as clickable.
 */
.cm-user-cell-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}
.cm-user-cell-link:hover,
.cm-user-cell-link:focus {
    color: var(--bs-link-color, #0f6cbf);
    border-bottom-color: transparent;
    text-decoration: underline;
}

/*
 * Active-filters chip strip on the Reports page. Each chip's × is
 * plain text but needs a visible hit area on touch devices, and the
 * chip needs to wrap on narrow screens without shoving controls off.
 */
.cm-filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}
.cm-filter-chips .cm-filter-chip {
    display: inline-flex;
    align-items: center;
    font-weight: normal;
    font-size: 0.85rem;
}
.cm-filter-chips .cm-filter-chip a {
    font-weight: bold;
    font-size: 1.05rem;
    line-height: 1;
    padding: 0 0.15rem;
    text-decoration: none;
    opacity: 0.85;
}
.cm-filter-chips .cm-filter-chip a:hover,
.cm-filter-chips .cm-filter-chip a:focus {
    opacity: 1;
    text-decoration: none;
}
.cm-filter-bar .cm-filter-field {
    /* Prevent Bootstrap's flex-inline from letting the enhanced
       autocomplete widgets bleed into each other. */
    align-self: flex-start;
}

/* My courses always shows every course (output_callbacks forces the paging
   preference to All), so the items-per-page selector would only let a user
   drop back to 12 and lose plan courses to page 2+. */
#page-my-index .block_myoverview [data-region="paging-control-limit-container"] {
    display: none !important;
}

/*
 * Injected UI on core pages (output_callbacks, course_badges, my_courses_lp_sort, quiz_other_training,
 * pdf_resource_enhance). Everything below uses the AuST token variables from theme_aust / @aust/theme
 * (--color-*, --badge-*, --radius-*), so light and dark follow the theme with no per-mode rules. The
 * fallbacks after each comma only matter if the theme tokens are absent.
 */

/* ---- Banners: course due-date strip and "you did not pass" strip. ---------------------------------- */
.local-cm-banner {
    --cm-banner-bg: var(--color-info-soft, #e7eef8);
    --cm-banner-fg: var(--color-info-hover, #516fa1);
    --cm-banner-edge: var(--color-border-info, #b9c9e3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0.7rem 1rem;
    text-align: center;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--cm-banner-fg);
    background-color: var(--color-bg-surface, #fff);
    background-image: linear-gradient(var(--cm-banner-bg), var(--cm-banner-bg));
    border-bottom: 1px solid var(--cm-banner-edge);
    /*
     * The banner is output at the very top of <body>, in flow, above the fixed app header: it would sit
     * under the header. #page already clears the header with a top margin of --header-height, so shifting
     * the banner down by the same amount puts it exactly between the header and the page content.
     */
    position: relative;
    top: var(--header-height, 68px);
}
.local-cm-banner .icon {
    flex: 0 0 auto;
    margin: 0;
    color: inherit;
}
.local-cm-banner--warning {
    --cm-banner-bg: var(--color-warning-soft, #fff1d9);
    --cm-banner-fg: var(--color-text-warning, #a66b0c);
    --cm-banner-edge: var(--color-border-warning, #e6c27a);
}
.local-cm-banner--danger {
    --cm-banner-bg: var(--color-danger-soft, #fde7e7);
    --cm-banner-fg: var(--color-danger-hover, #a53b3b);
    --cm-banner-edge: var(--color-border-danger, #e3a3a3);
}

/* ---- Course status badges (course_badges.js; my_courses_lp_sort.js for the plan sections). ---------- */
.cm-badge {
    --cm-badge-bg: var(--badge-info-bg, #e7eef8);
    --cm-badge-fg: var(--badge-info-text, #445f88);
    --cm-badge-edge: var(--color-border-info, #b9c9e3);
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    align-self: flex-start;
    width: auto;
    max-width: fit-content;
    padding: 0.2rem 0.65rem;
    border: 1px solid var(--cm-badge-edge);
    border-radius: var(--radius-pill, 999px);
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.4;
    white-space: nowrap;
    color: var(--cm-badge-fg);
    /* The soft status tints are translucent in dark mode; an opaque surface underneath keeps the pill
       readable when it overlays a course thumbnail. */
    background-color: var(--color-bg-surface, #fff);
    background-image: linear-gradient(var(--cm-badge-bg), var(--cm-badge-bg));
    box-shadow: var(--shadow-xs, 0 1px 2px rgb(0 0 0 / 0.12));
}
.cm-badge .icon {
    margin: 0;
    color: inherit;
}
.cm-badge--completed {
    --cm-badge-bg: var(--badge-success-bg, #dff5e9);
    --cm-badge-fg: var(--badge-success-text, #166c45);
    --cm-badge-edge: color-mix(in srgb, var(--color-success, #1f8a58) 45%, transparent);
}
.cm-badge--warning {
    --cm-badge-bg: var(--badge-warning-bg, #fff1d9);
    --cm-badge-fg: var(--badge-warning-text, #7d5008);
    --cm-badge-edge: var(--color-border-warning, #e6c27a);
}
.cm-badge--critical {
    --cm-badge-bg: var(--badge-danger-bg, #fde7e7);
    --cm-badge-fg: var(--badge-danger-text, #832f2f);
    --cm-badge-edge: var(--color-border-danger, #e3a3a3);
}
/* Overdue is the one solid badge: it should be the loudest thing on the card. */
.cm-badge--overdue {
    --cm-badge-fg: var(--color-danger-contrast, #fff);
    --cm-badge-edge: var(--color-danger-hover, #a53b3b);
    background-image: linear-gradient(var(--color-danger, #c64949), var(--color-danger, #c64949));
}
/* Card view: pinned to the top-right of the thumbnail. */
.cm-badge-host {
    position: relative;
}
.cm-badge--overlay {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 5;
}
/* List and Summary views: sits under the course name. */
.cm-badge--inline {
    margin-top: 0.25rem;
}

/* ---- "Sort by learning plan" section headings on My courses. -------------------------------------- */
.cm-lp-heading {
    margin: 1.75rem 0 0.9rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--color-border-muted, #dce4ec);
}
.cm-lp-heading__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-strong, inherit);
}

/* ---- PDF resource: "Mark as done" waits below the viewer until every page was seen. --------------- */
.local-coursematrix-completion-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 1.5rem 0;
    text-align: center;
    transition: opacity 0.4s ease-in-out;
}
.local-coursematrix-completion-bottom.local-coursematrix-locked {
    opacity: 0;
    pointer-events: none;
}

/* ---- Competency "how was this trained" question: the "If Other" text area. ------------------------ */
.cm-other-training-area {
    display: block;
    width: 100%;
    max-width: 40rem;
    margin-top: 0.25rem;
    resize: vertical;
}