/*
 * Soft Culture Moodle 5.1 presentation adapter.
 *
 * This is a component-level adaptation of the established Moodle 4.1
 * presentation layer. It imports that layer unchanged, then maps each visual
 * component onto its Moodle 5.1 container. It never changes theme_universe
 * PHP, Mustache templates, SCSS, Moodle core, or production assets.
 */

@import url("/static/min/moodle.css");

/* 1. Page frame and working area.
   The adapter deliberately works only through public Moodle/Universe classes;
   it does not alter the theme source. */
#page.drawers {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  height: auto !important;
  min-height: calc(100vh - 60px) !important;
  overflow: visible !important;
}

/* Preserve the primary LMS canvas. Its width is tied to the viewport rather
   than to the remaining area beside the course index, so opening or closing
   the drawer does not resize the course title or cover. */
#page-course-view-topics .wrapper-xl {
  width: min(1000px, calc(100vw - 60px)) !important;
}

:is(#page-my-index, #page-course-index, #page-course-index-category) .wrapper-xl {
  width: min(1300px, calc(100vw - 60px)) !important;
}

/* Moodle 5.1 keeps the course header in .wrapper-course, while catalogues
   use .wrapper-page-withblocks. Remove only their inherited inner cap. */
#page-course-view-topics :is(.wrapper-course, .wrapper-page-withblocks) > #page-header,
#page-my-index .wrapper-page-withblocks > *,
#page-course-index .wrapper-page-withblocks > *,
#page-course-index-category .wrapper-page-withblocks > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 2. Global and course navigation. */
nav.rui-topbar-wrapper .primary-navigation .navigation .nav-link {
  margin: 0 1px !important;
  padding: 6px 12px !important;
  height: 42px !important;
}

nav.rui-topbar-wrapper .primary-navigation .navigation .nav-link.active,
nav.rui-topbar-wrapper .primary-navigation .navigation .nav-link[aria-current="true"] {
  background-color: transparent !important;
  box-shadow: none !important;
}

#page-course-view-topics:not(.editing) .secondary-navigation {
  display: none !important;
}

#page-course-view-topics.editing .secondary-navigation {
  display: block !important;
}

#page-my-index .rui-breadcrumbs {
  display: none !important;
}

/* Moodle 5.1 exposes administration controls in page content. They are not
   part of the learner-facing catalogue on the established LMS. */
#page-course-index :is(.rui-breadcrumbs, .secondary-navigation, .tertiary-navigation, .region-main-settings-menu, .context-header-settings-menu),
#page-course-index-category :is(.rui-breadcrumbs, .secondary-navigation, .tertiary-navigation, .region-main-settings-menu, .context-header-settings-menu),
#page-my-index :is(.tertiary-navigation, .region-main-settings-menu, .context-header-settings-menu),
#page-my-index #page-header :is(.singlebutton, .btn) {
  display: none !important;
}

/* 3. Course header, cover, section marker and activity index. */
#page-course-view-topics #page-header .rui-main-content-title,
#page-course-view-topics #page-header .rui-page-title {
  width: 100% !important;
  max-width: none !important;
  font-size: 3rem !important;
  line-height: 1.1 !important;
}

#page-course-view-topics #page-header .page-header-content,
#page-course-view-topics #page-header .rui-title-container {
  width: 100% !important;
  max-width: none !important;
}

/* The heading and cover share the fixed course canvas above. */
#page-course-view-topics #page-header {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#page-course-view-topics .rui-course-cover {
  width: 100% !important;
  max-width: none !important;
}

/* Moodle 5.1 moved .stateready to #page; keep the label with course sections. */
#page-course-view-topics #page.stateready::before {
  content: none !important;
  display: none !important;
}

#page-course-view-topics .course-content::before {
  content: "Содержание курса /";
  display: block;
  margin-bottom: 25px;
  font-size: .75rem;
  color: #757474;
}

/* Moodle 5.1 provides a native .completioninfo element and inserts a
   state-specific image/icon inside it. Keep that semantic state container;
   replace only the inconsistent visible glyph with the established 10 px
   course-index marker. This gives one marker per activity on both the course
   and activity pages, including after Moodle replaces the drawer by AJAX. */
:is(#page-course-view-topics, body.path-mod) .courseindex .completioninfo {
  background: transparent !important;
  color: #757474 !important;
}

:is(#page-course-view-topics, body.path-mod) .courseindex .completioninfo:is(.completion_complete, .completion_incomplete, .completion_none)::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 4px !important;
  left: 4px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
}

:is(#page-course-view-topics, body.path-mod) .courseindex .completioninfo:is(.completion_incomplete, .completion_none)::before {
  background: transparent !important;
  border: 1px solid #757474 !important;
}

/* Completed units intentionally remain lime, matching the established LMS. */
:is(#page-course-view-topics, body.path-mod) .courseindex .completioninfo.completion_complete::before {
  background-color: #a2be3c !important;
  border-radius: 50% !important;
}

/* The native child contains only the default appearance. Hiding it prevents
   the old duplicate/overlapping circle without removing state or semantics. */
:is(#page-course-view-topics, body.path-mod) .courseindex .completioninfo:is(.completion_complete, .completion_incomplete, .completion_none) :is(img, svg, .icon) {
  display: none !important;
}

.courseindex .completion_complete ~ .courseindex-link {
  color: #2b2b2b !important;
}

.courseindex .courseindex-link:focus {
  outline: 0 !important;
  box-shadow: none !important;
}

/* Current location and completion are different states. Moodle marks the
   current activity on its <li> with .active; make that state a full-row,
   neutral highlight like the established LMS. Completion remains represented
   exclusively by the native completion marker above. */
:is(#page-course-view-topics, body.path-mod) .courseindex .courseindex-item:is(.active, .pageitem) {
  background-color: #f5f5f5 !important;
  border: 0 !important;
  border-radius: 5px !important;
}

:is(#page-course-view-topics, body.path-mod) .courseindex .courseindex-item:is(.active, .pageitem) .courseindex-link {
  color: #757474 !important;
}

/* Universe 1.5 adds a separate dot for .pageitem. The activity row's neutral
   background is the sole marker of the current page; completion owns the dot. */
:is(#page-course-view-topics, body.path-mod) .courseindex .courseindex-item.pageitem::before,
:is(#page-course-view-topics, body.path-mod) .courseindex .courseindex-item.pageitem .courseindex-link::before {
  content: none !important;
}

/* The established LMS uses a dark activity canvas and white glyph, including
   the SVG/icons emitted by the newer course-format component. */
#page-course-view-topics .course-content .activityiconcontainer {
  background-color: #757474 !important;
}

#page-course-view-topics .course-content .activityiconcontainer :is(img, svg, .icon) {
  color: #fff !important;
  filter: brightness(0) invert(1) !important;
}

/* Moodle 5.1 / Universe wraps the native manual-completion button in an
   information card. The learner view keeps the native button but no card
   outline, shadow or extra padding. */
body.path-mod :is(.rui-completion-info, .rui-completion-info--manual, .rui-completion-info-wrapper, [data-region="completion-info"]) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.path-mod .rui-activity-wrapper.rui-activity--hascompletion {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 4. My courses and catalogue cards. */
:is(#page-my-index, #page-course-index, #page-course-index-category) .rui-course-card-deck {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 40px !important;
}

:is(#page-my-index, #page-course-index, #page-course-index-category) .rui-course-card-img-top {
  height: 200px !important;
}

:is(#page-my-index, #page-course-index, #page-course-index-category) .rui-course-card-progress-bar {
  margin: 10px 0 !important;
  line-height: normal !important;
}

:is(#page-my-index, #page-course-index, #page-course-index-category) .rui-course-card-progress-bar .rui-mo-progress-text {
  position: static !important;
  left: auto !important;
  right: auto !important;
  display: block;
  margin-bottom: 5px;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #757474 !important;
  font-size: .75rem !important;
  line-height: 1.5;
}

:is(#page-my-index, #page-course-index, #page-course-index-category) .rui-course-card-progress-bar .rui-progress {
  margin-bottom: .75rem !important;
}

#page-my-index .block_myoverview [data-region="filter"],
#page-my-index .block_myoverview .card-title {
  display: none !important;
}

:is(#page-my-index, #page-course-index, #page-course-index-category) :is(.rui-course-cat, .rui-course-cat-badge) {
  display: none !important;
}

:is(#page-course-index, #page-course-index-category) .rui-main-content-title {
  font-size: 3rem;
}

@media (max-width: 1199.98px) {
  :is(#page-my-index, #page-course-index, #page-course-index-category) .rui-course-card-deck {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767.98px) {
  :is(#page-course-view-topics, #page-my-index, #page-course-index, #page-course-index-category) .wrapper-xl {
    width: calc(100% - 30px) !important;
  }

  :is(#page-my-index, #page-course-index, #page-course-index-category) .rui-course-card-deck {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }
}