/*
 * local_jangroactivityui styles.
 *
 * Scoped entirely under body.jangro-activity-ui, never a bare :root
 * selector - local_jangrocourseui's own styles.css documents that :root
 * custom properties don't reliably apply to a stylesheet loaded via
 * $PAGE->requires->css() on this Moodle build; this plugin follows the
 * same proven-safe pattern.
 *
 * Palette matches local_jangrocourseui's own Jangro brand palette, for
 * visual consistency between the course overview page and the activity
 * pages reached from it.
 *
 * Remapped 2026-07-30 onto the real Jangro brand palette (see
 * backups/2026-07-30_brand-palette-remap/README.md on the
 * feature/global-jangro-course-ui branch for the full mapping/reasoning -
 * same values applied here for consistency between the plugins).
 */

body.jangro-activity-ui {
    --jangro-purple-dark: #3c1a3d;
    --jangro-purple: #5d295f;
    --jangro-purple-light: #8c3d8f;
    --jangro-text: #2a122b;
    --jangro-muted: #876d88;
    --jangro-border: #e2e4ec;
    --jangro-background: #f7f8fb;
    --jangro-white: #ffffff;

    background: var(--jangro-background);
}

body.jangro-activity-ui #page {
    background: var(--jangro-background);
}

/* Page heading: match the course page's heading colour/weight. */
body.jangro-activity-ui .page-header-headings h2 {
    color: var(--jangro-purple-dark);
    font-weight: 700;
}

/* Wrap the main activity content as a card, matching the course page's
   visual language, without needing per-module-type markup changes -
   region-main is common to every activity type on this layout. */
body.jangro-activity-ui #region-main {
    background: var(--jangro-white);
    border: 1px solid var(--jangro-border);
    border-radius: 12px;
    padding: 24px 28px;
    box-shadow: 0 1px 3px rgba(60, 26, 61, 0.06);
}

body.jangro-activity-ui .activity-information {
    border-color: var(--jangro-border);
}

/* Primary call-to-action buttons (SCORM "Enter", etc.) in the brand
   purple, matching the course page and dashboard's own button styling. */
body.jangro-activity-ui .btn-primary {
    background-color: var(--jangro-purple) !important;
    border-color: var(--jangro-purple) !important;
    color: var(--jangro-white) !important;
}

body.jangro-activity-ui .btn-primary:hover,
body.jangro-activity-ui .btn-primary:focus {
    background-color: var(--jangro-purple-light) !important;
    border-color: var(--jangro-purple-light) !important;
}

body.jangro-activity-ui a {
    color: var(--jangro-purple);
}