/* ============================================================ */
/* CANVAS CUSTOM CSS — IT Blokada theme for studenti.org.rs    */
/* ============================================================ */


/* ============================================================ */
/* TOKENS                                                        */
/* ============================================================ */

body.context-course_1:not(.is-teacher) {
  --tb-purple: #7c6cf0;
  --tb-purple-dark: #6b5ec4;
  --tb-purple-text: #6c5ce7;
  --tb-purple-soft: #efecfb;
  --tb-purple-bar: #e8e5f7;
  --tb-purple-border-soft: #d8d2f3;
  --tb-ink: #1f2330;
  --tb-muted: #5b6075;
  --tb-bg: #f7f7fb;
  --tb-card: #ffffff;
  --tb-border: #e9e7f5;
  --tb-row-divider: #f0eef8;
  --tb-quiz-bg: #fff0db;
  --tb-quiz-fg: #c97f23;
  --tb-form-bg: #e6f4ff;
  --tb-form-fg: #2974c2;
  --tb-success-bg: #e0f5e9;
  --tb-success-fg: #157a3a;
}


/* ============================================================ */
/* PART 1: HIDING CANVAS CHROME + LAYOUT                         */
/* ============================================================ */

body.context-course_1:not(.is-teacher) .ic-app-header,
body.context-course_1:not(.is-teacher) #mobile-header,
body.context-course_1:not(.is-teacher) #mobileContextNavContainer,
body.context-course_1:not(.is-teacher) #left-side,
body.context-course_1:not(.is-teacher) .ic-app-course-menu,
body.context-course_1:not(.is-teacher) #section-tabs-header,
body.context-course_1:not(.is-teacher) #section-tabs,
body.context-course_1:not(.is-teacher) #section-tabs li.section,
body.context-course_1:not(.is-teacher) ul.section-tabs,
body.context-course_1:not(.is-teacher) li.section,
body.context-course_1:not(.is-teacher) #right-side-wrapper,
body.context-course_1:not(.is-teacher) #right-side,
body.context-course_1:not(.is-teacher) .ic-app-nav-toggle-and-crumbs,
body.context-course_1:not(.is-teacher) #breadcrumbs,
body.context-course_1:not(.is-teacher) #courseMenuToggle,
body.context-course_1:not(.is-teacher) .header-bar,
body.context-course_1.modules:not(.is-teacher) h1.screenreader-only,
body.context-course_1.modules:not(.is-teacher) .context-modules-title,
body.context-course_1.modules:not(.is-teacher) .context-modules-header,
body.context-course_1.pages.show.home:not(.is-teacher) .page-title,
body.context-course_1.pages.show.home:not(.is-teacher) .course-title,
body.context-course_1:not(.is-teacher) #submission_comment,
body.context-course_1:not(.is-teacher) .submission_comment,
body.context-course_1:not(.is-teacher) .submission-details-comments,
body.context-course_1:not(.is-teacher) .comments,
body.context-course_1:not(.is-teacher) #right-side-wrapper-submissions,
body.context-course_1:not(.is-teacher) .submission_details_comments,
body.context-course_1:not(.is-teacher) #right_side {
  display: none !important;
}

/* Full width layout */
body.context-course_1:not(.is-teacher) #wrapper,
body.context-course_1:not(.is-teacher) .ic-Layout-wrapper,
body.context-course_1:not(.is-teacher) .ic-Layout-columns,
body.context-course_1:not(.is-teacher) .ic-app-main-content,
body.context-course_1:not(.is-teacher) #not_right_side,
body.context-course_1:not(.is-teacher) #content-wrapper,
body.context-course_1:not(.is-teacher) .ic-Layout-contentMain,
body.context-course_1:not(.is-teacher) .ic-Layout-contentWrapper {
  margin-left: 0 !important;
  padding-left: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

body.context-course_1:not(.is-teacher) {
  background: var(--tb-bg) !important;
  padding-top: 64px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  color: var(--tb-ink);
}

body.context-course_1:not(.is-teacher) #content {
  background: transparent !important;
  padding: 32px 20px 48px !important;
  min-height: calc(100vh - 64px);
  max-width: 880px !important;
  margin: 0 auto !important;
}

/* In iframes we have no custom top bar — no padding */
body.context-course_1.tb-iframe:not(.is-teacher) {
  padding-top: 0 !important;
}
body.context-course_1.tb-iframe:not(.is-teacher) #content {
  min-height: 0 !important;
}


/* ============================================================ */
/* PART 2: TOP BAR                                                */
/* ============================================================ */

body.context-course_1:not(.is-teacher) #custom-top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: #ffffff;
  border-bottom: 1px solid #e0dce8;
  box-shadow: 0 1px 3px rgba(124, 111, 214, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  z-index: 9999;
  font-family: inherit;
}

body.context-course_1:not(.is-teacher) .custom-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.context-course_1:not(.is-teacher) .custom-bar-right {
  display: flex;
  align-items: center;
}

body.context-course_1:not(.is-teacher) .custom-nav-link {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  color: #6b6b8a;
  padding: 0 16px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  border-bottom: 2px solid transparent;
  height: 64px;
}

body.context-course_1:not(.is-teacher) .custom-nav-link:hover {
  color: var(--tb-purple);
  text-decoration: none;
}

body.context-course_1:not(.is-teacher) .custom-nav-link.active {
  color: #1a1a2e;
  font-weight: 600;
  border-bottom-color: var(--tb-purple);
}

body.context-course_1:not(.is-teacher) #custom-logout-link {
  display: inline-block;
  background: #ffffff;
  color: var(--tb-purple);
  border: 1px solid var(--tb-purple);
  padding: 8px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

body.context-course_1:not(.is-teacher) #custom-logout-link:hover {
  background: var(--tb-purple);
  color: #ffffff;
  border-color: var(--tb-purple);
}


/* ============================================================ */
/* PART 3: LESSON PAGE TITLE                                      */
/* ============================================================ */

body.context-course_1.pages.show:not(.home):not(.is-teacher) .page-title,
body.context-course_1.pages.show:not(.home):not(.is-teacher) h1.page-title,
body.context-course_1:not(.is-teacher) .header-title h2,
body.context-course_1:not(.is-teacher) .page-title-wrapper h1 {
  color: var(--tb-purple) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin: 0 0 28px 0 !important;
  padding: 0 !important;
  letter-spacing: -0.01em !important;
}

body.context-course_1:not(.is-teacher) .page-toolbar-wrapper {
  display: none !important;
}




/* ============================================================ */
/* PART 4: MODULES (Области) — visually align with Assignments    */
/* (CSS only — Canvas's native collapse handler stays untouched)  */
/* ============================================================ */

body.context-course_1:not(.is-teacher) .context_module {
  background: var(--tb-card) !important;
  border: 1px solid var(--tb-border) !important;
  border-radius: 16px !important;
  margin: 0 0 28px 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(20, 20, 40, 0.03) !important;
}

body.context-course_1:not(.is-teacher) #context_modules,
body.context-course_1:not(.is-teacher) #context_modules_sortable_container {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.context-course_1:not(.is-teacher) .context_module .ig-header {
  background: var(--tb-purple-bar) !important;
  border-bottom: 1px solid var(--tb-border) !important;
  padding: 18px 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  border-radius: 0 !important;
}

body.context-course_1:not(.is-teacher) .context_module .ig-header-title,
body.context-course_1:not(.is-teacher) .context_module .ig-header-title .name,
body.context-course_1:not(.is-teacher) .context_module .ig-header .name {
  color: var(--tb-purple-text) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  letter-spacing: -0.01em !important;
}

body.context-course_1:not(.is-teacher) .context_module .prerequisites_message {
  color: var(--tb-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

body.context-course_1:not(.is-teacher) .context_module .ig-header .icon-lock,
body.context-course_1:not(.is-teacher) .context_module .ig-header [class*="lock"] {
  color: #9b8ee0 !important;
}

/* Hide the module-header pill "Заврши све ставке" (native .requirements_message → ul.pill, Canvas
   "Complete All Items"). The info is already clear: empty circles next to items + padlock/„Предуслови".
   The status icon (.completion_status), the name and „Предуслови" stay. Presentation only — gating
   (module completion_requirements) is untouched. Applies to static and lazy-loaded areas (Области). */
body.context-course_1:not(.is-teacher) .context_module .requirements_message { display: none !important; }

body.context-course_1:not(.is-teacher) .context_module .content,
body.context-course_1:not(.is-teacher) .context_module ul.ig-list {
  background: var(--tb-card) !important;
  border: none !important;
}

body.context-course_1:not(.is-teacher) .context_module_item {
  border-bottom: 1px solid var(--tb-row-divider) !important;
  background: var(--tb-card) !important;
  transition: background 0.15s !important;
  list-style: none !important;
}
body.context-course_1:not(.is-teacher) .context_module_item:last-child {
  border-bottom: none !important;
}
body.context-course_1:not(.is-teacher) .context_module_item:hover {
  background: #faf9fc !important;
}

body.context-course_1:not(.is-teacher) .context_module_item .ig-row {
  padding: 14px 22px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

body.context-course_1:not(.is-teacher) .context_module_item .type_icon {
  background: transparent !important;
  color: var(--tb-muted) !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}
body.context-course_1:not(.is-teacher) .context_module_item .type_icon i {
  font-size: 18px !important;
  color: inherit !important;
  margin: 0 !important;
}

body.context-course_1:not(.is-teacher) .context_module_item .ig-title,
body.context-course_1:not(.is-teacher) .context_module_item a.ig-title {
  color: var(--tb-ink) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
}
body.context-course_1:not(.is-teacher) .context_module_item:hover .ig-title {
  color: var(--tb-purple) !important;
}

body.context-course_1:not(.is-teacher) .context_module_item .module-item-status-icon,
body.context-course_1:not(.is-teacher) .context_module_item .ig-details,
body.context-course_1:not(.is-teacher) .context_module_item .points_possible_display,
body.context-course_1:not(.is-teacher) .context_module_item .completion_requirement,
body.context-course_1:not(.is-teacher) .context_module_item .min_score {
  color: var(--tb-muted) !important;
  font-size: 12px !important;
}

body.context-course_1:not(.is-teacher) .context_module.locked .context_module_item,
body.context-course_1:not(.is-teacher) .context_module .context_module_item.locked {
  opacity: 0.55 !important;
}

body.context-course_1:not(.is-teacher) .add_module_link,
body.context-course_1:not(.is-teacher) #add_module_link,
body.context-course_1:not(.is-teacher) .reorder_module_link,
body.context-course_1:not(.is-teacher) .sortable-handle,
body.context-course_1:not(.is-teacher) .header-bar-right {
  display: none !important;
}


/* ============================================================ */
/* PART 5: ASSIGNMENTS (Тестови)                                  */
/* ============================================================ */

body.context-course_1:not(.is-teacher) .assignment-group,
body.context-course_1:not(.is-teacher) .assignment_group {
  background: var(--tb-card) !important;
  border: 1px solid var(--tb-border) !important;
  border-radius: 16px !important;
  margin: 0 0 28px 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(20, 20, 40, 0.03) !important;
}

/* Outer grouping container — not a card */
body.context-course_1:not(.is-teacher) .item-group-container {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.context-course_1:not(.is-teacher) .assignment-group .ig-header,
body.context-course_1:not(.is-teacher) .assignment_group .ig-header {
  background: var(--tb-purple-bar) !important;
  border-bottom: 1px solid var(--tb-border) !important;
  border-radius: 0 !important;
  padding: 18px 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important; /* anchor for the "14 тестова" ::after */
}

body.context-course_1:not(.is-teacher) .assignment-group .ig-header-title,
body.context-course_1:not(.is-teacher) .assignment_group .ig-header-title {
  color: var(--tb-purple-text) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  letter-spacing: -0.01em !important;
}

/* Hide all arrow/toggle icons inside the header (broad catch-all: <i>, <svg>) */
body.context-course_1:not(.is-teacher) .assignment-group .ig-header-title > i,
body.context-course_1:not(.is-teacher) .assignment-group .ig-header-title > svg,
body.context-course_1:not(.is-teacher) .assignment_group .ig-header-title > i,
body.context-course_1:not(.is-teacher) .assignment_group .ig-header-title > svg,
body.context-course_1:not(.is-teacher) .assignment-group .ig-header [class*="icon-arrow"],
body.context-course_1:not(.is-teacher) .assignment-group .ig-header [class*="icon-mini-arrow"],
body.context-course_1:not(.is-teacher) .assignment_group .ig-header [class*="icon-arrow"] {
  display: none !important;
}

/* Spinner in the empty header while Canvas loads the title */
body.context-course_1:not(.is-teacher) .assignment-group .ig-header-title:empty::before,
body.context-course_1:not(.is-teacher) .assignment_group .ig-header-title:empty::before {
  content: '';
  display: inline-block;
  width: 120px;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg,
    rgba(124, 108, 240, 0.10) 0%,
    rgba(124, 108, 240, 0.25) 50%,
    rgba(124, 108, 240, 0.10) 100%);
  background-size: 200% 100%;
  animation: tb-skel 1.2s ease-in-out infinite;
  vertical-align: middle;
}

/* Hardcoded "14 тестова" — absolute right: 22px (same offset as body .ig-details) */
body.context-course_1:not(.is-teacher) .assignment-group .ig-header::after,
body.context-course_1:not(.is-teacher) .assignment_group .ig-header::after {
  content: '14 тестова';
  color: var(--tb-muted);
  font-size: 13px;
  font-weight: 500;
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

body.context-course_1:not(.is-teacher) .assignment-list .ig-row,
body.context-course_1:not(.is-teacher) .assignment_list .ig-row,
body.context-course_1:not(.is-teacher) .assignment .ig-row {
  background: var(--tb-card) !important;
  border-bottom: 1px solid var(--tb-row-divider) !important;
  padding: 14px 22px !important;
  transition: background 0.15s !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
body.context-course_1:not(.is-teacher) .assignment-list .ig-row:hover,
body.context-course_1:not(.is-teacher) .assignment_list .ig-row:hover {
  background: #faf9fc !important;
}
body.context-course_1:not(.is-teacher) .assignment-list .ig-row:last-child,
body.context-course_1:not(.is-teacher) .assignment_list .ig-row:last-child {
  border-bottom: none !important;
}

/* Internal layout — title grows, points on the right */
body.context-course_1:not(.is-teacher) .assignment .ig-row .ig-row__layout,
body.context-course_1:not(.is-teacher) .assignment-list .ig-row .ig-row__layout {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex: 1 1 auto !important;
  width: 100% !important;
}

body.context-course_1:not(.is-teacher) .assignment .ig-info,
body.context-course_1:not(.is-teacher) .assignment-list .ig-info {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* ig-row = flex; ig-details absolute right: 22px (same offset as header ::after) */
body.context-course_1:not(.is-teacher) .assignment .ig-row,
body.context-course_1:not(.is-teacher) .assignment-list .ig-row {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  position: relative !important;
}

body.context-course_1:not(.is-teacher) .assignment .ig-info {
  flex: 1 !important;
  min-width: 0 !important;
}

body.context-course_1:not(.is-teacher) .assignment .ig-details,
body.context-course_1:not(.is-teacher) .assignment-list .ig-row .ig-details,
body.context-course_1:not(.is-teacher) #ag_list .ig-row .ig-details {
  position: absolute !important;
  right: 22px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 !important;
}

/* .js-score = "X/Y поена" — right-align, same right edge as the "14 тестова" header */
body.context-course_1:not(.is-teacher) .ig-details__item.js-score {
  text-align: right !important;
  min-width: 110px !important;
  color: var(--tb-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  display: inline-block !important;
}

body.context-course_1:not(.is-teacher) .points_possible_display,
body.context-course_1:not(.is-teacher) .min_score,
body.context-course_1:not(.is-teacher) .ig-details__item {
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" !important;
}

/* Type icon — purple-soft box; Canvas's native icon-quiz (rocket) stays */
body.context-course_1:not(.is-teacher) .assignment .type_icon,
body.context-course_1:not(.is-teacher) .assignment-list .type_icon,
body.context-course_1:not(.is-teacher) .assignment-list .ig-row .type_icon,
body.context-course_1:not(.is-teacher) #ag_list .ig-row .type_icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  background: var(--tb-purple-soft) !important;
  color: var(--tb-purple-text) !important;
}
body.context-course_1:not(.is-teacher) .assignment .type_icon i,
body.context-course_1:not(.is-teacher) .assignment-list .type_icon i,
body.context-course_1:not(.is-teacher) .assignment-list .ig-row .type_icon i,
body.context-course_1:not(.is-teacher) #ag_list .ig-row .type_icon i {
  font-size: 16px !important;
  color: inherit !important;
  margin: 0 !important;
}

body.context-course_1:not(.is-teacher) .assignment .ig-title,
body.context-course_1:not(.is-teacher) .assignment a.ig-title {
  color: var(--tb-ink) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
}
body.context-course_1:not(.is-teacher) .assignment:hover .ig-title {
  color: var(--tb-purple) !important;
}

/* Points on the right */
body.context-course_1:not(.is-teacher) .assignment .points_possible_display,
body.context-course_1:not(.is-teacher) .assignment-list .points_possible_display,
body.context-course_1:not(.is-teacher) .assignment .score-display,
body.context-course_1:not(.is-teacher) .assignment-list .score-display {
  color: var(--tb-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-left: auto !important;
  flex: 0 0 auto !important;
  text-align: right !important;
  white-space: nowrap !important;
}

body.context-course_1:not(.is-teacher) .assignment .assignment-date-due,
body.context-course_1:not(.is-teacher) .assignment .assignment-date-available,
body.context-course_1:not(.is-teacher) .assignment .ig-details__item-points {
  color: var(--tb-muted) !important;
  font-size: 12px !important;
}

body.context-course_1:not(.is-teacher) #addGroup,
body.context-course_1:not(.is-teacher) .add_assignment,
body.context-course_1:not(.is-teacher) .assignment-buttons {
  display: none !important;
}

/* Reset outer wrappers */
body.context-course_1:not(.is-teacher) #ag_list,
body.context-course_1:not(.is-teacher) #assignment_groups_index,
body.context-course_1:not(.is-teacher) #assignments_list,
body.context-course_1:not(.is-teacher) .assignments-content,
body.context-course_1:not(.is-teacher) #ag_list_holder,
body.context-course_1:not(.is-teacher) .assignment-group ul.assignment-list,
body.context-course_1:not(.is-teacher) .assignment-group ul.assignment_list,
body.context-course_1:not(.is-teacher) .assignment_group ul.assignment-list,
body.context-course_1:not(.is-teacher) .assignment_group ul.assignment_list {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

body.context-course_1:not(.is-teacher) .assignment-group:first-child,
body.context-course_1:not(.is-teacher) .item-group-container:first-child {
  margin-top: 0 !important;
}

/* PART 5B: Тестови — full redesign (#tb-tests). Now rendered SERVER-SIDE (Canvas, mastery student →
   AssignmentsController#index render :mastery_tests) so there is no flash; theme JS bails when #tb-tests
   exists. Anti-flash safety for the fallback (if the native bundle does load anyway): hide the native list until
   the redesign is present (#tb-tests present server-side, or .tb-tests-rebuilt once JS assembles it). */
/* NB: .item-group-container ALSO catches the MODULES container (#context_modules_sortable_container) — so
   we exclude it, otherwise the modules (Области) get hidden from the student. The rest (assignments) still hides. */
body.context-course_1:not(.is-teacher) #content #ag-list,
body.context-course_1:not(.is-teacher) #content [data-view="assignmentGroups"],
body.context-course_1:not(.is-teacher) #content .item-group-container:not(#context_modules_sortable_container) { display: none !important; }
body.context-course_1.tb-tests-rebuilt .header-bar,
body.context-course_1.tb-tests-rebuilt .assignment_index_header,
body.context-course_1.tb-tests-rebuilt .drag_and_drop_warning,
body.context-course_1.tb-tests-rebuilt #assignmentSettingsCog { display: none !important; }
body.context-course_1:not(.is-teacher) #tb-tests { --tb-faint:#8b90a4; }
body.context-course_1:not(.is-teacher) .tb-tests-summary {
  display:flex; align-items:center; gap:28px;
  background:var(--tb-card); border:1px solid var(--tb-border); border-radius:18px;
  box-shadow:0 4px 18px rgba(124,108,240,0.07); padding:24px 26px; margin:0 0 26px;
}
body.context-course_1:not(.is-teacher) .tb-tests-summary .sp { flex:1 1 auto; min-width:0; }
body.context-course_1:not(.is-teacher) .tb-tests-summary .row { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; }
body.context-course_1:not(.is-teacher) .tb-tests-summary .lbl { font-size:13px; font-weight:600; color:var(--tb-muted); }
body.context-course_1:not(.is-teacher) .tb-tests-summary .val { font-size:15px; font-weight:700; color:var(--tb-ink); font-variant-numeric:tabular-nums; }
body.context-course_1:not(.is-teacher) .tb-tests-summary .val b { color:var(--tb-purple-text); }
body.context-course_1:not(.is-teacher) .tb-tests-summary .bar { height:12px; border-radius:999px; background:#ecebf6; overflow:hidden; }
body.context-course_1:not(.is-teacher) .tb-tests-summary .bar > span { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#8b7bf3,#7c6cf0); }

/* Завршетак обуке — card at the end of Области (design_handoff_zavrsetak_obuke; tb-finish-card from masteryFinishCard). */
body.context-course_1:not(.is-teacher) .tb-done-divider { display:flex; align-items:center; gap:14px; margin:30px 2px 22px; color:var(--tb-muted); }
body.context-course_1:not(.is-teacher) .tb-done-divider::before, body.context-course_1:not(.is-teacher) .tb-done-divider::after { content:""; flex:1 1 auto; height:1px; background:linear-gradient(90deg, transparent, var(--tb-purple-border-soft), transparent); }
body.context-course_1:not(.is-teacher) .tb-done-divider span { font-size:11.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--tb-purple-text); white-space:nowrap; }
body.context-course_1:not(.is-teacher) .tb-finish-card { background:var(--tb-card); border:1px solid var(--tb-purple-border-soft); border-radius:16px; overflow:hidden; box-shadow:0 8px 30px rgba(124,108,240,0.12); margin-bottom:22px; }
body.context-course_1:not(.is-teacher) .tb-finish-head { display:flex; align-items:center; gap:12px; padding:16px 22px; background:linear-gradient(100deg,#efeafe 0%,#e7e0fb 100%); border-bottom:1px solid var(--tb-purple-border-soft); }
body.context-course_1:not(.is-teacher) .tb-fh-ic { flex:0 0 auto; display:grid; place-items:center; color:var(--tb-purple-text); }
body.context-course_1:not(.is-teacher) .tb-fh-title { font-size:16px; font-weight:800; color:var(--tb-purple-text); }
body.context-course_1:not(.is-teacher) .tb-fh-badge { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--tb-success-fg); background:var(--tb-success-bg); border:1px solid #bfe6cd; padding:5px 12px; border-radius:999px; }
body.context-course_1:not(.is-teacher) .tb-finish-hero { padding:30px 26px 26px; text-align:center; }
body.context-course_1:not(.is-teacher) .tb-finish-seal { width:64px; height:64px; margin:0 auto 16px; border-radius:999px; background:var(--tb-purple-soft); border:2px solid var(--tb-purple-border-soft); color:var(--tb-purple-text); display:grid; place-items:center; }
body.context-course_1:not(.is-teacher) .tb-finish-hero h2 { margin:0; font-size:22px; font-weight:800; color:var(--tb-ink); letter-spacing:-0.01em; }
body.context-course_1:not(.is-teacher) .tb-finish-sec { border-top:1px solid var(--tb-row-divider); padding:22px 26px; }
body.context-course_1:not(.is-teacher) .tb-finish-sec-head { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
body.context-course_1:not(.is-teacher) .tb-fs-ic { flex:0 0 auto; width:34px; height:34px; border-radius:10px; background:var(--tb-purple-soft); color:var(--tb-purple-text); display:grid; place-items:center; }
body.context-course_1:not(.is-teacher) .tb-finish-sec-head h3 { margin:0; font-size:15px; font-weight:700; color:var(--tb-ink); }
body.context-course_1:not(.is-teacher) .tb-cert-block { display:flex; align-items:center; gap:20px; text-decoration:none; color:inherit; border:1px solid var(--tb-border); border-radius:14px; padding:16px; background:#fff; transition:border-color .18s, box-shadow .18s; }
body.context-course_1:not(.is-teacher) .tb-cert-block:hover { border-color:var(--tb-purple-border-soft); box-shadow:0 8px 22px rgba(124,108,240,.12); text-decoration:none; }
body.context-course_1:not(.is-teacher) .tb-cert-block:hover .tb-finish-btn { background:#6a59e8; }
body.context-course_1:not(.is-teacher) .tb-cert-preview { flex:0 0 auto; width:156px; height:110px; border-radius:10px; border:1px solid var(--tb-border); background:radial-gradient(120% 90% at 50% 100%, rgba(124,108,240,.12) 0%, rgba(124,108,240,0) 60%), linear-gradient(155deg,#fdf3ec 0%,#fbf7fb 45%,#f4f1fc 100%); box-shadow:0 4px 14px rgba(124,108,240,.10); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:12px 14px; text-align:center; overflow:hidden; }
body.context-course_1:not(.is-teacher) .tb-cp-logo { width:24px; height:24px; display:block; margin-bottom:1px; }
body.context-course_1:not(.is-teacher) .tb-cp-title { font-family:Georgia,"Times New Roman",serif; font-size:11px; line-height:1.25; color:var(--tb-ink); font-weight:500; }
body.context-course_1:not(.is-teacher) .tb-cp-title em { font-style:italic; color:var(--tb-purple-text); }
body.context-course_1:not(.is-teacher) .tb-cp-line { width:64%; height:4px; border-radius:3px; background:#e7e2f5; margin-top:2px; }
body.context-course_1:not(.is-teacher) .tb-cp-line.short { width:40%; }
body.context-course_1:not(.is-teacher) .tb-cert-copy { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
body.context-course_1:not(.is-teacher) .tb-cc-text { font-size:13.5px; line-height:1.55; color:var(--tb-muted); }
body.context-course_1:not(.is-teacher) .tb-finish-btn { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; padding:10px 18px; border-radius:10px; background:var(--tb-purple); color:#fff; transition:background .18s; }
body.context-course_1:not(.is-teacher) .tb-man-empty { border:1.5px dashed var(--tb-purple-border-soft); border-radius:12px; padding:24px 22px; display:flex; align-items:center; gap:16px; background:#fbfaff; }
body.context-course_1:not(.is-teacher) .tb-me-ic { flex:0 0 auto; width:42px; height:42px; border-radius:11px; background:var(--tb-purple-soft); color:var(--tb-purple-text); display:grid; place-items:center; }
body.context-course_1:not(.is-teacher) .tb-me-txt p { margin:0; }
body.context-course_1:not(.is-teacher) .tb-me-title { font-size:14px; font-weight:700; color:var(--tb-ink); margin-bottom:4px; }
body.context-course_1:not(.is-teacher) .tb-me-sub { font-size:13px; line-height:1.5; color:var(--tb-muted); }
body.context-course_1:not(.is-teacher) .tb-me-tag { margin-left:auto; flex:0 0 auto; font-size:11.5px; font-weight:700; color:var(--tb-purple-text); background:var(--tb-purple-soft); padding:5px 12px; border-radius:999px; white-space:nowrap; }
body.context-course_1:not(.is-teacher) .tb-man-list { display:flex; flex-direction:column; gap:10px; }
body.context-course_1:not(.is-teacher) .tb-man-item { display:flex; align-items:center; gap:16px; text-decoration:none; color:inherit; border:1px solid var(--tb-border); border-radius:12px; padding:14px 16px; background:#fff; transition:border-color .18s, box-shadow .18s; }
body.context-course_1:not(.is-teacher) .tb-man-item:hover { border-color:var(--tb-purple-border-soft); box-shadow:0 8px 22px rgba(124,108,240,.12); text-decoration:none; }
body.context-course_1:not(.is-teacher) .tb-man-item:hover .tb-man-dl { background:#6a59e8; }
body.context-course_1:not(.is-teacher) .tb-man-txt { flex:1 1 auto; min-width:0; }
body.context-course_1:not(.is-teacher) .tb-man-txt span { display:block; }
body.context-course_1:not(.is-teacher) .tb-man-dl { flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; padding:9px 15px; border-radius:9px; background:var(--tb-purple); color:#fff; transition:background .18s; white-space:nowrap; }
@media (max-width:640px) {
  body.context-course_1:not(.is-teacher) .tb-cert-block { flex-direction:column; align-items:stretch; text-align:center; }
  body.context-course_1:not(.is-teacher) .tb-cert-preview { width:100%; height:120px; }
  body.context-course_1:not(.is-teacher) .tb-man-empty { flex-direction:column; align-items:flex-start; }
  body.context-course_1:not(.is-teacher) .tb-man-item { flex-direction:column; align-items:flex-start; }
  body.context-course_1:not(.is-teacher) .tb-me-tag { margin-left:0; }
}
body.context-course_1:not(.is-teacher) .tb-tests-card {
  background:var(--tb-card); border:1px solid var(--tb-border); border-radius:16px;
  overflow:hidden; box-shadow:0 2px 10px rgba(124,108,240,0.05);
}
body.context-course_1:not(.is-teacher) .tb-tests-head { display:flex; align-items:center; padding:16px 22px; background:#f3f1fc; }
body.context-course_1:not(.is-teacher) .tb-tests-head .t { font-size:15px; font-weight:700; color:var(--tb-purple-text); }
body.context-course_1:not(.is-teacher) .tb-tests-head .m { margin-left:auto; font-size:13px; color:var(--tb-muted); }

body.context-course_1:not(.is-teacher) .tb-trow {
  display:flex; align-items:center; gap:16px; padding:16px 22px;
  border-top:1px solid var(--tb-row-divider); text-decoration:none; color:inherit; transition:background .12s;
}
body.context-course_1:not(.is-teacher) a.tb-trow:hover { background:#faf9fe; }
body.context-course_1:not(.is-teacher) .tb-trow.locked { cursor:default; background:#fbfbfd; }
body.context-course_1:not(.is-teacher) .tb-trow .ic {
  flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--tb-purple-soft); color:var(--tb-purple);
}
body.context-course_1:not(.is-teacher) .tb-trow.locked .ic { background:#f0f0f4; color:#8b90a4; }
body.context-course_1:not(.is-teacher) .tb-trow .tb-tbody { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
body.context-course_1:not(.is-teacher) .tb-trow .name { font-size:15.5px; font-weight:700; color:var(--tb-ink); }
body.context-course_1:not(.is-teacher) .tb-trow.locked .name { color:#9a9eb0; }
body.context-course_1:not(.is-teacher) .tb-trow .sub { font-size:12.5px; color:var(--tb-faint); }
body.context-course_1:not(.is-teacher) .tb-trow .sub b { color:var(--tb-muted); font-weight:600; font-variant-numeric:tabular-nums; }
body.context-course_1:not(.is-teacher) .tb-trow .end { flex:0 0 auto; display:flex; align-items:center; gap:14px; }

body.context-course_1:not(.is-teacher) .tb-tstatus {
  display:inline-flex; align-items:center; justify-content:center; gap:6px; font-size:12.5px; font-weight:700;
  width:138px; padding:6px 0; border-radius:999px; white-space:nowrap;   /* fixed width -> grade badges aligned in two columns */
}
body.context-course_1:not(.is-teacher) .tb-tstatus.passed { background:#e3f7ec; color:#157a3a; }
body.context-course_1:not(.is-teacher) .tb-tstatus.failed { background:#fff1e0; color:#b7791f; }
body.context-course_1:not(.is-teacher) .tb-tstatus.notdone { background:#eef0f5; color:#5b6075; }
body.context-course_1:not(.is-teacher) .tb-tstatus.locked { background:#f0f0f4; color:#8b90a4; }

body.context-course_1:not(.is-teacher) .tb-tgrade {
  flex:0 0 auto; min-width:46px; height:38px; padding:0 12px; border-radius:11px;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  border:1.5px solid var(--tb-border); background:#fff;
}
body.context-course_1:not(.is-teacher) .tb-tgrade .gk { font-size:8.5px; font-weight:700; letter-spacing:0.08em; color:var(--tb-faint); text-transform:uppercase; line-height:1; }
body.context-course_1:not(.is-teacher) .tb-tgrade .gv { font-size:18px; font-weight:800; color:var(--tb-ink); line-height:1.15; font-variant-numeric:tabular-nums; }
body.context-course_1:not(.is-teacher) .tb-tgrade.top { border-color:var(--tb-purple-border-soft); background:var(--tb-purple-soft); }
body.context-course_1:not(.is-teacher) .tb-tgrade.top .gv, body.context-course_1:not(.is-teacher) .tb-tgrade.top .gk { color:var(--tb-purple-text); }
body.context-course_1:not(.is-teacher) .tb-tgrade.placeholder { border-style:dashed; }
body.context-course_1:not(.is-teacher) .tb-tgrade.placeholder .gv { color:#c8c9d4; }

@media (max-width:720px) {
  body.context-course_1:not(.is-teacher) .tb-tests-summary { flex-direction:column; align-items:stretch; gap:18px; }
  body.context-course_1:not(.is-teacher) .tb-trow { flex-wrap:wrap; }
  body.context-course_1:not(.is-teacher) .tb-trow .end { width:100%; padding-left:54px; justify-content:flex-start; }
}


/* ============================================================ */
/* PART 6: GRADES (Оцене)                                         */
/* ============================================================ */

/* Hide the "Оцене за..." title and the Sort/Apply form */
body.context-course_1:not(.is-teacher) .student_assignment .points_possible,
body.context-course_1:not(.is-teacher) #grades_summary_wrapper > h2:first-child,
body.context-course_1:not(.is-teacher) .gradebook-header,
body.context-course_1:not(.is-teacher) #grade-summary-content > h1:first-child,
body.context-course_1:not(.is-teacher) #grade-summary-content > h2:first-child,
body.context-course_1:not(.is-teacher) #content:has(#grades_summary) > h1,
body.context-course_1:not(.is-teacher) #content:has(#grades_summary) > h2,
body.context-course_1:not(.is-teacher) #content:has(#grades_summary) .ic-Action-header,
body.context-course_1:not(.is-teacher) #content:has(#grades_summary) header h1,
body.context-course_1:not(.is-teacher) #content:has(#grades_summary) header h2,
body.context-course_1:not(.is-teacher) #arrange_assignments,
body.context-course_1:not(.is-teacher) .student-grades-right-content,
body.context-course_1:not(.is-teacher) .gradebook-filter,
body.context-course_1:not(.is-teacher) select[name="arrange_assignment_groups"],
body.context-course_1:not(.is-teacher) .assignment_order_select,
body.context-course_1:not(.is-teacher) form#assignment_order_select,
body.context-course_1:not(.is-teacher) form#assignment_order_form,
body.context-course_1:not(.is-teacher) form[id*="assignment_order"],
body.context-course_1:not(.is-teacher) #assignment_order,
body.context-course_1:not(.is-teacher) label[for="assignment_order"],
body.context-course_1:not(.is-teacher) .student_assignment_filter,
body.context-course_1:not(.is-teacher) #content:has(#grades_summary) > form,
body.context-course_1:not(.is-teacher) #content:has(#grades_summary) > div:has(> form),
body.context-course_1:not(.is-teacher) #content:has(#grades_summary) > div:has(select[name*="order"]),
body.context-course_1:not(.is-teacher) #content:has(#grades_summary) > div:has(label[for*="assignment_order"]),
body.context-course_1:not(.is-teacher) #content:has(#grades_summary) form:has(select):has(button),
body.context-course_1:not(.is-teacher) #assignment_sort_order_select_menu,
body.context-course_1:not(.is-teacher) label[for="assignment_sort_order_select_menu"],
body.context-course_1:not(.is-teacher) #apply_select_menus,
body.context-course_1:not(.is-teacher) span:has(> label[for="assignment_sort_order_select_menu"]),
body.context-course_1:not(.is-teacher) span:has(> #apply_select_menus),
body.context-course_1:not(.is-teacher) span:has(#assignment_sort_order_select_menu):has(#apply_select_menus),
body.context-course_1:not(.is-teacher) .print-grades,
body.context-course_1:not(.is-teacher) a.print-grades,
body.context-course_1:not(.is-teacher) button.print-grades,
body.context-course_1:not(.is-teacher) #print-grades-button {
  display: none !important;
}

/* Summary cards (JS injects #tb-grades-summary) */
body.context-course_1:not(.is-teacher) #tb-grades-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0 0 24px 0;
}

body.context-course_1:not(.is-teacher) #tb-grades-summary .stat {
  background: var(--tb-card);
  border: 1px solid var(--tb-border);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(20, 20, 40, 0.03);
}

body.context-course_1:not(.is-teacher) #tb-grades-summary .stat-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tb-muted);
  font-weight: 600;
  margin-bottom: 6px;
}

body.context-course_1:not(.is-teacher) #tb-grades-summary .stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--tb-purple);
  letter-spacing: -0.01em;
}

body.context-course_1:not(.is-teacher) #tb-grades-summary .stat-sub {
  font-size: 13px;
  color: var(--tb-muted);
  margin-top: 4px;
}

/* Grades table */
body.context-course_1:not(.is-teacher) #grades_summary {
  background: var(--tb-card) !important;
  border: 1px solid var(--tb-border) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(20, 20, 40, 0.03) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

body.context-course_1:not(.is-teacher) #grades_summary thead {
  background: var(--tb-purple-bar) !important;
}

body.context-course_1:not(.is-teacher) #grades_summary thead th {
  color: var(--tb-purple-text) !important;
  font-weight: 700 !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--tb-border) !important;
  font-size: 13px !important;
  text-align: left !important;
  background: transparent !important;
}

body.context-course_1:not(.is-teacher) #grades_summary tbody tr {
  border-bottom: 1px solid var(--tb-row-divider) !important;
  background: var(--tb-card) !important;
  transition: background 0.15s !important;
}
body.context-course_1:not(.is-teacher) #grades_summary tbody tr:last-child {
  border-bottom: none !important;
}
body.context-course_1:not(.is-teacher) #grades_summary tbody tr:hover {
  background: #faf9fc !important;
}

body.context-course_1:not(.is-teacher) #grades_summary tbody td,
body.context-course_1:not(.is-teacher) #grades_summary tbody th {
  padding: 8px 14px !important;
  font-size: 14px !important;
  border: none !important;
  vertical-align: middle !important;
  line-height: 1.4 !important;
}

body.context-course_1:not(.is-teacher) #grades_summary tbody th.title,
body.context-course_1:not(.is-teacher) #grades_summary tbody td.title,
body.context-course_1:not(.is-teacher) #grades_summary tbody td:first-child {
  font-weight: 600 !important;
  color: var(--tb-ink) !important;
  text-align: left !important;
}

/* Disable all links in the grades table — titles and score links are
   shown as plain text (no clicking, no cursor on hover). */
body.context-course_1:not(.is-teacher) #grades_summary tbody a {
  color: inherit !important;
  text-decoration: none !important;
  font-weight: inherit !important;
  pointer-events: none !important;
  cursor: default !important;
}

/* Hide Canvas tooltip popups ("Assignments", grade info, score details) */
body.context-course_1:not(.is-teacher) #grades_summary .tooltip_wrap,
body.context-course_1:not(.is-teacher) #grades_summary .tooltip_text,
body.context-course_1:not(.is-teacher) #grades_summary tbody th.title .context,
body.context-course_1:not(.is-teacher) #grades_summary tbody td.title .context,
body.context-course_1:not(.is-teacher) #grades_summary tbody td:first-child .context,
/* Group total row ("Assignments" aggregate) — hide the whole row */
body.context-course_1:not(.is-teacher) #grades_summary tbody tr.group_total,
/* Hide only the Status column (Due/Рок stays visible) */
body.context-course_1:not(.is-teacher) #grades_summary thead th.status,
body.context-course_1:not(.is-teacher) #grades_summary tbody td.status,
/* Hide the empty / utility columns after Score (asset processors, Details, Progress) */
body.context-course_1:not(.is-teacher) #grades_summary #asset_processors_header,
body.context-course_1:not(.is-teacher) #grades_summary thead th:has(> .screenreader-only),
body.context-course_1:not(.is-teacher) #grades_summary tbody td.details,
body.context-course_1:not(.is-teacher) #grades_summary tbody td.toggle_score_details,
body.context-course_1:not(.is-teacher) #grades_summary tbody td.context-course_1-progress,
body.context-course_1:not(.is-teacher) #grades_summary tbody td.submission_progress_status {
  display: none !important;
}

body.context-course_1:not(.is-teacher) #grades_summary tbody th.title a,
body.context-course_1:not(.is-teacher) #grades_summary tbody td.title a,
body.context-course_1:not(.is-teacher) #grades_summary tbody td:first-child a {
  font-weight: 500 !important;
}

body.context-course_1:not(.is-teacher) #grades_summary tbody td.due,
body.context-course_1:not(.is-teacher) #grades_summary tbody td.submitted {
  color: var(--tb-muted) !important;
  font-size: 13px !important;
  text-align: left !important;
}

body.context-course_1:not(.is-teacher) #grades_summary tbody td.assignment_score {
  color: var(--tb-ink) !important;
  font-weight: 600 !important;
  text-align: right !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
}

body.context-course_1:not(.is-teacher) #grades_summary thead th.assignment_score {
  color: var(--tb-purple-text) !important;
  text-align: right !important;
}

/* Grid layout: [grade] [/] [possible-value]. JS splits points_possible
   so that "/" occupies the center column — positioned exactly below the center
   of the word "Резултат" in the header (both centered in the same column). */
body.context-course_1:not(.is-teacher) #grades_summary tbody td.assignment_score .score_holder {
  display: inline-grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: baseline !important;
  column-gap: 6px !important;
}

body.context-course_1:not(.is-teacher) #grades_summary tbody td.assignment_score .tooltip,
body.context-course_1:not(.is-teacher) #grades_summary tbody td.assignment_score .grade {
  text-align: right !important;
}

body.context-course_1:not(.is-teacher) #grades_summary tbody td.assignment_score .points_possible {
  display: contents !important;
  color: var(--tb-muted) !important;
  font-weight: 500 !important;
}

body.context-course_1:not(.is-teacher) #grades_summary tbody td.assignment_score .tb-slash {
  text-align: center !important;
  color: var(--tb-muted) !important;
}

body.context-course_1:not(.is-teacher) #grades_summary tbody td.assignment_score .tb-pp-val {
  text-align: left !important;
  color: var(--tb-muted) !important;
}

body.context-course_1:not(.is-teacher) #grades_summary tbody tr.group_total {
  background: #f5f3fb !important;
  font-weight: 600 !important;
}
body.context-course_1:not(.is-teacher) #grades_summary tbody tr.group_total:hover {
  background: var(--tb-purple-bar) !important;
}
body.context-course_1:not(.is-teacher) #grades_summary tbody tr.group_total td {
  color: var(--tb-purple-text) !important;
}

body.context-course_1:not(.is-teacher) #grades_summary tfoot tr,
body.context-course_1:not(.is-teacher) #grades_summary tbody tr.final_grade {
  background: var(--tb-purple-bar) !important;
  border-top: 1px solid var(--tb-border) !important;
}
body.context-course_1:not(.is-teacher) #grades_summary tfoot td,
body.context-course_1:not(.is-teacher) #grades_summary tbody tr.final_grade td {
  padding: 12px 14px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--tb-purple-text) !important;
  border: none !important;
}


/* ============================================================ */
/* PART 7: LESSON PAGES (Pages content)                           */
/* ============================================================ */

body.context-course_1:not(.is-teacher) .show-content,
body.context-course_1:not(.is-teacher) .user_content {
  background: var(--tb-card) !important;
  border-radius: 16px !important;
  padding: 36px !important;
  box-shadow: 0 1px 2px rgba(20, 20, 40, 0.03) !important;
  border: 1px solid var(--tb-border) !important;
  text-align: center !important;
}

body.context-course_1:not(.is-teacher) .user_content iframe,
body.context-course_1:not(.is-teacher) .show-content iframe,
body.context-course_1:not(.is-teacher) .user_content .embed-container,
body.context-course_1:not(.is-teacher) .show-content .embed-container,
body.context-course_1:not(.is-teacher) .user_content .video-container,
body.context-course_1:not(.is-teacher) .show-content .video-container {
  display: block !important;
  margin: 0 auto !important;
  max-width: 100% !important;
  border-radius: 12px !important;
}

body.context-course_1:not(.is-teacher) .user_content img,
body.context-course_1:not(.is-teacher) .show-content img {
  display: block !important;
  margin: 16px auto !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 12px !important;
}

body.context-course_1:not(.is-teacher) .user_content p,
body.context-course_1:not(.is-teacher) .user_content ul,
body.context-course_1:not(.is-teacher) .user_content ol,
body.context-course_1:not(.is-teacher) .user_content blockquote,
body.context-course_1:not(.is-teacher) .show-content p,
body.context-course_1:not(.is-teacher) .show-content ul,
body.context-course_1:not(.is-teacher) .show-content ol {
  text-align: left !important;
  color: var(--tb-ink) !important;
}
/* Front page cards (Започните обуку / Све области / Резултати): center the description (p),
   overrides .user_content p { text-align:left } above. The marker class tb-fp-cards is on the card grid. */
body.context-course_1:not(.is-teacher) .user_content .tb-fp-cards p,
body.context-course_1:not(.is-teacher) .show-content .tb-fp-cards p {
  text-align: center !important;
}

body.context-course_1:not(.is-teacher) .user_content h1,
body.context-course_1:not(.is-teacher) .user_content h2,
body.context-course_1:not(.is-teacher) .user_content h3,
body.context-course_1:not(.is-teacher) .show-content h1,
body.context-course_1:not(.is-teacher) .show-content h2,
body.context-course_1:not(.is-teacher) .show-content h3 {
  color: var(--tb-purple) !important;
  text-align: center !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* Module sequence footer (Prev/Next below the lesson) — outline */
body.context-course_1:not(.is-teacher) .module-sequence-footer {
  margin: 28px auto !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  gap: 16px !important;
}

body.context-course_1:not(.is-teacher) .module-sequence-footer-content {
  display: flex !important;
  justify-content: center !important;
  gap: 16px !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  height: auto !important;
}

body.context-course_1:not(.is-teacher) .module-sequence-footer-left,
body.context-course_1:not(.is-teacher) .module-sequence-footer-right {
  background: transparent !important;
  border: none !important;
}

body.context-course_1:not(.is-teacher) .module-sequence-padding {
  display: none !important;
}

body.context-course_1:not(.is-teacher) .module-sequence-footer-button .btn,
body.context-course_1:not(.is-teacher) .module-sequence-footer-button button,
body.context-course_1:not(.is-teacher) .module-sequence-footer-button a,
body.context-course_1:not(.is-teacher) .module-sequence-footer-button a.btn,
body.context-course_1:not(.is-teacher) .module-sequence-footer-button .Button,
body.context-course_1:not(.is-teacher) .module-sequence-footer-button [class*="baseButton"] {
  background: #ffffff !important;
  color: var(--tb-ink) !important;
  border: 1px solid var(--tb-border) !important;
  border-radius: 10px !important;
  padding: 9px 18px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(20, 20, 40, 0.04) !important;
  transition: all 0.2s !important;
  min-height: 0 !important;
  height: auto !important;
}

body.context-course_1:not(.is-teacher) .module-sequence-footer-button .btn:hover,
body.context-course_1:not(.is-teacher) .module-sequence-footer-button button:hover,
body.context-course_1:not(.is-teacher) .module-sequence-footer-button a:hover,
body.context-course_1:not(.is-teacher) .module-sequence-footer-button a.btn:hover,
body.context-course_1:not(.is-teacher) .module-sequence-footer-button .Button:hover,
body.context-course_1:not(.is-teacher) .module-sequence-footer-button [class*="baseButton"]:hover {
  background: var(--tb-purple-soft) !important;
  border-color: var(--tb-purple) !important;
  color: var(--tb-purple-text) !important;
}

body.context-course_1:not(.is-teacher) .module-sequence-footer button [class*="baseButton__content"],
body.context-course_1:not(.is-teacher) .module-sequence-footer button [class*="baseButton__children"],
body.context-course_1:not(.is-teacher) .module-sequence-footer button svg,
body.context-course_1:not(.is-teacher) .module-sequence-footer button span {
  color: inherit !important;
  fill: currentColor !important;
}

/* Front Page hero — white text on the purple gradient (override PART 7 h1) */
body.context-course_1:not(.is-teacher) #canvas-front-page h1 {
  color: #ffffff !important;
}
body.context-course_1:not(.is-teacher) #canvas-front-page > div:first-child p {
  color: #ffffff !important;
  text-align: center !important;
}

/* ============================================================ */
/* PART 7C: LOCKED PAGE (prerequisites view)                      */
/* DOM: .show-content > .lock_explanation                         */
/* After AJAX: + <h2>Completion Prerequisites</h2> +              */
/*   <ul id="module_prerequisites_list"> > li.module > h3 + ul    */
/*     > li.requirement > a + .description                        */
/* ============================================================ */

/* Hide the Canvas spinner (.spinner inside .show-content) — our loader is not needed
   because the prerequisites lookup is fast, and the spinner has inline left/top that
   doesn't match our layout. */
body.context-course_1:not(.is-teacher) .show-content > .spinner {
  display: none !important;
}

/* Main explanation container — soft card within .user_content */
body.context-course_1:not(.is-teacher) .lock_explanation {
  background: var(--tb-purple-soft) !important;
  border: 1px solid var(--tb-border) !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
  margin: 20px 0 0 !important;
  text-align: left !important;
  color: var(--tb-ink) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

body.context-course_1:not(.is-teacher) .lock_explanation b,
body.context-course_1:not(.is-teacher) .lock_explanation strong {
  color: var(--tb-purple-text) !important;
}

/* "Completion Prerequisites" h2 (injected by JS) — smaller, left-aligned,
   override of the centered/purple PART 7 h2. */
body.context-course_1:not(.is-teacher) .lock_explanation h2 {
  color: var(--tb-ink) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-align: left !important;
  margin: 18px 0 6px !important;
  padding: 0 !important;
  letter-spacing: 0 !important;
}

/* Prerequisites list (root UL) */
body.context-course_1:not(.is-teacher) #module_prerequisites_list {
  list-style: none !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
}

/* Each module = white sub-card */
body.context-course_1:not(.is-teacher) #module_prerequisites_list > li.module {
  background: #ffffff !important;
  border: 1px solid var(--tb-border) !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  margin: 0 0 10px !important;
  list-style: none !important;
  cursor: default !important;
}

/* Top-level lock icon (one for the whole module) — redundant, hide it */
body.context-course_1:not(.is-teacher) #module_prerequisites_list > li.module > i.icon-lock {
  display: none !important;
}

/* Module name — discreet label, not a large centered purple h3 */
body.context-course_1:not(.is-teacher) #module_prerequisites_list h3 {
  color: var(--tb-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  text-align: left !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: none !important;
}

/* Inner UL (list of requirements) */
body.context-course_1:not(.is-teacher) #module_prerequisites_list > li.module > ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Each requirement — row with a link and a description */
body.context-course_1:not(.is-teacher) #module_prerequisites_list .requirement {
  display: flex !important;
  flex-direction: column !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  list-style: none !important;
  border-top: 1px solid var(--tb-border) !important;
}

body.context-course_1:not(.is-teacher) #module_prerequisites_list .requirement:first-child {
  border-top: none !important;
  padding-top: 4px !important;
}

body.context-course_1:not(.is-teacher) #module_prerequisites_list .requirement:last-child {
  padding-bottom: 4px !important;
}

/* Link inside a requirement */
body.context-course_1:not(.is-teacher) #module_prerequisites_list .requirement a {
  color: var(--tb-purple-text) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  text-decoration: none !important;
}

body.context-course_1:not(.is-teacher) #module_prerequisites_list .requirement a:hover {
  text-decoration: underline !important;
}

/* Lock icon on the link (locked item) */
body.context-course_1:not(.is-teacher) #module_prerequisites_list .requirement a.icon-lock::before {
  color: var(--tb-muted) !important;
  margin-right: 6px !important;
}

/* Locked link — disable the click (Canvas adds an href anyway) */
body.context-course_1:not(.is-teacher) #module_prerequisites_list .requirement a.icon-lock {
  color: var(--tb-muted) !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
  text-decoration: none !important;
}

/* Requirement description ("морате освојити бар 4.0", "морате видети страницу") */
body.context-course_1:not(.is-teacher) #module_prerequisites_list .description {
  color: var(--tb-muted) !important;
  font-size: 13px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  font-weight: 400 !important;
}


/* ============================================================ */
/* PART 8: QUIZ SHOW (test landing — before entering the test)   */
/* ============================================================ */

/* Canvas .alert on quiz pages (e.g. "Тачни одговори су скривени") —
   neutral palette instead of the default reddish one. We don't touch .alert-danger
   (lock_explanation) because it signals a real error/prohibition. */
body.context-course_1:not(.is-teacher) #quiz_show .alert:not(.alert-danger),
body.context-course_1:not(.is-teacher) #questions .alert:not(.alert-danger),
body.context-course_1:not(.is-teacher) .quiz-submission .alert:not(.alert-danger),
body.context-course_1.quizzes:not(.is-teacher) .alert:not(.alert-danger) {
  background: var(--tb-purple-soft) !important;
  color: var(--tb-ink) !important;
  border: 1px solid var(--tb-border) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
}

body.context-course_1:not(.is-teacher) #quiz_show .alert:not(.alert-danger) i,
body.context-course_1:not(.is-teacher) #quiz_show .alert:not(.alert-danger) [class*="icon-"],
body.context-course_1.quizzes:not(.is-teacher) .alert:not(.alert-danger) i,
body.context-course_1.quizzes:not(.is-teacher) .alert:not(.alert-danger) [class*="icon-"] {
  color: var(--tb-purple-text) !important;
}

/* Title "Тест 1" */
body.context-course_1.quizzes:not(.is-teacher) #quiz_show .title,
body.context-course_1.quizzes:not(.is-teacher) #quiz_show h2.title,
body.context-course_1.quizzes:not(.is-teacher) .quiz-header .title,
body.context-course_1.quizzes:not(.is-teacher) #content > h1,
body.context-course_1.quizzes:not(.is-teacher) #content > h2.title,
body.context-course_1.quizzes:not(.is-teacher) #content header h1,
body.context-course_1.quizzes:not(.is-teacher) #content .quiz-edit-header h1,
body.context-course_1.quizzes:not(.is-teacher) .quiz-edit-header h1 {
  color: var(--tb-purple) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin: 0 0 24px 0 !important;
  padding: 0 !important;
  letter-spacing: -0.01em !important;
  border: none !important;
}

/* Quiz info card — Canvas DOM:
   <ul id="quiz_student_details">
     <li><span class="title">До</span><span class="value">...</span></li>...
   </ul>
*/
body.context-course_1:not(.is-teacher) ul#quiz_student_details {
  background: var(--tb-card) !important;
  border: 1px solid var(--tb-border) !important;
  border-radius: 14px !important;
  padding: 18px 22px !important;
  margin: 0 0 20px 0 !important;
  box-shadow: 0 1px 2px rgba(20, 20, 40, 0.03) !important;
  list-style: none !important;
  color: var(--tb-ink) !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 32px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  /* Loading state: children hidden, spinner in the center — same spinner as h3.loading */
  position: relative;
  min-height: 140px;
}

body.context-course_1:not(.is-teacher) ul#quiz_student_details > li {
  opacity: 0;
  transition: opacity 0.18s ease-out;
}

body.context-course_1:not(.is-teacher) ul#quiz_student_details::before {
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: 10px;
  background: linear-gradient(90deg,
    rgba(124, 108, 240, 0.08) 0%,
    rgba(124, 108, 240, 0.22) 50%,
    rgba(124, 108, 240, 0.08) 100%);
  background-size: 200% 100%;
  animation: tb-skel 1.2s ease-in-out infinite;
  pointer-events: none;
}

/* JS adds .tb-ready after the font-size fix — content appears, spinner disappears */
body.context-course_1:not(.is-teacher) ul#quiz_student_details.tb-ready {
  min-height: 0;
}
body.context-course_1:not(.is-teacher) ul#quiz_student_details.tb-ready > li {
  opacity: 1;
}
body.context-course_1:not(.is-teacher) ul#quiz_student_details.tb-ready::before {
  display: none;
}

/* Force 14px on ALL descendants (Canvas may render .title as h2 or strong) */
body.context-course_1:not(.is-teacher) ul#quiz_student_details,
body.context-course_1:not(.is-teacher) ul#quiz_student_details * {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

body.context-course_1:not(.is-teacher) ul#quiz_student_details li {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.context-course_1:not(.is-teacher) ul#quiz_student_details li .title,
body.context-course_1:not(.is-teacher) ul#quiz_student_details li .title * {
  color: var(--tb-purple-text) !important;
  font-weight: 700 !important;
  margin: 0 8px 0 0 !important;
  padding: 0 !important;
  display: inline !important;
  letter-spacing: 0 !important;
  border: none !important;
  background: transparent !important;
}

body.context-course_1:not(.is-teacher) ul#quiz_student_details li .value,
body.context-course_1:not(.is-teacher) ul#quiz_student_details li .value * {
  color: var(--tb-muted) !important;
  font-weight: 400 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline !important;
}

/* "Настави тест" / Take Quiz button wrapper — separate it from the card below */
body.context-course_1.quizzes:not(.is-teacher) .take_quiz_button,
body.context-course_1.quizzes:not(.is-teacher) #take_quiz_form {
  margin-bottom: 32px !important;
}

/* "Упутства" / "Instructions" title + text */
body.context-course_1:not(.is-teacher) #quiz_show > h2,
body.context-course_1:not(.is-teacher) #quiz_show > h3 {
  color: var(--tb-ink) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  text-align: left !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  border: none !important;
  letter-spacing: -0.01em !important;
}

body.context-course_1.quizzes:not(.is-teacher) #quiz_show .description,
body.context-course_1.quizzes:not(.is-teacher) #quiz_show .description.user_content {
  background: var(--tb-card) !important;
  border: 1px solid var(--tb-border) !important;
  border-radius: 14px !important;
  padding: 24px 28px !important;
  margin: 0 0 20px 0 !important;
  text-align: left !important;
  box-shadow: 0 1px 2px rgba(20, 20, 40, 0.03) !important;
}

/* "Историја покушаја" title — indented the same as the table rows */
body.context-course_1:not(.is-teacher) #quiz-submission-version-table-wrapper > h2,
body.context-course_1:not(.is-teacher) #quiz-submission-version-table .desc h3,
body.context-course_1:not(.is-teacher) #quiz-submission-version-table > h3,
body.context-course_1:not(.is-teacher) #quiz_show h3 {
  color: var(--tb-purple-text) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 24px 0 12px 16px !important;
  padding: 0 !important;
  border: none !important;
  text-align: left !important;
}

body.context-course_1:not(.is-teacher) #quiz-submission-version-table .desc {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* Canvas spin.js (disableWhileLoading) injects a gray spinner into the version-table
   during the AJAX call. Hide it, show our purple spinner instead. */
body.context-course_1:not(.is-teacher) #quiz-submission-version-table .spinner,
body.context-course_1:not(.is-teacher) #quiz-submission-version-table > [role="img"],
body.context-course_1:not(.is-teacher) #quiz-submission-version-table > div[style*="position: absolute"] {
  display: none !important;
}

/* Our spinner while the table is not loaded */
body.context-course_1:not(.is-teacher) #quiz-submission-version-table {
  position: relative;
  min-height: 100px;
}

body.context-course_1:not(.is-teacher) #quiz-submission-version-table:not(:has(table))::before {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 10px;
  background: linear-gradient(90deg,
    rgba(124, 108, 240, 0.08) 0%,
    rgba(124, 108, 240, 0.22) 50%,
    rgba(124, 108, 240, 0.08) 100%);
  background-size: 200% 100%;
  animation: tb-skel 1.2s ease-in-out infinite;
  pointer-events: none;
}

/* When the table arrives, drop min-height so the card grows naturally */
body.context-course_1:not(.is-teacher) #quiz-submission-version-table:has(table) {
  min-height: 0;
}

/* No attempts → JS adds .tb-no-attempts; hide the whole block (no history) */
body.context-course_1:not(.is-teacher) #quiz-submission-version-table.tb-no-attempts {
  display: none !important;
}

/* Reset the wrappers that box the history itself into a blank card */
body.context-course_1:not(.is-teacher) #quiz-submission-version-table-wrapper,
body.context-course_1:not(.is-teacher) .quiz_attempts_summary,
body.context-course_1:not(.is-teacher) .quiz_history,
body.context-course_1:not(.is-teacher) #quiz_show > div:has(#quiz-submission-version-table) {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* History table */
body.context-course_1:not(.is-teacher) #quiz-submission-version-table,
body.context-course_1:not(.is-teacher) .quiz_attempts_summary {
  background: #ffffff !important;
  border: 1px solid var(--tb-border) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(124, 111, 214, 0.04) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  margin: 0 0 24px 0 !important;
}

body.context-course_1:not(.is-teacher) #quiz-submission-version-table thead,
body.context-course_1:not(.is-teacher) .quiz_attempts_summary thead {
  background: #faf9fd !important;
}

body.context-course_1:not(.is-teacher) #quiz-submission-version-table thead th,
body.context-course_1:not(.is-teacher) .quiz_attempts_summary thead th {
  color: var(--tb-purple-text) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--tb-border) !important;
  text-align: left !important;
}

body.context-course_1:not(.is-teacher) #quiz-submission-version-table tbody td,
body.context-course_1:not(.is-teacher) .quiz_attempts_summary tbody td {
  padding: 8px 14px !important;
  border-bottom: 1px solid var(--tb-row-divider) !important;
  font-size: 14px !important;
  color: var(--tb-ink) !important;
  line-height: 1.4 !important;
}

body.context-course_1:not(.is-teacher) #quiz-submission-version-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* Links disabled — plain text without tooltip/pointer (like the grades table) */
body.context-course_1:not(.is-teacher) #quiz-submission-version-table tbody a {
  color: inherit !important;
  text-decoration: none !important;
  font-weight: inherit !important;
  pointer-events: none !important;
  cursor: default !important;
}

/* First column (badge) — shrink to content */
body.context-course_1:not(.is-teacher) #quiz-submission-version-table thead tr td:first-child,
body.context-course_1:not(.is-teacher) #quiz-submission-version-table tbody tr th:first-child,
body.context-course_1:not(.is-teacher) #quiz-submission-version-table tbody tr th.ic-Table--header-row {
  width: 1% !important;
  white-space: nowrap !important;
  padding: 8px 12px 8px 14px !important;
}

body.context-course_1:not(.is-teacher) #quiz-submission-version-table tbody th {
  padding: 8px 12px 8px 14px !important;
  border-bottom: 1px solid var(--tb-row-divider) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--tb-ink) !important;
  text-align: left !important;
  background: transparent !important;
  line-height: 1.4 !important;
}

body.context-course_1:not(.is-teacher) #quiz-submission-version-table tbody tr:last-child th {
  border-bottom: none !important;
}

/* "ПОСЛЕДЊИ" pill (JS injects .tb-attempt-pill into the first cell) */
body.context-course_1:not(.is-teacher) .tb-attempt-pill {
  display: inline-block;
  background: var(--tb-purple-soft);
  color: var(--tb-purple-text);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}


/* ============================================================ */
/* PART 9: QUIZ TAKING (when the student is actively taking the test) */
/* ============================================================ */

/* Layout — content centered, room for the fixed bottom action bar */
body.context-course_1.tb-quiz-taking:not(.is-teacher) #content {
  max-width: 720px !important;
  margin: 0 auto !important;
  transform: none !important;
}

body.context-course_1.tb-quiz-taking:not(.is-teacher) {
  padding-bottom: 80px !important;
}

/* Hide Canvas's native .form-actions — JS makes a clone in the bottom bar */
body.context-course_1.tb-quiz-taking:not(.is-teacher) #submit_quiz_form .form-actions {
  display: none !important;
}

/* Quiz take initial loading: Canvas renders <h3 class="loading">Loading...</h3>
   before .loaded appears. Hide the text, show the purple spinner.
   `display` WITHOUT !important — Canvas sets inline style="display:none" when
   loading finishes, so our spinner disappears naturally. */
body.context-course_1:not(.is-teacher) h3.loading {
  font-size: 0 !important;
  color: transparent !important;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  min-height: 200px !important;
  margin: 24px 0 !important;
  background: transparent !important;
  border: none !important;
}

body.context-course_1:not(.is-teacher) h3.loading::after {
  content: '';
  display: block;
  width: 200px;
  height: 16px;
  border-radius: 6px;
  background: linear-gradient(90deg,
    rgba(124, 108, 240, 0.10) 0%,
    rgba(124, 108, 240, 0.25) 50%,
    rgba(124, 108, 240, 0.10) 100%);
  background-size: 200% 100%;
  animation: tb-skel 1.2s ease-in-out infinite;
  margin: 8px auto 0;
}

@keyframes tb-spin {
  to { transform: rotate(360deg); }
}

@keyframes tb-skel {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ----- Quiz header (Тест 1, "Започето:", "Инструкције за квиз") ----- */
body.context-course_1:not(.is-teacher) header.quiz-header {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 24px 0 !important;
  text-align: left !important;
  color: var(--tb-muted) !important;
  font-size: 14px !important;
}

body.context-course_1:not(.is-teacher) header.quiz-header h1 {
  color: var(--tb-ink) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  margin: 0 0 6px 0 !important;
  text-align: left !important;
  letter-spacing: -0.02em !important;
}

/* Header subtitle „Започето: …" (JS-built .tb-tk-started), design .tk-head .started */
body.context-course_1:not(.is-teacher) header.quiz-header .tb-tk-started {
  font-size: 13.5px !important; font-weight: 500 !important; color: #8b90a4 !important;
  margin: 0 0 4px 0 !important; text-align: left !important;
}

/* Упутства (Instructions) card head (purple) — h2 "Упутства за тест" + #quiz-instructions body = one card */
body.context-course_1:not(.is-teacher) header.quiz-header h2 {
  background: var(--tb-purple-soft) !important;
  color: var(--tb-purple-text) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  margin: 18px 0 0 0 !important;
  padding: 15px 22px !important;
  text-align: left !important;
  letter-spacing: -0.01em !important;
  border: 1px solid var(--tb-border) !important;
  border-bottom: 0 !important;
  border-radius: 14px 14px 0 0 !important;
}

body.context-course_1:not(.is-teacher) #quiz-instructions {
  background: var(--tb-card) !important;
  border: 1px solid var(--tb-border) !important;
  border-top: 0 !important;
  border-radius: 0 0 14px 14px !important;
  padding: 18px 22px !important;
  margin: 0 0 24px 0 !important;
  box-shadow: 0 1px 2px rgba(20, 20, 40, 0.03) !important;
  color: var(--tb-ink) !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  text-align: left !important;
}

/* ----- Top stats cards (JS injects #tb-quiz-stats) ----- */
#tb-quiz-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 0 24px 0;
}

#tb-quiz-stats .tb-quiz-stat {
  background: var(--tb-card);
  border: 1px solid var(--tb-border);
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 1px 2px rgba(20, 20, 40, 0.03);
}

#tb-quiz-stats .tb-quiz-stat-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--tb-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

#tb-quiz-stats .tb-quiz-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--tb-purple-text);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

#tb-quiz-stats .tb-quiz-stat-sub {
  font-size: 13px;
  color: var(--tb-muted);
  margin-top: 6px;
}

/* "Питање" section heading before the first question */
/* No "Питање" section heading above the question card — the card banner already shows it. */
.tb-quiz-section-heading { display: none !important; }

/* ----- Question as a card ----- */
body.context-course_1:not(.is-teacher) .display_question {
  background: var(--tb-card) !important;
  border: 1px solid var(--tb-border) !important;
  border-radius: 0 !important;     /* sharp corners (per request: avoids nested-radius cut on banner) */
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  box-shadow: 0 2px 8px rgba(124, 111, 214, 0.04) !important;
}

body.context-course_1:not(.is-teacher) .question_holder .display_question {
  border: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.context-course_1:not(.is-teacher) .display_question > .header {
  background: var(--tb-purple-soft) !important;
  border-radius: 0 !important;
  padding: 16px 24px !important;
  border-bottom: 1px solid #e0dcf3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 !important;
}

body.context-course_1:not(.is-teacher) .display_question .question_name {
  color: var(--tb-purple-text) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: -0.005em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* „Без навигатора" variant: no flagging — hide the Canvas flag/mark button. */
body.context-course_1:not(.is-teacher) .display_question .flag_question,
body.context-course_1:not(.is-teacher) .display_question .ui-buttonset.flag_question,
body.context-course_1:not(.is-teacher) .display_question .question_flag { display: none !important; }

/* "1 поен" — trick: font-size:0 hides " pts", ::after adds " поен" */
body.context-course_1:not(.is-teacher) .display_question .question_points_holder {
  color: var(--tb-purple-text) !important;
  font-weight: 600 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  font-size: 0 !important;
}

/* "1 поен" as a pill (design .pts): white bg, soft purple border, radius 999 */
body.context-course_1:not(.is-teacher) .display_question .question_points {
  display: inline-flex !important; align-items: center !important;
  color: var(--tb-purple-text) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  background: #fff !important;
  border: 1px solid var(--tb-purple-border-soft) !important;
  border-radius: 999px !important;
  padding: 5px 11px !important;
  white-space: nowrap !important;
}

body.context-course_1:not(.is-teacher) .display_question .question_points::after {
  content: ' поен' !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  margin-left: 2px !important;
}

/* Question text */
body.context-course_1:not(.is-teacher) .display_question > .text {
  padding: 24px !important;
  color: var(--tb-ink) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  background: transparent !important;
  border: none !important;
}

body.context-course_1:not(.is-teacher) .display_question .question_text {
  color: var(--tb-ink) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  text-align: left !important;
}

/* ----- Answers ----- */
body.context-course_1:not(.is-teacher) .display_question .answers,
body.context-course_1:not(.is-teacher) .display_question .answers_wrapper {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

body.context-course_1:not(.is-teacher) .display_question .answers fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Options = rounded rows with custom radio/checkbox marks (design_handoff .opt).
   These restyle the REAL form inputs (input.question_input) via appearance:none — name/value/
   type untouched, so Canvas autosave/submit is unaffected. Take page only (#questions.assessing);
   results page overrides with higher #questions.mastery-quiz-results specificity. */
body.context-course_1:not(.is-teacher) .display_question .answer {
  background: #ffffff !important;
  border: 1.5px solid #ececf3 !important;
  border-radius: 12px !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  transition: border-color .12s, background .12s !important;
  display: block !important;
}

body.context-course_1:not(.is-teacher) .display_question .answer:hover {
  background: #faf9fe !important;
  border-color: var(--tb-purple-border-soft) !important;
}

body.context-course_1:not(.is-teacher) .display_question .answer.selected_answer,
body.context-course_1:not(.is-teacher) .display_question .answer:has(input:checked) {
  background: var(--tb-purple-soft) !important;
  border-color: var(--tb-purple) !important;
}

body.context-course_1:not(.is-teacher) .display_question .answer label.answer_row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 13px !important;
  padding: 14px 16px !important;
  cursor: pointer !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  color: var(--tb-muted) !important;
  font-size: 14.5px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
}

body.context-course_1:not(.is-teacher) .display_question .answer .answer_input {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* custom mark = the native input, appearance:none (no name/value change) */
body.context-course_1:not(.is-teacher) .display_question .answer .answer_input input[type="radio"],
body.context-course_1:not(.is-teacher) .display_question .answer .answer_input input[type="checkbox"] {
  -webkit-appearance: none !important; appearance: none !important;
  width: 22px !important; height: 22px !important;
  border: 2px solid #cfcadf !important; background: #fff !important;
  margin: 0 !important; padding: 0 !important; box-sizing: border-box !important;
  cursor: pointer !important; flex: 0 0 auto !important;
  transition: border-color .12s, background .12s !important;
}
body.context-course_1:not(.is-teacher) .display_question .answer .answer_input input[type="checkbox"] { border-radius: 7px !important; }
body.context-course_1:not(.is-teacher) .display_question .answer .answer_input input[type="radio"] { border-radius: 999px !important; }
/* checkbox selected = purple fill + white check */
body.context-course_1:not(.is-teacher) .display_question .answer .answer_input input[type="checkbox"]:checked {
  background: var(--tb-purple) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='3.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='20%206%209%2017%204%2012'/%3E%3C/svg%3E") center/13px no-repeat !important;
  border-color: var(--tb-purple) !important;
}
/* radio selected = white mark + purple dot */
body.context-course_1:not(.is-teacher) .display_question .answer .answer_input input[type="radio"]:checked {
  border-color: var(--tb-purple) !important;
  background: #fff radial-gradient(circle at center, var(--tb-purple) 0 4.5px, transparent 4.5px) !important;
}

body.context-course_1:not(.is-teacher) .display_question .answer .answer_label,
body.context-course_1:not(.is-teacher) .display_question .answer .answer_text,
body.context-course_1:not(.is-teacher) .display_question .answer .answer_html {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: inherit !important;
  font-size: 14.5px !important;
  line-height: 1.45 !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* selected row text = ink + 600 */
body.context-course_1:not(.is-teacher) .display_question .answer.selected_answer label.answer_row,
body.context-course_1:not(.is-teacher) .display_question .answer:has(input:checked) label.answer_row {
  color: var(--tb-ink) !important;
  font-weight: 600 !important;
}

/* ----- Bottom action bar (fixed, full-width background, content 720px) ----- */
#custom-quiz-actionbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: 1px solid var(--tb-border);
  box-shadow: 0 -2px 12px rgba(124, 111, 214, 0.06);
  padding: 14px 0;
  z-index: 9998;
  font-family: inherit;
}

#custom-quiz-actionbar .qab-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#custom-quiz-actionbar .qab-left {
  color: var(--tb-muted);
  font-size: 13.5px;
  font-weight: 600;
  flex: 0 0 auto;
}
#custom-quiz-actionbar .qab-left b { color: var(--tb-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

#custom-quiz-actionbar .qab-center {
  color: #8b90a4;
  font-size: 13px;
  font-weight: 500;
  flex: 0 0 auto;
  margin-left: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
}

#custom-quiz-actionbar .qab-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1faa55;
  box-shadow: 0 0 0 3px rgba(31, 170, 85, 0.16);
  flex: 0 0 auto;
}

#custom-quiz-actionbar .qab-right {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
}

/* subbar submit = primary (design .btn-primary) */
#custom-quiz-actionbar .qab-submit-btn {
  background: var(--tb-purple) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 11px !important;
  padding: 10px 22px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: background .15s, box-shadow .15s !important;
  text-decoration: none !important;
  display: inline-block !important;
  font-family: inherit !important;
  box-shadow: 0 5px 14px rgba(124, 108, 240, 0.28) !important;
}

#custom-quiz-actionbar .qab-submit-btn:hover {
  background: var(--tb-purple-dark) !important;
  box-shadow: 0 7px 18px rgba(124, 108, 240, 0.36) !important;
}

/* ----- Progress bar in the "Питање" stats (JS fills #tb-quiz-bar-fill) ----- */
#tb-quiz-stats .tb-quiz-bar { margin-top: 12px; height: 7px; border-radius: 999px; background: #ecebf6; overflow: hidden; }
#tb-quiz-stats .tb-quiz-bar > span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #8b7bf3, #7c6cf0); transition: width .25s ease; }
#tb-quiz-stats .tb-quiz-stat-value .den { color: #8b90a4; font-weight: 700; }

/* ----- Question banner: hint „Више тачних одговора" (JS .tb-q-hint) + pts pill on the right ----- */
body.context-course_1:not(.is-teacher) .display_question > .header .question_points_holder { margin-left: auto !important; }
body.context-course_1:not(.is-teacher) .display_question .tb-q-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--tb-muted); }
body.context-course_1:not(.is-teacher) .display_question .tb-q-hint svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* ----- Native Prev/Next buttons (bottom of the card) → ghost; inline „Предај тест" → primary ----- */
body.context-course_1:not(.is-teacher) #submit_quiz_form .button-container { display: flex !important; align-items: center !important; gap: 12px !important; padding: 4px 22px 22px !important; background: transparent !important; border: 0 !important; }
body.context-course_1:not(.is-teacher) #submit_quiz_form .button-container .Button { font: inherit !important; font-size: 14px !important; font-weight: 700 !important; padding: 11px 20px !important; border-radius: 11px !important; cursor: pointer !important; border: 1px solid var(--tb-border) !important; background: #fff !important; color: var(--tb-muted) !important; transition: all .15s !important; box-shadow: none !important; min-width: 0 !important; }
body.context-course_1:not(.is-teacher) #submit_quiz_form .button-container .Button:hover { border-color: var(--tb-purple-border-soft) !important; color: var(--tb-purple-text) !important; }
body.context-course_1:not(.is-teacher) #submit_quiz_form .button-container .next-question { margin-left: auto !important; }
body.context-course_1:not(.is-teacher) #submit_quiz_form .button-container .tb-quiz-submit-inline { margin-left: auto !important; background: var(--tb-purple) !important; color: #fff !important; border-color: var(--tb-purple) !important; box-shadow: 0 5px 14px rgba(124, 108, 240, 0.28) !important; }
body.context-course_1:not(.is-teacher) #submit_quiz_form .button-container .tb-quiz-submit-inline:hover { background: var(--tb-purple-dark) !important; }

/* ----- Ordering (matching) → arrow-reorder UI (design_handoff_polaganje_testa 2). JS builds it
   from the native <select>s and writes order back into them; here is presentation only. ----- */
body.context-course_1:not(.is-teacher) .tb-ord-help { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:#8b90a4; margin:0 0 16px; }
body.context-course_1:not(.is-teacher) .tb-ord-help svg { width:15px; height:15px; flex:0 0 auto; }
body.context-course_1:not(.is-teacher) ul.tb-ord { display:flex; flex-direction:column; gap:10px; list-style:none; margin:0; padding:0; }
body.context-course_1:not(.is-teacher) li.tb-ord-item { display:flex; align-items:center; gap:14px; padding:13px 14px 13px 12px; background:#fff; border:1.5px solid #ececf3; border-radius:12px; transition:border-color .14s, background .14s; }
body.context-course_1:not(.is-teacher) li.tb-ord-item:hover { border-color:var(--tb-purple-border-soft); background:#faf9fe; }
body.context-course_1:not(.is-teacher) li.tb-ord-item.tb-ord-flash { border-color:var(--tb-purple); background:var(--tb-purple-soft); }
body.context-course_1:not(.is-teacher) .tb-ord-rank { flex:0 0 auto; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--tb-purple); color:#fff; font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; }
body.context-course_1:not(.is-teacher) .tb-ord-label { flex:1 1 auto; min-width:0; font-size:14.5px; line-height:1.4; color:var(--tb-ink); font-weight:500; }
body.context-course_1:not(.is-teacher) .tb-ord-moves { flex:0 0 auto; display:flex; flex-direction:column; gap:3px; }
body.context-course_1:not(.is-teacher) button.tb-ord-move { width:26px; height:22px; border-radius:6px; border:1px solid var(--tb-border); background:#fff; display:grid; place-items:center; cursor:pointer; color:var(--tb-muted); padding:0; transition:all .12s; }
body.context-course_1:not(.is-teacher) button.tb-ord-move:hover:not(:disabled) { border-color:var(--tb-purple); color:var(--tb-purple); background:#faf9fe; }
body.context-course_1:not(.is-teacher) button.tb-ord-move:disabled { opacity:.35; cursor:default; }
body.context-course_1:not(.is-teacher) button.tb-ord-move svg { width:13px; height:13px; }


/* ============================================================ */
/* PART 9B: PAGE-LEVEL SKELETON LOADER                            */
/* JS adds body.tb-loaded at the end of the run() function.       */
/* Until then — #content hidden, skeleton cards over #content.    */
/* The skeleton has a 250ms delay to avoid a flash on fast loads. */
/* ============================================================ */

body.context-course_1:not(.is-teacher) #content {
  transition: opacity 0.18s ease-out;
}

body.context-course_1:is(.pages, .modules, .assignments, .grades, .quizzes):not(.is-teacher):not(.tb-loaded) #content {
  opacity: 0;
}

body.context-course_1:is(.pages, .modules, .assignments, .grades, .quizzes):not(.is-teacher):not(.tb-loaded)::before,
body.context-course_1:is(.pages, .modules, .assignments, .grades, .quizzes):not(.is-teacher):not(.tb-loaded)::after {
  content: '';
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 40px), 840px);
  border-radius: 14px;
  background: linear-gradient(90deg,
    rgba(124, 108, 240, 0.08) 0%,
    rgba(124, 108, 240, 0.22) 50%,
    rgba(124, 108, 240, 0.08) 100%);
  background-size: 200% 100%;
  animation: tb-skel 1.2s ease-in-out infinite;
  z-index: 5000;
  pointer-events: none;
}

body.context-course_1:is(.pages, .modules, .assignments, .grades, .quizzes):not(.is-teacher):not(.tb-loaded)::before {
  top: 96px;
  height: 60px;
}

body.context-course_1:is(.pages, .modules, .assignments, .grades, .quizzes):not(.is-teacher):not(.tb-loaded)::after {
  top: 172px;
  height: min(720px, calc(100vh - 200px));
}


/* ============================================================ */
/* PART 11: LOGIN PAGE (prijava-v2 design)                        */
/* JS injects: #tb-login-ribbon, .tb-login-lead,                  */
/* .tb-login-panel-head, .tb-login-foot, .tb-login-pillars,       */
/* .tb-login-signoff, .tb-login-attrib + Manrope/Source Serif 4.  */
/* ============================================================ */

body.ic-Login-Body {
  --tb-purple: #7c6cf0;
  --tb-purple-deep: #5b4cd4;
  --tb-purple-text: #6c5ce7;
  --tb-purple-soft: #efecfb;
  --tb-peach: #f5c382;
  --tb-ink: #1f2330;
  --tb-muted: #5b6075;
  --tb-card: #ffffff;
  --tb-border: #e9e7f5;
  --tb-field-border: #d8d3ea;

  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  color: var(--tb-ink) !important;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(900px 600px at 12% 0%, rgba(245, 195, 130, 0.35) 0%, rgba(245, 195, 130, 0) 60%),
    radial-gradient(900px 700px at 100% 100%, rgba(124, 108, 240, 0.28) 0%, rgba(124, 108, 240, 0) 60%),
    linear-gradient(180deg, #faf9ff 0%, #f4f1fb 100%) !important;
}

body.ic-Login-Body * { box-sizing: border-box; }

/* ----- Ribbon "ОТВОРЕН УПИС" ----- */
body.ic-Login-Body #tb-login-ribbon {
  position: fixed;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--tb-border);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tb-purple-deep);
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(70, 50, 160, 0.06);
  z-index: 5;
}

body.ic-Login-Body .tb-login-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tb-purple);
  box-shadow: 0 0 0 0 rgba(124, 108, 240, 0.5);
  animation: tb-login-pulse 1.8s infinite;
}

@keyframes tb-login-pulse {
  0% { box-shadow: 0 0 0 0 rgba(124, 108, 240, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(124, 108, 240, 0); }
  100% { box-shadow: 0 0 0 0 rgba(124, 108, 240, 0); }
}

/* ----- Stage layout (.ic-Login is our stage container) ----- */
body.ic-Login-Body .ic-Login {
  background: transparent !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 80px 20px 40px !important;
}

body.ic-Login-Body .ic-Login__container {
  width: 100% !important;
  max-width: 500px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

/* ----- Lead (mission heading above the card) ----- */
body.ic-Login-Body .tb-login-lead {
  text-align: center;
  padding: 0 8px;
}

body.ic-Login-Body .tb-login-lead h1 {
  margin: 0 0 10px;
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: #1a1e2c;
  text-wrap: pretty;
}

body.ic-Login-Body .tb-login-accent {
  font-style: italic;
  color: var(--tb-purple-deep);
}

body.ic-Login-Body .tb-login-lead p {
  margin: 0;
  margin-inline: auto;
  color: var(--tb-muted);
  font-size: 14px;
  line-height: 1.55;
  max-width: 360px;
  text-wrap: pretty;
}

/* ----- Card (.ic-Login__content) ----- */
body.ic-Login-Body .ic-Login__content {
  background: var(--tb-card) !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 24px !important;
  width: 100% !important;
  box-shadow:
    0 26px 60px -28px rgba(70, 50, 160, 0.28),
    0 1px 3px rgba(20, 20, 40, 0.04) !important;
}

body.ic-Login-Body .ic-Login__innerContent {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  /* Canvas default: 2px lavender border + bg — reset */
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.ic-Login-Body .ic-Login__body {
  /* Canvas default: 2px lavender border + bg — reset */
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ----- Canvas header (logo + register banner) — hide default logo ----- */
body.ic-Login-Body .ic-Login-header {
  display: none !important;
}

/* ----- Panel head ("Унесите податке") ----- */
body.ic-Login-Body .tb-login-panel-head h2 {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tb-ink);
}

/* ----- Form (login fields) ----- */
body.ic-Login-Body .ic-Login__body {
  margin: 0 !important;
  padding: 0 !important;
}

/* Login + Forgot forms — Canvas jQuery toggle uses $.hide/$.show which
   set style="display: none" / clear the inline display. We apply our grid layout
   ONLY when it is NOT inline-hidden, so the toggle works correctly. */
body.ic-Login-Body #login_form,
body.ic-Login-Body #forgot_password_form {
  gap: 12px;
  margin: 0;
}
body.ic-Login-Body #login_form:not([style*="display: none"]):not([style*="display:none"]),
body.ic-Login-Body #forgot_password_form:not([style*="display: none"]):not([style*="display:none"]) {
  display: grid !important;
}

body.ic-Login-Body .ic-Form-control,
body.ic-Login-Body .ic-Form-control--login {
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 5px !important;
}

body.ic-Login-Body .ic-Label,
body.ic-Login-Body label.ic-Label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #2b2f44 !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

body.ic-Login-Body .ic-Input,
body.ic-Login-Body input.ic-Input,
body.ic-Login-Body input[type="text"].ic-Input,
body.ic-Login-Body input[type="password"].ic-Input,
body.ic-Login-Body input[type="email"].ic-Input {
  width: 100% !important;
  box-sizing: border-box !important;
  height: 42px !important;
  padding: 0 12px !important;
  border: 1px solid var(--tb-field-border) !important;
  border-radius: 10px !important;
  background: #ffffff none !important; /* none → removes Canvas autofill/icon bg */
  background-image: none !important;
  color: var(--tb-ink) !important;
  font-size: 14px !important;
  font-family: inherit !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  outline: none !important;
}

/* Forgot password instructions */
body.ic-Login-Body #forgot_password_instructions,
body.ic-Login-Body .ic-Login__forgot-text {
  font-size: 13px !important;
  color: var(--tb-muted) !important;
  margin: 0 0 4px !important;
  line-height: 1.5 !important;
}

/* Forgot password — "Back to Login" link and Request Password in the same row */
body.ic-Login-Body #forgot_password_form .ic-Login__actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body.ic-Login-Body #forgot_password_form .ic-Login__actions .ic-Login__actions--left,
body.ic-Login-Body #forgot_password_form .ic-Login__link.login_link {
  color: var(--tb-purple-text) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  flex: 0 0 auto !important;
}

body.ic-Login-Body #forgot_password_form .ic-Login__link.login_link:hover {
  text-decoration: underline !important;
}

body.ic-Login-Body #forgot_password_form .Button--login {
  margin-top: 0 !important;
  flex: 1 1 auto !important;
}

body.ic-Login-Body .ic-Input:focus,
body.ic-Login-Body input.ic-Input:focus {
  border-color: var(--tb-purple) !important;
  box-shadow: 0 0 0 4px rgba(124, 108, 240, 0.15) !important;
}

/* ----- Actions row ----- */
body.ic-Login-Body .ic-Login__actions {
  display: grid !important;
  gap: 10px !important;
  margin: 0 !important;
}

body.ic-Login-Body .ic-Login__actions-timeout {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  font-size: 12.5px !important;
  color: #2b2f44 !important;
}

body.ic-Login-Body .ic-Login__actions-timeout input[type="checkbox"] {
  margin-right: 8px !important;
  width: 15px !important;
  height: 15px !important;
  accent-color: var(--tb-purple) !important;
}

body.ic-Login-Body .ic-Login__actions-timeout .ic-Login__forgot {
  margin-left: auto !important;
}

body.ic-Login-Body .ic-Login__actions-timeout label {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #2b2f44 !important;
  cursor: pointer;
  user-select: none;
}

body.ic-Login-Body .ic-Login__actions-timeout input[type="checkbox"] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  vertical-align: middle !important;
}

body.ic-Login-Body .ic-Login__forgot a,
body.ic-Login-Body .ic-Login__forgot .login_link,
body.ic-Login-Body .ic-Login__link.login_link {
  color: var(--tb-purple-text) !important;
  text-decoration: none !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

body.ic-Login-Body .ic-Login__forgot a:hover {
  text-decoration: underline !important;
}

/* ----- Submit button ----- */
body.ic-Login-Body .Button--login,
body.ic-Login-Body button.Button--login,
body.ic-Login-Body input.Button--login {
  width: 100% !important;
  box-sizing: border-box !important;
  background: var(--tb-purple) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 11px !important;
  padding: 0 16px !important;
  height: 44px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: background 0.15s, transform 0.05s !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 4px !important;
}

body.ic-Login-Body .Button--login:hover {
  background: #6b5ae8 !important;
}

body.ic-Login-Body .Button--login:active {
  transform: translateY(1px) !important;
}

body.ic-Login-Body .Button--login:focus {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(124, 108, 240, 0.18) !important;
}

/* ----- Enroll CTA ("Нисте још уписани на курс?") ----- */
body.ic-Login-Body .tb-login-enroll-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--tb-border);
  border-radius: 12px;
  background: linear-gradient(180deg, #faf8ff 0%, #f5f1fb 100%);
  text-decoration: none !important;
  color: inherit !important;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.05s;
}

body.ic-Login-Body .tb-login-enroll-cta:hover {
  border-color: var(--tb-purple);
  box-shadow: 0 4px 14px -8px rgba(124, 108, 240, 0.4);
}

body.ic-Login-Body .tb-login-enroll-cta:active {
  transform: translateY(1px);
}

body.ic-Login-Body .tb-enroll-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--tb-purple-soft);
  color: var(--tb-purple-deep);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

body.ic-Login-Body .tb-enroll-txt {
  flex: 1;
  min-width: 0;
}

body.ic-Login-Body .tb-enroll-t {
  font-size: 13px;
  font-weight: 700;
  color: var(--tb-ink);
  margin-bottom: 2px;
}

body.ic-Login-Body .tb-enroll-s {
  font-size: 12px;
  color: var(--tb-muted);
  line-height: 1.4;
}

body.ic-Login-Body .tb-enroll-arr {
  color: var(--tb-purple-text);
  flex: 0 0 auto;
}

/* ----- Foot ("Потребна помоћ?") ----- */
body.ic-Login-Body .tb-login-foot {
  margin-top: 14px;
  text-align: center;
  color: #8a8fa3;
  font-size: 12px;
}

body.ic-Login-Body .tb-login-foot a {
  color: var(--tb-purple-text);
  text-decoration: none;
  font-weight: 600;
}

body.ic-Login-Body .tb-login-foot a:hover {
  text-decoration: underline;
}

/* ----- Self-reg banner — hide (replaced by the mission lead above the card) ----- */
body.ic-Login-Body .ic-Login__register-banner,
body.ic-Login-Body .ic-Login-header__links {
  display: none !important;
}

/* ----- Forgot password form (toggle) ----- */
body.ic-Login-Body .ic-Login__forgot-text {
  font-size: 13px !important;
  color: var(--tb-muted) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

body.ic-Login-Body .ic-Login__actions--left {
  flex: 1 !important;
}

/* ----- Pillars (3 columns) ----- */
body.ic-Login-Body .tb-login-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 4px;
}

body.ic-Login-Body .tb-pillar {
  text-align: center;
  padding: 12px 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--tb-border);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

body.ic-Login-Body .tb-pillar-ico {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--tb-purple-soft);
  color: var(--tb-purple-text);
  margin: 0 auto 6px;
  display: grid;
  place-items: center;
}

body.ic-Login-Body .tb-pillar-t {
  font-size: 12px;
  font-weight: 600;
  color: #2b2f44;
}

body.ic-Login-Body .tb-pillar-s {
  font-size: 10.5px;
  color: var(--tb-muted);
  margin-top: 1px;
}

/* ----- Signoff (paragraph below the pillars) ----- */
body.ic-Login-Body .tb-login-signoff {
  text-align: center;
  margin: 8px 0 0;
  color: #8a8fa3;
  font-size: 11.5px;
  line-height: 1.5;
}

body.ic-Login-Body .tb-login-signoff strong {
  color: var(--tb-purple-deep);
  font-weight: 700;
}

/* ----- Attribution ----- */
body.ic-Login-Body .tb-login-attrib {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--tb-border);
  text-align: center;
  color: #9094a8;
  font-size: 11px;
  line-height: 1.5;
}

body.ic-Login-Body .tb-login-attrib a {
  color: var(--tb-purple-text);
  text-decoration: none;
  font-weight: 600;
}

body.ic-Login-Body .tb-login-attrib a:hover {
  text-decoration: underline;
}

body.ic-Login-Body .tb-attrib-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

body.ic-Login-Body .tb-attrib-logo-row {
  margin: 6px 0 6px;
  text-align: center;
}

body.ic-Login-Body .tb-attrib-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none !important;
  color: inherit !important;
}

body.ic-Login-Body .tb-attrib-logo svg {
  height: 14px !important;
  width: auto !important;
  display: block;
}

body.ic-Login-Body .tb-attrib-logo svg .st0,
body.ic-Login-Body .tb-attrib-logo svg path,
body.ic-Login-Body .tb-attrib-logo svg polygon {
  fill: currentColor !important;
}

body.ic-Login-Body .tb-attrib-logo:hover {
  color: var(--tb-purple-text) !important;
}

/* ----- Hide Canvas's original footer (replaced by our attribution) ----- */
/* We use an ID + tag selector to beat Canvas's #footer rule. */
body.ic-Login-Body footer#footer,
body.ic-Login-Body footer.ic-Login-footer,
body.ic-Login-Body #footer.ic-Login-footer,
body.ic-Login-Body #footer-links,
body.ic-Login-Body #footer-epilogue {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ----- SSO buttons (if auth providers are configured) ----- */
body.ic-Login-Body .ic-Login__auth-providers {
  display: grid !important;
  gap: 10px !important;
  margin-top: 12px !important;
}

body.ic-Login-Body .ic-Login__auth-providers .Button {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

@media (max-width: 460px) {
  body.ic-Login-Body .tb-login-lead h1 { font-size: 22px; }
  body.ic-Login-Body #tb-login-ribbon { font-size: 11px; padding: 6px 12px; }
  /* forced desktop login on mobile too — prevent pillars overflow on a narrow screen */
  body.ic-Login-Body .tb-login-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  body.ic-Login-Body .ic-Login { padding: 40px 14px 32px !important; }
}


/* ============================================================ */
/* PART 12: ENROLLMENT PAGE (self-enroll)                         */
/* Canvas DOM (views/self_enrollments/_authenticate.html.erb):    */
/*   body.body--login-confirmation                                */
/*     #modal-box.ic-Login-confirmation                           */
/*       header.ic-Login-confirmation__header (Canvas logo)       */
/*       .ic-Login-confirmation__content                          */
/*         h2.ic-Login-confirmation__headline                     */
/*         #enroll_form.ic-Self-enrollment-form                   */
/*           div (registration summary)                           */
/*           p ("Please enter your Email and password:")          */
/*           .ic-Form-control #email_info (email)                 */
/*           .ic-Form-control (password)                          */
/*           .ic-Self-enrollment-footer                           */
/* JS injects: #tb-enroll-back, .tb-enroll-header-band,          */
/* .tb-enroll-pill, .tb-enroll-heading, .tb-enroll-info-grid      */
/* ============================================================ */

body.body--login-confirmation {
  --tb-purple: #7c6cf0;
  --tb-purple-deep: #5b4cd4;
  --tb-purple-text: #6c5ce7;
  --tb-purple-soft: #efecfb;
  --tb-peach: #f5c382;
  --tb-ink: #1f2330;
  --tb-muted: #5b6075;
  --tb-card: #ffffff;
  --tb-border: #e9e7f5;
  --tb-field-border: #d8d3ea;

  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  color: var(--tb-ink) !important;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(900px 600px at 12% 0%, rgba(245, 195, 130, 0.35) 0%, rgba(245, 195, 130, 0) 60%),
    radial-gradient(900px 700px at 100% 100%, rgba(124, 108, 240, 0.28) 0%, rgba(124, 108, 240, 0) 60%),
    linear-gradient(180deg, #faf9ff 0%, #f4f1fb 100%) !important;
}

body.body--login-confirmation * { box-sizing: border-box; }

/* "← Назад на пријаву" (JS-injected) */
body.body--login-confirmation #tb-enroll-back {
  position: absolute;
  top: 24px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tb-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  z-index: 10;
}

body.body--login-confirmation #tb-enroll-back:hover {
  color: var(--tb-purple-text);
}

body.body--login-confirmation #tb-enroll-back svg {
  flex: 0 0 auto;
}

/* Floating "ОТВОРЕН УПИС" pill — mirror of #tb-login-ribbon from the login page.
   Fixed to the viewport (not to #modal-box), centered horizontally at the top. */
body.body--login-confirmation #tb-enroll-ribbon {
  position: fixed;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--tb-border);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tb-purple-deep);
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(70, 50, 160, 0.06);
  z-index: 5;
}

body.body--login-confirmation .tb-enroll-ribbon-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tb-purple);
  box-shadow: 0 0 0 0 rgba(124, 108, 240, 0.5);
  animation: tb-login-pulse 1.8s infinite;
}

/* Layout — centered card. The stage (#main/#content) is flex-centered, so
   #modal-box only defines the width — vertical padding is not needed. */
body.body--login-confirmation #modal-box {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 0;
}

body.body--login-confirmation #modal-box.ic-Login-confirmation {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: 500px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Hide Canvas's default logo header */
body.body--login-confirmation .ic-Login-confirmation__header {
  display: none !important;
}

/* Header band is no longer used on this page (only on the logged-in enroll) */
body.body--login-confirmation .tb-enroll-header-band {
  display: none !important;
}

/* Lead (pill + title + sublead) — ABOVE the white card, centered */
body.body--login-confirmation .tb-enroll-lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  margin-top: 12px;
}
body.body--login-confirmation .tb-enroll-lead .tb-enroll-pill {
  align-self: center;
}
body.body--login-confirmation .tb-enroll-sublead {
  margin: 0;
  max-width: 480px;
  color: var(--tb-muted);
  font-size: 14px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* Panel head ("Унесите податке") — first element inside the white card.
   The login analog (.tb-login-panel-head h2) has margin 0 0 14px inside .ic-Login__content
   with padding 24px; here there is no card padding, so we impose it on panel-head + form. */
body.body--login-confirmation .tb-enroll-panel-head {
  margin: 24px 24px 14px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tb-ink);
}

body.body--login-confirmation .ic-Login-confirmation__content {
  background: var(--tb-card) !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 0 !important;
  box-shadow:
    0 26px 60px -28px rgba(70, 50, 160, 0.28),
    0 1px 3px rgba(20, 20, 40, 0.04) !important;
  overflow: hidden;
}

/* Header band (JS-injected) — icon + course title */
body.body--login-confirmation .tb-enroll-header-band {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(245, 195, 130, 0.18) 0%, rgba(124, 108, 240, 0.16) 100%);
  border-bottom: 1px solid var(--tb-border);
}

body.body--login-confirmation .tb-enroll-header-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #ffffff;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  box-shadow: 0 2px 8px rgba(70, 50, 160, 0.08);
  overflow: hidden;
}

body.body--login-confirmation .tb-enroll-header-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}

body.body--login-confirmation .tb-enroll-header-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--tb-ink);
}

/* Body content — same dimensions and gap as the login form (.ic-Login__content) */
body.body--login-confirmation .ic-Login-confirmation__content > #enroll_form,
body.body--login-confirmation .ic-Self-enrollment-form {
  padding: 0 24px 24px !important;
  margin: 0 !important;
  display: grid !important;
  gap: 12px !important;
  background: transparent !important;
  border: none !important;
}

/* Hide Canvas's default H2 ("Enroll in...") — replaced by a custom heading */
body.body--login-confirmation .ic-Login-confirmation__headline {
  display: none !important;
}

/* Pill "УПИС НА КУРС" (JS-injected) */
body.body--login-confirmation .tb-enroll-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--tb-purple-soft);
  color: var(--tb-purple-deep);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.body--login-confirmation .tb-enroll-pill::before {
  content: none;
}

body.body--login-confirmation .tb-enroll-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tb-purple);
  box-shadow: 0 0 0 0 rgba(124, 108, 240, 0.5);
  animation: tb-login-pulse 1.8s infinite;
  flex: 0 0 auto;
}

/* Foot link below the submit button — "Потребна помоћ? Контактирајте подршку" */
body.body--login-confirmation .tb-enroll-foot {
  margin-top: 14px;
  text-align: center;
  color: #8a8fa3;
  font-size: 12px;
}
body.body--login-confirmation .tb-enroll-foot a {
  color: var(--tb-purple-text);
  text-decoration: none;
  font-weight: 600;
}
body.body--login-confirmation .tb-enroll-foot a:hover {
  text-decoration: underline;
}

/* Heading (JS-injected) */
body.body--login-confirmation .tb-enroll-heading {
  margin: 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: #1a1e2c;
  text-wrap: pretty;
}

body.body--login-confirmation .tb-enroll-accent {
  font-style: italic;
  color: var(--tb-purple-deep);
}

/* Canvas's "You are enrolling in <course>" summary and "Please enter..."
   paragraph — moved into .tb-enroll-lead above the card; hide here. */
body.body--login-confirmation .ic-Self-enrollment-form > div:not([class*="tb-"]):not(.ic-Form-control):not(.ic-Self-enrollment-footer-modal-layout):not(.ic-Self-enrollment-footer):not(.ic-Form-group),
body.body--login-confirmation .ic-Self-enrollment-form > p {
  display: none !important;
}

/* 3 pillar cards BELOW the white card (Трајање / Области / Тестова) */
body.body--login-confirmation .tb-enroll-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

body.body--login-confirmation .tb-enroll-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--tb-border);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

body.body--login-confirmation .tb-enroll-pillar-ico {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--tb-purple-soft);
  color: var(--tb-purple-text);
  margin: 0 auto 6px;
  display: grid;
  place-items: center;
}

body.body--login-confirmation .tb-enroll-pillar-t {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tb-muted);
}

body.body--login-confirmation .tb-enroll-pillar-s {
  font-size: 16px;
  font-weight: 700;
  color: #2b2f44;
  margin-top: 4px;
}

/* Signoff paragraph at the bottom */
body.body--login-confirmation .tb-enroll-signoff {
  text-align: center;
  margin: 4px 0 16px;
  color: #8a8fa3;
  font-size: 11.5px;
  line-height: 1.5;
}
body.body--login-confirmation .tb-enroll-signoff strong {
  color: var(--tb-purple-deep);
  font-weight: 700;
}

/* Auto "create" mode: we hide the radio choice (JS forces create). Both user_info
   sections (#create_user_info → Full Name, #log_in_user_info → Password) have
   inline display:none — we override to show BOTH.
   Backbone changeAction does .hide()/.show() on them on every radio change,
   so we need !important to cancel that. */
body.body--login-confirmation #initial_action {
  display: none !important;
}
body.body--login-confirmation #create_user_info,
body.body--login-confirmation #log_in_user_info {
  display: block !important;
}

/* Reset Canvas's horizontal form-group to a vertical grid layout */
body.body--login-confirmation .ic-Self-enrollment-form .ic-Form-group,
body.body--login-confirmation .ic-Self-enrollment-form .ic-Form-group--horizontal {
  display: grid !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Wrapper divs that the Canvas backbone view uses (create_user_info,
   email_info, log_in_user_info) — make them plain containers without spacing. */
body.body--login-confirmation #create_user_info,
body.body--login-confirmation #email_info,
body.body--login-confirmation #log_in_user_info {
  margin: 0 !important;
  padding: 0 !important;
}

/* Submit button — Canvas inlines visibility:hidden until the user clicks a radio.
   Since we hid the radio, we release the button via CSS (JS already sets the style,
   but this is a fallback for FOUC and in case the Backbone view re-renders the button
   with display:none after our JS interventions). */
body.body--login-confirmation #submit_button {
  visibility: visible !important;
  display: inline-block !important;
}

/* Form fields */
body.body--login-confirmation .ic-Form-control {
  display: grid !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

body.body--login-confirmation .ic-Label,
body.body--login-confirmation label.ic-Label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #2b2f44 !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

body.body--login-confirmation .ic-Input,
body.body--login-confirmation input.ic-Input {
  width: 100% !important;
  box-sizing: border-box !important;
  height: 42px !important;
  padding: 0 12px !important;
  border: 1px solid var(--tb-field-border) !important;
  border-radius: 10px !important;
  background: #ffffff none !important;
  background-image: none !important;
  color: var(--tb-ink) !important;
  font-size: 14px !important;
  font-family: inherit !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  outline: none !important;
}

body.body--login-confirmation .ic-Input:focus {
  border-color: var(--tb-purple) !important;
  box-shadow: 0 0 0 4px rgba(124, 108, 240, 0.15) !important;
}

/* Footer — privacy link on the left, submit button on the right (split row). */
body.body--login-confirmation .ic-Self-enrollment-footer-modal-layout {
  margin-top: 4px !important;
}

body.body--login-confirmation .ic-Self-enrollment-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: wrap !important;
}

body.body--login-confirmation .ic-Self-enrollment-footer__Secondary {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  flex: 0 1 auto !important;
}

body.body--login-confirmation .ic-Self-enrollment-footer__Primary {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

body.body--login-confirmation .footer-info,
body.body--login-confirmation a.footer-info {
  color: var(--tb-purple-text) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

body.body--login-confirmation .footer-info:hover {
  text-decoration: underline !important;
}

/* Hide Canvas's auto-injected external-link icon. Our text/SVG stay.
   We catch: any svg that isn't ours, anything that comes AFTER our icon in the DOM
   (general sibling), and the typical Canvas output tags (i, img, ui-icon-extlink,
   screenreader-only) plus both pseudo-elements. */
body.body--login-confirmation .footer-info svg:not(.tb-privacy-icon),
body.body--login-confirmation .footer-info .tb-privacy-icon ~ *,
body.body--login-confirmation .footer-info i,
body.body--login-confirmation .footer-info img,
body.body--login-confirmation .footer-info .ui-icon-extlink,
body.body--login-confirmation .footer-info .screenreader-only {
  display: none !important;
}
body.body--login-confirmation .footer-info::before,
body.body--login-confirmation .footer-info::after {
  display: none !important;
  content: none !important;
}

body.body--login-confirmation .footer-info .tb-privacy-icon {
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: middle;
}

body.body--login-confirmation .btn.btn-primary,
body.body--login-confirmation button.btn-primary {
  visibility: visible !important;
  background: var(--tb-purple) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 11px !important;
  padding: 0 22px !important;
  height: 44px !important;
  width: auto !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: none !important;
  text-transform: none !important;
  transition: background 0.15s, transform 0.05s !important;
}

body.body--login-confirmation .btn.btn-primary:hover {
  background: #6b5ae8 !important;
}

body.body--login-confirmation .btn.btn-primary:active {
  transform: translateY(1px) !important;
}

/* Submit button no longer has an arrow — like login "Пријави се" */

@media (max-width: 460px) {
  body.body--login-confirmation .tb-enroll-heading { font-size: 26px; }
  body.body--login-confirmation .tb-enroll-pillar { padding: 10px 6px; }
}


/* ============================================================ */
/* PART 12C: ENROLLMENT REDIRECT — spinner overlay                */
/* Two triggers:                                                  */
/* 1) html.tb-enroll-redirecting — JS adds it synchronously when it detects */
/*    ?enrolled=1 on /enroll/<code>, before window.location.replace. */
/* 2) :has() on the server-rendered "successfully enrolled" marker */
/*    of the page (a[href*="registration_success"] inside #enroll_form). */
/*    This is render-blocking detection — it acts as soon as the parser reaches */
/*    that link, so the Canvas chrome doesn't get to paint the content. */
/* The CSS is in <head> (loaded sync), so the rules apply before the defer JS. */
/* ============================================================ */

html.tb-enroll-redirecting,
html.tb-enroll-redirecting body,
html:has(body #enroll_form a[href*="registration_success"]),
html:has(body #enroll_form a[href*="registration_success"]) body {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
  background:
    radial-gradient(900px 600px at 12% 0%, rgba(245, 195, 130, 0.35) 0%, rgba(245, 195, 130, 0) 60%),
    radial-gradient(900px 700px at 100% 100%, rgba(124, 108, 240, 0.28) 0%, rgba(124, 108, 240, 0) 60%),
    linear-gradient(180deg, #faf9ff 0%, #f4f1fb 100%) !important;
  overflow: hidden !important;
}

html.tb-enroll-redirecting body > *,
html:has(body #enroll_form a[href*="registration_success"]) body > * {
  display: none !important;
  visibility: hidden !important;
}

html.tb-enroll-redirecting body::before,
html:has(body #enroll_form a[href*="registration_success"]) body::before {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  border: 4px solid #efecfb;
  border-top-color: #7c6cf0;
  animation: tb-enroll-redirect-spin 0.8s linear infinite;
  z-index: 9999;
}

@keyframes tb-enroll-redirect-spin {
  to { transform: rotate(360deg); }
}


/* ============================================================ */
/* PART 12B: ENROLLMENT PAGE — LOGGED-IN STATE                    */
/* /enroll/<code> when the student is logged in (already enrolled etc.). */
/* JS adds body.tb-enroll-logged-in. The Canvas chrome is hidden.  */
/* ============================================================ */

body.tb-enroll-logged-in {
  --tb-purple: #7c6cf0;
  --tb-purple-deep: #5b4cd4;
  --tb-purple-text: #6c5ce7;
  --tb-purple-soft: #efecfb;
  --tb-peach: #f5c382;
  --tb-ink: #1f2330;
  --tb-muted: #5b6075;
  --tb-card: #ffffff;
  --tb-border: #e9e7f5;
  --tb-field-border: #d8d3ea;

  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  color: var(--tb-ink) !important;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(900px 600px at 12% 0%, rgba(245, 195, 130, 0.35) 0%, rgba(245, 195, 130, 0) 60%),
    radial-gradient(900px 700px at 100% 100%, rgba(124, 108, 240, 0.28) 0%, rgba(124, 108, 240, 0) 60%),
    linear-gradient(180deg, #faf9ff 0%, #f4f1fb 100%) !important;
}

body.tb-enroll-logged-in * { box-sizing: border-box; }

/* Hide all Canvas chrome — scoped through CSS :has() so it applies as soon as
   the parser reaches #enroll_form. Our theme JS is defer (Canvas helper) so
   it doesn't arrive before the body parse; :has() is render-blocking-CSS-driven detection
   and catches FOUC without waiting for JS. */
html.tb-enroll-page .ic-app-header,
html.tb-enroll-page #mobile-header,
html.tb-enroll-page #mobileContextNavContainer,
html.tb-enroll-page #left-side,
html.tb-enroll-page .ic-app-course-menu,
html.tb-enroll-page #section-tabs,
html.tb-enroll-page ul.section-tabs,
html.tb-enroll-page #right-side-wrapper,
html.tb-enroll-page #right-side,
html.tb-enroll-page .ic-app-nav-toggle-and-crumbs,
html.tb-enroll-page #breadcrumbs,
html.tb-enroll-page .header-bar,
html.tb-enroll-page footer#footer,
html.tb-enroll-page .ic-Login-footer,
body:has(#enroll_form) .ic-app-header,
body:has(#enroll_form) #mobile-header,
body:has(#enroll_form) #mobileContextNavContainer,
body:has(#enroll_form) #left-side,
body:has(#enroll_form) .ic-app-course-menu,
body:has(#enroll_form) #section-tabs,
body:has(#enroll_form) ul.section-tabs,
body:has(#enroll_form) #right-side-wrapper,
body:has(#enroll_form) #right-side,
body:has(#enroll_form) .ic-app-nav-toggle-and-crumbs,
body:has(#enroll_form) #breadcrumbs,
body:has(#enroll_form) .header-bar,
body:has(#enroll_form) footer#footer,
body:has(#enroll_form) .ic-Login-footer,
/* Server-side body class — render-blocking before the parser reaches
   #enroll_form. Eliminates the chrome flash (left nav, top header). */
body.self-enrollment-page .ic-app-header,
body.self-enrollment-page #mobile-header,
body.self-enrollment-page #mobileContextNavContainer,
body.self-enrollment-page #left-side,
body.self-enrollment-page .ic-app-course-menu,
body.self-enrollment-page #section-tabs,
body.self-enrollment-page ul.section-tabs,
body.self-enrollment-page #right-side-wrapper,
body.self-enrollment-page #right-side,
body.self-enrollment-page .ic-app-nav-toggle-and-crumbs,
body.self-enrollment-page #breadcrumbs,
body.self-enrollment-page .header-bar,
body.self-enrollment-page footer#footer,
body.self-enrollment-page .ic-Login-footer {
  display: none !important;
}

/* Full-width layout (reset Canvas margins) */
html.tb-enroll-page #wrapper,
html.tb-enroll-page .ic-Layout-wrapper,
html.tb-enroll-page .ic-Layout-columns,
html.tb-enroll-page #not_right_side,
html.tb-enroll-page #content-wrapper,
html.tb-enroll-page .ic-Layout-contentMain,
html.tb-enroll-page .ic-Layout-contentWrapper,
body:has(#enroll_form) #wrapper,
body:has(#enroll_form) .ic-Layout-wrapper,
body:has(#enroll_form) .ic-Layout-columns,
body:has(#enroll_form) #not_right_side,
body:has(#enroll_form) #content-wrapper,
body:has(#enroll_form) .ic-Layout-contentMain,
body:has(#enroll_form) .ic-Layout-contentWrapper {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
  background: transparent !important;
}

html.tb-enroll-page #main,
html.tb-enroll-page #content,
body:has(#enroll_form) #main,
body:has(#enroll_form) #content {
  background: transparent !important;
  padding: 80px 20px 40px !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  /* Stage layout — mirror of .ic-Login on the login page: vertically centered
     content, min-height so the card doesn't float at the top when there's enough room. */
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* The card is #modal-box (when the student is logged in, there is no .ic-Login-confirmation__content wrapper) */
body.tb-enroll-logged-in #modal-box {
  background: var(--tb-card) !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  box-shadow:
    0 26px 60px -28px rgba(70, 50, 160, 0.28),
    0 1px 3px rgba(20, 20, 40, 0.04) !important;
  overflow: hidden;
}

/* Header band */
body.tb-enroll-logged-in .tb-enroll-header-band {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(245, 195, 130, 0.18) 0%, rgba(124, 108, 240, 0.16) 100%);
  border-bottom: 1px solid var(--tb-border);
}

body.tb-enroll-logged-in .tb-enroll-header-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #ffffff;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  box-shadow: 0 2px 8px rgba(70, 50, 160, 0.08);
  overflow: hidden;
}

body.tb-enroll-logged-in .tb-enroll-header-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}

body.tb-enroll-logged-in .tb-enroll-header-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--tb-ink);
}

/* enroll_form — now acts as the card body */
body.tb-enroll-logged-in #enroll_form.ic-Self-enrollment-form {
  padding: 24px !important;
  margin: 0 !important;
  display: grid !important;
  gap: 16px !important;
  background: transparent !important;
  border: none !important;
}

body.tb-enroll-logged-in .tb-enroll-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--tb-purple-soft);
  color: var(--tb-purple-deep);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.tb-enroll-logged-in .tb-enroll-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tb-purple);
}

/* Green variant — "АКТИВАН УПИС" */
body.tb-enroll-logged-in .tb-enroll-pill-active {
  background: #e0f5e9 !important;
  color: #157a3a !important;
}

body.tb-enroll-logged-in .tb-enroll-pill-active::before {
  background: #16a34a !important;
}

body.tb-enroll-logged-in .tb-enroll-heading {
  margin: 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: #1a1e2c;
}

body.tb-enroll-logged-in .tb-enroll-accent {
  font-style: italic;
  color: var(--tb-purple-deep);
}

body.tb-enroll-logged-in #enroll_form > p {
  font-size: 14px !important;
  color: var(--tb-muted) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

body.tb-enroll-logged-in #enroll_form > p strong {
  color: var(--tb-ink) !important;
  font-weight: 700 !important;
}

/* Course info card (icon + label/name + stats) */
body.tb-enroll-logged-in .tb-enroll-course-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--tb-border);
  border-radius: 12px;
  background: #fafafd;
  margin: 4px 0;
}

body.tb-enroll-logged-in .tb-enroll-course-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--tb-purple-soft);
  color: var(--tb-purple-deep);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

body.tb-enroll-logged-in .tb-enroll-course-info {
  flex: 1;
  min-width: 0;
}

body.tb-enroll-logged-in .tb-enroll-course-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--tb-muted);
  text-transform: uppercase;
  margin-bottom: 2px;
}

body.tb-enroll-logged-in .tb-enroll-course-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--tb-ink);
  line-height: 1.3;
}

body.tb-enroll-logged-in .tb-enroll-course-stats {
  display: flex;
  gap: 14px;
  font-size: 13px;
  color: var(--tb-muted);
  flex: 0 0 auto;
}

body.tb-enroll-logged-in .tb-enroll-course-stats strong {
  color: var(--tb-ink);
  font-weight: 700;
  margin-right: 2px;
}

/* Footer (buttons row) — primary on the left, secondary on the right */
body.tb-enroll-logged-in .ic-Self-enrollment-footer-modal-layout {
  margin-top: 8px !important;
}

body.tb-enroll-logged-in .ic-Self-enrollment-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

body.tb-enroll-logged-in .ic-Self-enrollment-footer__Primary {
  display: flex !important;
  gap: 10px !important;
  flex-direction: row-reverse !important; /* primary (btn-primary) visually first */
}

/* "Грешка у упису? Контактирајте подршку" */
body.tb-enroll-logged-in .tb-enroll-foot {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--tb-border);
  text-align: center;
  font-size: 12.5px;
  color: var(--tb-muted);
}

body.tb-enroll-logged-in .tb-enroll-foot a {
  color: var(--tb-purple-text);
  text-decoration: none;
  font-weight: 600;
}

body.tb-enroll-logged-in .tb-enroll-foot a:hover {
  text-decoration: underline;
}

body.tb-enroll-logged-in .btn,
body.tb-enroll-logged-in a.btn {
  background: #ffffff !important;
  color: var(--tb-purple-text) !important;
  border: 1px solid var(--tb-border) !important;
  border-radius: 11px !important;
  padding: 0 18px !important;
  height: 42px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: border-color 0.15s, background 0.15s !important;
}

body.tb-enroll-logged-in .btn:hover {
  border-color: var(--tb-purple) !important;
  background: var(--tb-purple-soft) !important;
}

body.tb-enroll-logged-in .btn.btn-primary,
body.tb-enroll-logged-in a.btn.btn-primary {
  background: var(--tb-purple) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
}

body.tb-enroll-logged-in .btn.btn-primary:hover {
  background: #6b5ae8 !important;
}

body.tb-enroll-logged-in .btn.btn-primary::after {
  content: '→';
  font-size: 16px;
  font-weight: 600;
}

@media (max-width: 460px) {
  body.tb-enroll-logged-in .tb-enroll-heading { font-size: 22px; }
  body.tb-enroll-logged-in .ic-Self-enrollment-footer { justify-content: stretch; }
  body.tb-enroll-logged-in .ic-Self-enrollment-footer__Primary { flex: 1; flex-wrap: wrap; }
  body.tb-enroll-logged-in .btn { flex: 1 1 auto; justify-content: center; }
}

/* ----- Enroll skeleton (all /enroll/* URLs, both states) ----- */
/* html.tb-enroll-page is set SYNC in JS — runs before run(), without a flash */

/* Hide Canvas's default H2 ("Enrol in <course>") immediately — JS would only do this
   at DOMContentLoaded, but the H2 arrives earlier. Override with CSS. */
html.tb-enroll-page .ic-Login-confirmation__headline,
html.tb-enroll-page #content > h2:first-child,
html.tb-enroll-page #content > h1:first-child {
  display: none !important;
}

/* Hide content until the body has .tb-loaded */
html.tb-enroll-page body:not(.tb-loaded) #content,
html.tb-enroll-page body:not(.tb-loaded) #modal-box {
  opacity: 0;
}

html.tb-enroll-page body {
  transition: opacity 0.18s ease-out;
}

html.tb-enroll-page body:not(.tb-loaded) #content,
html.tb-enroll-page body:not(.tb-loaded) #modal-box {
  transition: opacity 0.18s ease-out;
}

/* ===== Enroll skeleton — several placeholder blocks that resemble the real form ===== */

/* Container that JS injects sync into <html> before the body. */
html.tb-enroll-page #tb-enroll-skel {
  position: fixed;
  inset: 0;
  z-index: 5000;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 20px 40px;
  opacity: 1;
  transition: opacity 0.22s ease-out;
  /* Opaque purple gradient — covers the Canvas chrome flash before our JS
     gets to add the hide classes. */
  background:
    radial-gradient(900px 600px at 12% 0%, rgba(245, 195, 130, 0.35) 0%, rgba(245, 195, 130, 0) 60%),
    radial-gradient(900px 700px at 100% 100%, rgba(124, 108, 240, 0.28) 0%, rgba(124, 108, 240, 0) 60%),
    linear-gradient(180deg, #faf9ff 0%, #f4f1fb 100%);
}

/* The body is fully hidden while the skeleton fades. The skeleton is a sibling of the body
   (child of html) so it stays visible. We use the server-side body class
   `self-enrollment-page` (added in SelfEnrollmentsController#new) — it is parsed
   as soon as the parser reaches the <body class="..."> tag, BEFORE any body content.
   Eliminates the flash of both Canvas chrome AND old content. */
body.self-enrollment-page:not(.tb-loaded) {
  visibility: hidden !important;
}

/* Post-enroll skeleton — no outer padding; inner .tb-skel-home takes over
   the exact geometry of #canvas-front-page (max-width 980, padding 24 12 40). */
html.tb-post-enroll-home #tb-enroll-skel {
  padding: 0;
}

/* Post-enroll home skeleton — mirror postEnrollHomeHTML layout.
   Individual margin-tops instead of gap to match the real section spacings
   (28/28/20/36) in the rendered content. */
html.tb-enroll-page #tb-enroll-skel .tb-skel-home {
  width: 100%;
  max-width: 980px;
  display: flex;
  flex-direction: column;
  padding: 24px 12px 40px;
  box-sizing: border-box;
}

html.tb-enroll-page #tb-enroll-skel .tb-skel-home-banner {
  height: 230px;
  border-radius: 18px;
}

html.tb-enroll-page #tb-enroll-skel .tb-skel-home-info {
  height: 140px;
  border-radius: 16px;
  margin-top: 20px;
}

html.tb-enroll-page #tb-enroll-skel .tb-skel-home-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

html.tb-enroll-page #tb-enroll-skel .tb-skel-home-action {
  height: 190px;
  border-radius: 16px;
}

html.tb-enroll-page #tb-enroll-skel .tb-skel-home-secondary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

html.tb-enroll-page #tb-enroll-skel .tb-skel-home-secondary-card {
  height: 130px;
  border-radius: 16px;
}

html.tb-enroll-page #tb-enroll-skel .tb-skel-home-foot {
  height: 14px;
  width: 70px;
  margin: 24px auto 0;
  border-radius: 7px;
}

html.tb-loaded #tb-enroll-skel {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease-out, visibility 0s linear 0.22s;
}

html.tb-enroll-page #tb-enroll-skel .tb-skel-card {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

html.tb-enroll-page #tb-enroll-skel .tb-skel-card > .tb-skel-row {
  width: 100%;
  max-width: 480px;
}

html.tb-enroll-page #tb-enroll-skel .tb-skel-card-box {
  width: 100%;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--tb-border);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 6px;
}

html.tb-enroll-page #tb-enroll-skel .tb-skel-pillars {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 4px;
}

html.tb-enroll-page #tb-enroll-skel .tb-skel-pillar {
  height: 90px;
  border-radius: 16px;
}

html.tb-enroll-page #tb-enroll-skel .tb-skel-panel-head { height: 18px; width: 140px; }
html.tb-enroll-page #tb-enroll-skel .tb-skel-signoff { height: 12px; width: 90%; margin-top: 4px; }

html.tb-enroll-page #tb-enroll-skel .tb-skel-row {
  border-radius: 12px;
  background: linear-gradient(90deg,
    rgba(124, 108, 240, 0.08) 0%,
    rgba(124, 108, 240, 0.22) 50%,
    rgba(124, 108, 240, 0.08) 100%);
  background-size: 200% 100%;
  animation: tb-skel 1.2s ease-in-out infinite;
}

/* Header band */
html.tb-enroll-page #tb-enroll-skel .tb-skel-band { height: 60px; border-radius: 14px; }
/* Pill */
html.tb-enroll-page #tb-enroll-skel .tb-skel-pill { height: 24px; width: 110px; border-radius: 999px; margin-top: 6px; }
/* Heading lines */
html.tb-enroll-page #tb-enroll-skel .tb-skel-h-1 { height: 22px; width: 85%; }
html.tb-enroll-page #tb-enroll-skel .tb-skel-h-2 { height: 22px; width: 60%; }
/* Subline */
html.tb-enroll-page #tb-enroll-skel .tb-skel-sub { height: 12px; width: 75%; margin-top: 4px; }
/* Info grid */
html.tb-enroll-page #tb-enroll-skel .tb-skel-grid { height: 68px; border-radius: 12px; }
/* Form fields */
html.tb-enroll-page #tb-enroll-skel .tb-skel-field { height: 56px; border-radius: 10px; }
/* Footer row */
html.tb-enroll-page #tb-enroll-skel .tb-skel-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
html.tb-enroll-page #tb-enroll-skel .tb-skel-foot-link { height: 18px; width: 140px; }
html.tb-enroll-page #tb-enroll-skel .tb-skel-foot-btn { height: 44px; width: 160px; border-radius: 11px; }

/* The old ::before/::after pseudo-skeleton is no longer needed — we use #tb-enroll-skel. */


/* ============================================================ */
/* PART 10: MOBILE ADAPTATIONS                                    */
/* ============================================================ */

@media (max-width: 768px) {
  body.context-course_1:not(.is-teacher) {
    padding-top: 56px !important;
  }

  body.context-course_1:not(.is-teacher) #custom-top-bar {
    height: 56px;
    padding: 0 12px;
  }
  body.context-course_1:not(.is-teacher) .custom-bar-left { gap: 2px; }
  body.context-course_1:not(.is-teacher) .custom-nav-link {
    padding: 0 10px;
    font-size: 13px;
    height: 56px;
  }
  body.context-course_1:not(.is-teacher) #custom-logout-link {
    padding: 6px 12px;
    font-size: 13px;
  }

  body.context-course_1:not(.is-teacher) #content {
    padding: 20px 12px 32px !important;
  }

  /* Assignments / Grades — less rounding and padding */
  body.context-course_1:not(.is-teacher) .item-group-container,
  body.context-course_1:not(.is-teacher) .assignment-group,
  body.context-course_1:not(.is-teacher) #grades_summary {
    border-radius: 14px !important;
  }

  body.context-course_1:not(.is-teacher) .item-group-container .ig-header,
  body.context-course_1:not(.is-teacher) .assignment-group .ig-header {
    padding: 14px 18px !important;
  }

  body.context-course_1:not(.is-teacher) .item-group-container .ig-header-title,
  body.context-course_1:not(.is-teacher) .assignment-group .ig-header-title {
    font-size: 16px !important;
  }

  body.context-course_1:not(.is-teacher) .assignment .ig-row {
    padding: 12px 18px !important;
    gap: 12px !important;
  }

  body.context-course_1:not(.is-teacher) .assignment .type_icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
  }

  /* Lessons */
  body.context-course_1:not(.is-teacher) .show-content,
  body.context-course_1:not(.is-teacher) .user_content {
    padding: 22px !important;
    border-radius: 14px !important;
  }

  body.context-course_1.pages.show:not(.home):not(.is-teacher) .page-title,
  body.context-course_1.pages.show:not(.home):not(.is-teacher) h1.page-title {
    font-size: 22px !important;
    margin-bottom: 20px !important;
  }

  body.context-course_1:not(.is-teacher) .module-sequence-footer-button .btn {
    padding: 10px 18px !important;
    font-size: 13px !important;
  }

  /* Grades summary — 1 column */
  body.context-course_1:not(.is-teacher) #tb-grades-summary {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 20px;
  }
  body.context-course_1:not(.is-teacher) #tb-grades-summary .stat {
    padding: 14px 16px;
  }

  body.context-course_1:not(.is-teacher) #grades_summary thead th,
  body.context-course_1:not(.is-teacher) #grades_summary tbody td,
  body.context-course_1:not(.is-teacher) #grades_summary tbody th {
    padding: 12px 10px !important;
    font-size: 13px !important;
  }

  /* Quiz info card — 1 column */
  body.context-course_1:not(.is-teacher) ul#quiz_student_details {
    grid-template-columns: 1fr !important;
    padding: 16px 18px !important;
    gap: 8px !important;
  }

  /* Quiz taking */
  body.context-course_1:not(.is-teacher) header.quiz-header h1 {
    font-size: 24px !important;
  }
  body.context-course_1:not(.is-teacher) .display_question > .header {
    padding: 12px 18px !important;
  }
  body.context-course_1:not(.is-teacher) .display_question > .text {
    padding: 18px !important;
  }
  body.context-course_1:not(.is-teacher) .display_question .answer label.answer_row {
    padding: 12px 14px !important;
    gap: 10px !important;
  }

  #tb-quiz-stats {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  #tb-quiz-stats .tb-quiz-stat { padding: 16px 18px; }
  #tb-quiz-stats .tb-quiz-stat-value { font-size: 22px; }

  #custom-quiz-actionbar .qab-inner {
    flex-wrap: wrap;
    gap: 8px;
  }
  #custom-quiz-actionbar .qab-left,
  #custom-quiz-actionbar .qab-center,
  #custom-quiz-actionbar .qab-right {
    flex: 0 0 auto;
    font-size: 12px;
  }
  #custom-quiz-actionbar .qab-center {
    order: 3;
    flex: 1 1 100%;
    margin-top: 4px;
    justify-content: flex-start;
  }

  body.context-course_1.tb-quiz-taking:not(.is-teacher) {
    padding-bottom: 100px !important;
  }
}

/* ============================================================ */
/* 11b. LOGOUT CONFIRM (/logout) — "одјава" screen               */
/* JS injects #tb-logout-stage; native .ic-Login is hidden.      */
/* Reuse: #tb-login-ribbon, .tb-login-signoff, .tb-login-attrib  */
/* (all scoped to body.ic-Login-Body, which logout also has).    */
/* ============================================================ */
body.tb-logout-page {
  background:
    radial-gradient(900px 600px at 12% 0%, rgba(245,195,130,0.35) 0%, transparent 60%),
    radial-gradient(900px 700px at 100% 100%, rgba(124,108,240,0.28) 0%, transparent 60%),
    linear-gradient(180deg, #faf9ff 0%, #f4f1fb 100%) !important;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.tb-logout-page .ic-Login { display: none !important; }

/* Fixed overlay over the viewport: bypasses the Canvas login wrapper (#application holds
   ~100vh so normal flow would push the card below the fold). Centered + scrollable. */
body.tb-logout-page #tb-logout-stage {
  position: fixed; inset: 0; overflow: auto; box-sizing: border-box;
  padding: 48px 20px; z-index: 2147483000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
}
body.tb-logout-page #tb-logout-stage > * { width: 100%; max-width: 480px; }

body.tb-logout-page .tb-logout-back {
  display: inline-flex; align-items: center; gap: 6px;
  color: #5b6075; font-size: 13px; font-weight: 600; text-decoration: none;
  align-self: flex-start;
}
body.tb-logout-page .tb-logout-back:hover { color: #6c5ce7; }

body.tb-logout-page .tb-logout-lead { text-align: center; }
body.tb-logout-page .tb-logout-lead h1 {
  font-family: "Source Serif 4", Georgia, serif; font-weight: 400;
  font-size: 26px; line-height: 1.25; letter-spacing: -0.005em; color: #1a1e2c; margin: 0;
}
body.tb-logout-page .tb-logout-lead .tb-accent { font-style: italic; color: #5b4cd4; }
body.tb-logout-page .tb-logout-lead p {
  font-size: 14px; line-height: 1.55; color: #5b6075; max-width: 380px; margin: 10px auto 0;
}

body.tb-logout-page .tb-logout-card {
  background: #fff; border: 1px solid #e9e7f5; border-radius: 20px;
  padding: 26px 26px 24px;
  box-shadow: 0 26px 60px -28px rgba(70,50,160,0.28), 0 1px 3px rgba(20,20,40,0.04);
}
body.tb-logout-page .tb-logout-head { display: flex; gap: 12px; margin-bottom: 18px; align-items: center; }
body.tb-logout-page .tb-logout-ico {
  width: 40px; height: 40px; border-radius: 11px; background: #efecfb; color: #5b4cd4;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
body.tb-logout-page .tb-logout-ico svg { width: 20px; height: 20px; }
body.tb-logout-page .tb-logout-head h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: #1f2330; margin: 0; }
body.tb-logout-page .tb-logout-sub { font-size: 12.5px; color: #5b6075; margin: 2px 0 0; }
body.tb-logout-page .tb-logout-note { font-size: 14px; line-height: 1.6; color: #5b6075; margin: 0 0 16px; }
body.tb-logout-page .tb-logout-note strong { color: #1f2330; font-weight: 700; }
body.tb-logout-page .tb-logout-q { font-size: 14.5px; font-weight: 700; color: #1f2330; line-height: 1.5; margin: 0 0 18px; }

body.tb-logout-page .tb-logout-reassure {
  display: flex; gap: 11px; padding: 12px 14px; border: 1px solid #e9e7f5;
  border-radius: 12px; background: #fbfaff; margin-bottom: 20px; align-items: flex-start;
}
body.tb-logout-page .tb-logout-r-ico {
  width: 30px; height: 30px; border-radius: 8px; background: #efecfb; color: #6c5ce7;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
body.tb-logout-page .tb-logout-r-txt { font-size: 13px; line-height: 1.45; color: #5b6075; }
body.tb-logout-page .tb-logout-r-txt strong { color: #1f2330; font-weight: 700; }

body.tb-logout-page .tb-logout-actions { display: flex; gap: 12px; }
body.tb-logout-page .tb-btn-secondary,
body.tb-logout-page .tb-btn-primary {
  height: 46px; border-radius: 11px; font-weight: 700; font-size: 14.5px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; text-decoration: none; box-sizing: border-box;
  transition: background .15s, border-color .15s, transform .05s, box-shadow .15s;
}
body.tb-logout-page .tb-btn-secondary {
  background: #fff; border: 1px solid #d8d3ea; color: #1f2330; padding: 0 24px; flex: 0 0 auto;
}
body.tb-logout-page .tb-btn-secondary:hover { border-color: #7c6cf0; color: #5b4cd4; }
body.tb-logout-page .tb-btn-primary { background: #7c6cf0; border: none; color: #fff; flex: 1; }
body.tb-logout-page .tb-btn-primary:hover { background: #6b5ae8; }
body.tb-logout-page .tb-btn-secondary:active,
body.tb-logout-page .tb-btn-primary:active { transform: translateY(1px); }
body.tb-logout-page .tb-btn-primary svg { width: 16px; height: 16px; }

@media (max-width: 500px) {
  body.tb-logout-page .tb-logout-lead h1 { font-size: 22px; }
  body.tb-logout-page .tb-logout-card { padding: 22px 18px 20px; }
  body.tb-logout-page .tb-logout-actions { flex-direction: column-reverse; align-items: stretch; }
  body.tb-logout-page .tb-btn-secondary { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  body.tb-logout-page .tb-login-pulse { animation: none; }
}

/* ============================================================ */
/* 12b. CONFIRM screens (merge / invitation / register)          */
/* JS (setup*Screen) inserts .tb-cf-body into .ic-Login-confirmation */
/* __content; chrome (ribbon/lead/stat/signoff) is enroll-reuse.  */
/* ============================================================ */
body.tb-confirm .tb-cf-body { padding: 24px 26px 24px; }
body.tb-confirm .tb-cf-head { display: flex; gap: 12px; margin-bottom: 18px; align-items: center; }
body.tb-confirm .tb-cf-ico {
  width: 40px; height: 40px; border-radius: 11px; background: #efecfb; color: #5b4cd4;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
body.tb-confirm .tb-cf-ico svg { width: 20px; height: 20px; }
body.tb-confirm .tb-cf-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: #1f2330; margin: 0; }
body.tb-confirm .tb-cf-sub { font-size: 12.5px; color: #5b6075; margin: 2px 0 0; }
body.tb-confirm .tb-cf-note { font-size: 14px; line-height: 1.6; color: #5b6075; margin: 0 0 16px; }
body.tb-confirm .tb-cf-note strong { color: #1f2330; font-weight: 700; }
body.tb-confirm .tb-cf-mails { display: grid; gap: 8px; margin-bottom: 18px; }
body.tb-confirm .tb-cf-mail {
  display: flex; gap: 12px; align-items: center; padding: 12px 14px;
  border: 1px solid #e9e7f5; border-radius: 12px; background: #fbfaff;
}
body.tb-confirm .tb-cf-tag {
  width: 96px; flex: 0 0 auto; text-align: center; font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: #5b4cd4; background: #efecfb;
  padding: 4px 8px; border-radius: 6px;
}
body.tb-confirm .tb-cf-addr { font-size: 13.5px; font-weight: 600; color: #1f2330; word-break: break-all; }
body.tb-confirm .tb-cf-q { font-size: 14.5px; font-weight: 700; color: #1f2330; line-height: 1.5; margin: 0 0 20px; }
body.tb-confirm .tb-cf-actions { display: flex; gap: 12px; }
body.tb-confirm .tb-cf-btn-secondary,
body.tb-confirm .tb-cf-btn-primary {
  height: 46px; border-radius: 11px; font-weight: 700; font-size: 14.5px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; text-decoration: none; box-sizing: border-box;
  transition: background .15s, border-color .15s, transform .05s, box-shadow .15s;
}
body.tb-confirm .tb-cf-btn-secondary { background: #fff; border: 1px solid #d8d3ea; color: #1f2330; padding: 0 24px; flex: 0 0 auto; }
body.tb-confirm .tb-cf-btn-secondary:hover { border-color: #7c6cf0; color: #5b4cd4; }
body.tb-confirm .tb-cf-btn-primary { background: #7c6cf0; border: none; color: #fff; flex: 1; }
body.tb-confirm .tb-cf-btn-primary:hover { background: #6b5ae8; }
body.tb-confirm .tb-cf-btn-secondary:active,
body.tb-confirm .tb-cf-btn-primary:active { transform: translateY(1px); }
body.tb-confirm .tb-cf-arr { width: 16px; height: 16px; }

@media (max-width: 500px) {
  body.tb-confirm .tb-cf-body { padding: 22px 18px 20px; }
  body.tb-confirm .tb-cf-mail { flex-direction: column; align-items: flex-start; gap: 6px; }
  body.tb-confirm .tb-cf-tag { width: auto; }
  body.tb-confirm .tb-cf-actions { flex-direction: column-reverse; align-items: stretch; }
  body.tb-confirm .tb-cf-btn-secondary { width: 100%; }
}

/* --- invitation: choice tiles --- */
body.tb-confirm .tb-cf-choices { display: grid; gap: 10px; }
body.tb-confirm .tb-cf-choice {
  display: flex; gap: 13px; align-items: center; padding: 15px 16px;
  border: 1px solid #e9e7f5; border-radius: 13px; text-decoration: none; background: #fff;
  transition: border-color .15s, box-shadow .15s, transform .05s, background .15s;
}
body.tb-confirm .tb-cf-choice:hover { border-color: #7c6cf0; box-shadow: 0 6px 18px -10px rgba(124,108,240,0.45); }
body.tb-confirm .tb-cf-choice:active { transform: translateY(1px); }
body.tb-confirm .tb-cf-choice-ico {
  width: 38px; height: 38px; border-radius: 10px; background: #efecfb; color: #5b4cd4;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
body.tb-confirm .tb-cf-choice-ico svg { width: 18px; height: 18px; }
body.tb-confirm .tb-cf-choice-txt { flex: 1; }
body.tb-confirm .tb-cf-choice-t { font-size: 13.5px; font-weight: 700; color: #1f2330; }
body.tb-confirm .tb-cf-choice-s { font-size: 12px; color: #5b6075; margin-top: 2px; }
body.tb-confirm .tb-cf-chev { color: #6c5ce7; flex: 0 0 auto; }
body.tb-confirm .tb-cf-choice-primary { background: #7c6cf0; border-color: #7c6cf0; }
body.tb-confirm .tb-cf-choice-primary:hover { background: #6b5ae8; }
body.tb-confirm .tb-cf-choice-primary .tb-cf-choice-ico { background: rgba(255,255,255,0.18); color: #fff; }
body.tb-confirm .tb-cf-choice-primary .tb-cf-choice-t { color: #fff; }
body.tb-confirm .tb-cf-choice-primary .tb-cf-choice-s { color: rgba(255,255,255,0.82); }
body.tb-confirm .tb-cf-choice-primary .tb-cf-chev { color: #fff; }

/* --- register: Canvas #registration_confirmation_form restyle --- */
body.tb-confirm .tb-cf-form { padding: 0 26px 24px !important; margin: 0 !important; display: grid !important; gap: 16px !important; background: transparent !important; border: none !important; }
body.tb-confirm .tb-cf-form .instructions { font-size: 14px; line-height: 1.6; color: #5b6075; margin: 0; }
body.tb-confirm .tb-cf-form .instructions strong { color: #1f2330; font-weight: 700; }
body.tb-confirm .tb-cf-form .control-group { margin: 0 !important; display: block !important; }
body.tb-confirm .tb-cf-form .control-label {
  display: block !important; float: none !important; width: auto !important; text-align: left !important;
  font-size: 12.5px; font-weight: 600; color: #2b2f44; margin: 0 0 6px !important; padding: 0 !important;
}
body.tb-confirm .tb-cf-form .controls { margin: 0 !important; }
body.tb-confirm .tb-cf-form input[type="text"],
body.tb-confirm .tb-cf-form input[type="password"],
body.tb-confirm .tb-cf-form input[type="email"],
body.tb-confirm .tb-cf-form select {
  width: 100% !important; box-sizing: border-box; height: 44px; border: 1px solid #d8d3ea;
  border-radius: 10px; padding: 0 12px; font-size: 14px; color: #1f2330; background: #fff; font-family: inherit;
}
body.tb-confirm .tb-cf-form input:focus,
body.tb-confirm .tb-cf-form select:focus { outline: none; border-color: #7c6cf0; box-shadow: 0 0 0 4px rgba(124,108,240,0.15); }
body.tb-confirm .tb-cf-form input[disabled] { background: #f4f2fb; color: #5b6075; font-weight: 600; cursor: not-allowed; }
body.tb-confirm .tb-cf-form .checkbox { font-size: 13px; color: #5b6075; display: flex; gap: 8px; align-items: flex-start; }
body.tb-confirm .tb-cf-form .checkbox input { accent-color: #7c6cf0; width: 17px; height: 17px; margin: 1px 0 0; }
body.tb-confirm .tb-cf-form .btn-primary {
  height: 46px; border-radius: 11px; background: #7c6cf0 !important; border: none !important; color: #fff !important;
  font-weight: 700; font-size: 14.5px; width: 100%; cursor: pointer; transition: background .15s, transform .05s;
}
body.tb-confirm .tb-cf-form .btn-primary:hover { background: #6b5ae8 !important; }
body.tb-confirm .tb-cf-form .btn-primary:active { transform: translateY(1px); }
body.tb-confirm .tb-cf-form #back { color: #5b6075; }

/* --- fix: the fixed ribbon ("ОТВОРЕН УПИС", top:22px ~30px) must not overlap the lead title ---
   #modal-box is in normal flow at the top of the body; we give it hero top/bottom padding
   to push it below the ribbon. Scoped to .tb-confirm (doesn't touch the working self-enroll). */
body.body--login-confirmation.tb-confirm {
  box-sizing: border-box;
  padding: 76px 20px 40px !important;
}
@media (max-width: 640px) {
  body.body--login-confirmation.tb-confirm { padding: 64px 16px 32px !important; }
}

/* "Предај тест" inline button on the last question (in place of "Следећи") —
   positioned on the right like the native next-question; inherits color/shape from .Button (brand). */
body.tb-quiz-taking .tb-quiz-submit-inline { float: right; margin-left: auto; }

/* Show/hide "eye" toggle for password fields (JS injects .tb-pw-wrap + .tb-pw-toggle) */
.tb-pw-wrap { position: relative; display: block; }
.tb-pw-wrap > input { padding-right: 44px !important; }
.tb-pw-toggle {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  margin: 0; padding: 4px; border: 0; background: transparent; cursor: pointer;
  color: #8a8fa3; display: inline-flex; align-items: center; line-height: 0;
}
.tb-pw-toggle:hover { color: #6c5ce7; }
.tb-pw-toggle svg { width: 18px; height: 18px; }

/* Remove Canvas "What-If" score testing on the student grades page */
body.context-course_1:not(.is-teacher) td.assignment_score .score_holder,
body.context-course_1:not(.is-teacher) td.assignment_score .grade {
  pointer-events: none !important;
  cursor: default !important;
}
body.context-course_1:not(.is-teacher) td.assignment_score .score_teaser,
body.context-course_1:not(.is-teacher) td.assignment_score .tooltip_text,
body.context-course_1:not(.is-teacher) a.revert_score_link { display: none !important; }

/* ============================================================ */
/* "Вођа тима": student-style top bar (Оцене / People / Одjава)  */
/* The leader is .is-teacher (gradebook/People stay native+funct.), */
/* so we hide the course nav and add the bar; #content stays full */
/* width (WITHOUT the 880px cap) so the gradebook doesn't break.  */
/* ============================================================ */
body.context-course_1.tb-leader .ic-app-header,
body.context-course_1.tb-leader #mobile-header,
body.context-course_1.tb-leader #mobileContextNavContainer,
body.context-course_1.tb-leader #left-side,
body.context-course_1.tb-leader .ic-app-course-menu,
body.context-course_1.tb-leader #section-tabs-header,
body.context-course_1.tb-leader #section-tabs,
body.context-course_1.tb-leader ul.section-tabs,
body.context-course_1.tb-leader .ic-app-nav-toggle-and-crumbs,
body.context-course_1.tb-leader #breadcrumbs,
body.context-course_1.tb-leader #courseMenuToggle,
body.context-course_1.tb-leader .header-bar { display: none !important; }

body.context-course_1.tb-leader {
  padding-top: 64px !important;
  background: #f7f7fb !important;
}
body.context-course_1.tb-leader #wrapper,
body.context-course_1.tb-leader .ic-Layout-wrapper,
body.context-course_1.tb-leader .ic-Layout-columns,
body.context-course_1.tb-leader #not_right_side,
body.context-course_1.tb-leader #content-wrapper,
body.context-course_1.tb-leader .ic-Layout-contentMain,
body.context-course_1.tb-leader .ic-Layout-contentWrapper {
  margin-left: 0 !important;
  padding-left: 0 !important;
  width: 100% !important;
}
/* Inset the content (gradebook/People) — so it isn't right up against the edges. 48px on the
   left aligns the left edge of the content with "Оцене" in the top bar (bar 32px + link 16px).
   WITHOUT a width cap (the gradebook needs full width — see the comment above). */
body.context-course_1.tb-leader #content {
  padding: 16px 48px 32px !important;
  box-sizing: border-box !important;
  /* Until JS adds .is-teacher, the :not(.is-teacher) #content rule (max-width:880px) also
     applies to the leader (the server renders tb-leader but NOT is-teacher — JS adds that) →
     content loads at 880px then jumps to full width once is-teacher arrives ("smaller then
     bigger"). Pin full width for the pre-JS phase too: same specificity as the 880px rule,
     but later in the file → it wins. The inner block (.pp-people/.mg-ocene) has max-width:1320. */
  max-width: none !important;
}
/* People (Полазници): center the whole block (search + table) on the page. The table is
   its natural width (the empty space on the right in full-width #content confirms it), so
   width:fit-content shrinks #content to the content width, and margin:auto centers it.
   Scoped to People via #group_categories_tabs (only exists there) — the gradebook
   (needs full width) stays untouched. */
body.context-course_1.tb-leader:has(#group_categories_tabs) #content {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* The REAL cause of "it won't center": Canvas caps the whole .ic-Layout-wrapper at max-width:1366px
   and pins it left (margin-left for the global nav). The empty space on the right is OUTSIDE those
   1366px, so centering #content inside only moves it ~50px. The leader has no global nav,
   so we center the wrapper itself on the screen. :has() brings ID-specificity → it overrides the
   margin-left:0 above. Scoped to People — the gradebook is untouched. */
body.context-course_1.tb-leader:has(#group_categories_tabs) .ic-Layout-wrapper {
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Hide the top kebab "More Options" (prior enrollments / interactions / registered
   services) on Полазници — the leader doesn't need it. */
body.context-course_1.tb-leader #people-options { display: none !important; }

/* The "Groups" tab on People (classic roster) + "Export Entire Gradebook" — hidden from
   the CSS FILE (render-blocking, the server renders tb-leader on the first paint), so they
   hide AS SOON AS Backbone/InstUI renders them, without a flash. (Previously JS injected them into
   #tb-leader-style → delayed → Groups flickered.) The "Everyone" tab (href "#tab-0") stays. */
body.context-course_1.tb-leader #group_categories_tabs ul[role="tablist"] li:has(a[href*="/groups"]),
body.context-course_1.tb-leader li:has([data-menu-id="export-all"]),
body.context-course_1.tb-leader [role="menuitem"]:has([data-menu-id="export-all"]),
body.context-course_1.tb-leader [class*="menuItem"]:has([data-menu-id="export-all"]) {
  display: none !important;
}

/* Gradebook top-right corner (#gradebook-actions): import/export (EnhancedActionMenu)
   + the Gradebook Settings gear. The leader doesn't need them (grades are view-only — no import/config).
   Only exists on the gradebook page; scoped to the leader. */
body.context-course_1.tb-leader #gradebook-actions { display: none !important; }

/* "Actions" dropdown (Import / Export Current Gradebook View) → hidden; the leader gets
   a direct "Download CSV" link (#tb-csv-link, JS triggers the native CSV export flow). */
body.context-course_1.tb-leader .gradebook-menus [data-component="ActionMenu"],
body.context-course_1.tb-leader .gradebook-menus [data-component="GradebookMenu"],
body.context-course_1.tb-leader .gradebook-menus [data-component="ViewOptionsMenu"] { display: none !important; }
/* "Download CSV" = purple filled button. Stable size (min-width/height) so
   there's no jump when transitioning spinner ↔ text. */
body.context-course_1.tb-leader .tb-csv-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 140px; min-height: 36px; box-sizing: border-box;
  background: #7c6cf0; color: #ffffff; border: 0; border-radius: 8px;
  padding: 7px 18px; margin: 0; font: inherit; font-weight: 600; font-size: 14px;
  line-height: 1; cursor: pointer; text-decoration: none; transition: background 0.15s;
}
body.context-course_1.tb-leader .tb-csv-link:hover { background: #6c5ce7; color: #ffffff; text-decoration: none; }
body.context-course_1.tb-leader .tb-csv-link:disabled,
body.context-course_1.tb-leader .tb-csv-link.tb-csv-loading { background: #b8aef0; cursor: default; }
/* spinner (loading while the toolbar loads + while the export runs) */
body.context-course_1.tb-leader .tb-csv-spinner {
  display: inline-block; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55); border-top-color: #ffffff;
  animation: tb-csv-spin 0.6s linear infinite;
}
@keyframes tb-csv-spin { to { transform: rotate(360deg); } }

/* Skeleton top-bar: the server renders tb-leader on the first paint, but #custom-top-bar
   is built by JS (defer). This white strip fills the top 64px until the bar arrives, so there's
   no gap or flash. :has() is supported; it disappears as soon as JS creates #custom-top-bar. */
body.context-course_1.tb-leader:not(:has(#custom-top-bar))::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 64px;
  background: #ffffff; border-bottom: 1px solid #e0dce8;
  box-shadow: 0 1px 3px rgba(124, 111, 214, 0.08); z-index: 9998;
}
/* top bar (copy of the student bar; literal hex because the vars are in the :not(.is-teacher) scope) */
body.context-course_1.tb-leader #custom-top-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 64px;
  background: #ffffff; border-bottom: 1px solid #e0dce8;
  box-shadow: 0 1px 3px rgba(124, 111, 214, 0.08);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; z-index: 9999;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body.context-course_1.tb-leader .custom-bar-left { display: flex; align-items: center; gap: 8px; }
body.context-course_1.tb-leader .custom-bar-right { display: flex; align-items: center; }
body.context-course_1.tb-leader .custom-nav-link {
  display: inline-flex; align-items: center; box-sizing: border-box;
  color: #6b6b8a; padding: 0 16px; text-decoration: none; font-size: 14px; font-weight: 500;
  transition: all 0.2s; border-bottom: 2px solid transparent; height: 64px;
}
body.context-course_1.tb-leader .custom-nav-link:hover { color: #7c6cf0; text-decoration: none; }
body.context-course_1.tb-leader .custom-nav-link.active { color: #1a1a2e; font-weight: 600; border-bottom-color: #7c6cf0; }
body.context-course_1.tb-leader #custom-logout-link {
  display: inline-block; background: #ffffff; color: #7c6cf0; border: 1px solid #7c6cf0;
  padding: 8px 20px; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 500;
  cursor: pointer; transition: all 0.2s;
}
body.context-course_1.tb-leader #custom-logout-link:hover { background: #7c6cf0; color: #ffffff; }

/* design_handoff_pristup_обуци: nested „Моја обука ▾" dropdown in the Вођа-полазник top-bar. Scoped to
   body.context-course_1 (NOT :not(.is-teacher)) so it applies in BOTH modes — the student branch
   (training pages) and the leader branch (Оцене/Полазници, where the trainee carries .is-teacher).
   Literal colors: the --tb-* tokens live only in the :not(.is-teacher) scope (undefined on leader pages). */
body.context-course_1 .nav-drop { position: relative; display: inline-flex; }
body.context-course_1 .nav-drop > .custom-nav-link { background: none; border: none; border-bottom: 2px solid transparent; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; gap: 6px; }
body.context-course_1 .nav-drop > .custom-nav-link .nd-chev { transition: transform .18s; }
body.context-course_1 .nav-drop.open > .custom-nav-link .nd-chev { transform: rotate(180deg); }
body.context-course_1 .nd-menu { position: absolute; top: 100%; left: 8px; min-width: 190px; background: #fff; border: 1px solid #e9e7f5; border-radius: 12px; box-shadow: 0 14px 34px rgba(31,35,48,.16); padding: 6px; display: none; z-index: 10000; }
body.context-course_1 .nav-drop.open .nd-menu { display: block; }
body.context-course_1 .nd-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; font-size: 14px; font-weight: 600; color: #1f2330; text-decoration: none; }
body.context-course_1 .nd-item:hover, body.context-course_1 .nd-item.current { background: #efecfb; color: #6c5ce7; }
body.context-course_1 .nd-item svg { flex: 0 0 auto; color: #8b90a4; }
body.context-course_1 .nd-item:hover svg, body.context-course_1 .nd-item.current svg { color: #6c5ce7; }

/* Account menu in the top bar (design_handoff_promena_imena) — replaces the bare „Одјава" button on
   every bar (buildTopBar / buildTraineeTopBar / buildLeaderTopBar). Reuses .nd-item for the entries;
   only the trigger + panel are new. Same scope + literal colors as the .nd-* block above. */
body.context-course_1 .acct-drop { position: relative; display: inline-flex; }
body.context-course_1 #acctBtn { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 12px 0 5px; background: transparent; border: 1px solid transparent; border-radius: 999px; font: inherit; cursor: pointer; color: #1f2330; transition: background .16s, border-color .16s; }
body.context-course_1 #acctBtn:hover { background: #f4f2fb; border-color: #e9e7f5; }
/* On an account page the trigger keeps the hover shade — no nav item is underlined there, so this is
   the bar's only „you are here" signal. Declared BEFORE .open (same specificity, so source order
   decides) → opening the menu still reads as open. */
body.context-course_1 .acct-drop.current #acctBtn { background: #f4f2fb; border-color: #e9e7f5; }
body.context-course_1 .acct-drop.open #acctBtn { background: #efecfb; border-color: #d8d2f3; }
/* The circle carries the user's INITIALS (theme JS `initials()`) — not a decorative dot, not a
   generic user glyph, not a photo slot: the product has no avatar upload. aria-hidden, because the
   name sits right next to it and the trigger also carries a „Налог: {име}" screenreader label. */
body.context-course_1 .acct-av { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 999px; background: #efecfb; color: #5b4cd4; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; }
body.context-course_1 .acct-label { font-size: 14px; font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.context-course_1 .acct-chev { color: #8b90a4; transition: transform .18s; }
body.context-course_1 .acct-drop.open .acct-chev { transform: rotate(180deg); color: #6c5ce7; }
body.context-course_1 .acct-menu { position: absolute; top: 100%; right: 0; margin-top: 2px; min-width: 252px; background: #fff; border: 1px solid #e9e7f5; border-radius: 12px; box-shadow: 0 14px 34px rgba(31,35,48,.16); padding: 6px; display: none; z-index: 10000; }
body.context-course_1 .acct-drop.open .acct-menu { display: block; }
body.context-course_1 .acct-id { padding: 9px 11px 10px; }
body.context-course_1 .acct-id .an { display: none; }
body.context-course_1 .acct-id .ae { font-size: 12.5px; color: #5b6075; word-break: break-all; line-height: 1.35; }
body.context-course_1 .acct-sep { height: 1px; background: #f0eef8; margin: 6px 4px; }
/* Only in THIS menu the icon trails the label, so the action labels line up with the e-mail above
   them. „Моја обука" (.nd-menu) keeps the leading icon — hence the .acct-menu scope. */
body.context-course_1 .acct-menu .nd-item { justify-content: space-between; }
/* New in the product: a visible focus ring outside form fields — without it the menu is unusable by
   keyboard (design_handoff_nalog_meni §6). Applies to the trigger, menu entries and top-bar links.
   (The page crumb was in this list until „Назад на обуку" was dropped from Промена имена.) */
body.context-course_1 #acctBtn:focus-visible,
body.context-course_1 .nd-item:focus-visible,
body.context-course_1 .custom-nav-link:focus-visible { outline: 2px solid #7c6cf0; outline-offset: 2px; border-radius: 8px; }
/* ≤820px: the bar is 56px and the trigger collapses to a 44×44 avatar; the name moves into the panel. */
@media (max-width: 820px) {
  body.context-course_1 .acct-label { display: none; }
  body.context-course_1 #acctBtn { height: 44px; width: 44px; padding: 0; justify-content: center; gap: 0; }
  body.context-course_1 #acctBtn .acct-chev { display: none; }
  body.context-course_1 .acct-menu { right: -4px; min-width: 236px; }
  body.context-course_1 .acct-id .an { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; margin-bottom: 3px; }
}

/* „Новине на платформи" (design_handoff_obavestenje_novine) — full-width bar under the fixed top bar
   announcing that the platform gained something. Server-rendered above #application
   (shared/_platform_news_bar); the ✕ is wired in canvas-custom.js (platformNewsBar).
   Deliberately NOT fixed: it is the first block of the page and scrolls away, because the message is
   information, not a control, and must not permanently eat screen height. body already carries
   padding-top:64px for the fixed bar, so no extra offset is needed; when the bar is absent the
   content simply moves up. 32px side padding lines it up with the top bar. The gradient fades to
   white on the right so it does not read as a solid colour block competing with the white bar above
   — no full purple, no red, no „НОВО" badge. Same scope + literal colours as the .acct-* block. */
body.context-course_1 .nw-bar {
  display: flex; align-items: center; gap: 14px; padding: 13px 32px;
  background: linear-gradient(90deg, #f3f0fe, #faf9ff);
  color: #1f2330; border-bottom: 1px solid #e9e7f5;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body.context-course_1 .nw-bar .ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: #fff; color: #5b4cd4;
  display: grid; place-items: center; box-shadow: 0 1px 3px rgba(91, 76, 212, .16);
}
body.context-course_1 .nw-bar .txt { flex: 1 1 auto; margin: 0; font-size: 14px; line-height: 1.5; text-wrap: pretty; }
body.context-course_1 .nw-bar .txt p { margin: 0; }                 /* user_content wraps the sentence */
body.context-course_1 .nw-bar .txt strong { font-weight: 800; }
body.context-course_1 .nw-bar .x {
  flex: 0 0 auto; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: inherit; opacity: .65; cursor: pointer; display: grid; place-items: center;
}
body.context-course_1 .nw-bar .x:hover { opacity: 1; background: rgba(31, 35, 48, .07); }
body.context-course_1 .nw-bar .x:focus-visible { outline: 2px solid #7c6cf0; outline-offset: 2px; }
@media (max-width: 820px) {
  body.context-course_1 .nw-bar { padding: 12px 16px; }
}

/* Области locked by prerequisites for a Вођа-полазник: grey + non-clickable (the server already blocks
   the content on open; masteryLockModules() adds .tb-locked from the modules API state). */
body.context-course_1 .context_module.tb-locked { opacity: .5; }
body.context-course_1 .context_module.tb-locked a,
body.context-course_1 .context_module.tb-locked .ig-list,
body.context-course_1 .context_module.tb-locked .context_module_items { pointer-events: none; cursor: not-allowed; }

/* Mastery: quiz results — strengthen red on incorrect/partial questions + a note.
   Marking (.incorrect/.partial_credit) is done by Canvas; this only enhances it visually.
   .tb-multi-note is added by masteryWatchQuizResults() on incomplete multi-answer questions. */
body.context-course_1 #questions.assessment_results .display_question.incorrect,
body.context-course_1 #questions.assessment_results .display_question.partial_credit {
  border-left: 4px solid #d64646;
  background: #fdf3f3;
}
body.context-course_1 #questions.assessment_results .tb-multi-note {
  display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px;
  border-radius: 10px; background: #fef6f5; color: #9a3329; font-size: 13.5px; line-height: 1.5; font-weight: 500;
}
body.context-course_1 #questions.assessment_results .tb-multi-note svg { flex: 0 0 auto; color: #c0392b; margin-top: 1px; }
/* Bug 1: quiz_arrows.js injects .answer_arrow/.answer_indicator spans that Canvas
   positions absolutely → the "Incorrect" badge floated and overlapped the duration text above
   #questions. Make them inline pills (static), so they sit next to their answer, not floating. */
body.context-course_1:not(.is-teacher) #questions.assessment_results .answer_arrow,
body.context-course_1:not(.is-teacher) #questions.assessment_results .answer_indicator {
  position: static !important; float: none !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  display: inline-flex !important; align-items: center !important; vertical-align: middle !important;
  margin: 0 0 0 8px !important; padding: 3px 10px !important; border-radius: 999px !important;
  font-size: 11px !important; font-weight: 700 !important; line-height: 1.5 !important;
  white-space: nowrap !important; box-shadow: none !important; width: auto !important; height: auto !important;
}
body.context-course_1:not(.is-teacher) #questions.assessment_results .answer_arrow.incorrect,
body.context-course_1:not(.is-teacher) #questions.assessment_results .answer_indicator.incorrect {
  background: #fdeeee !important; color: #c0392b !important;
}
body.context-course_1:not(.is-teacher) #questions.assessment_results .answer_arrow.correct,
body.context-course_1:not(.is-teacher) #questions.assessment_results .answer_indicator.correct,
body.context-course_1:not(.is-teacher) #questions.assessment_results .answer_arrow.info,
body.context-course_1:not(.is-teacher) #questions.assessment_results .answer_indicator.info {
  background: #eafaf0 !important; color: #157a3a !important;
}

/* ============================================================ */
/* Резултати теста (Test results) — Phase 2 (design_handoff_testovi/rezultati-testa.html) */
/* hero score card + status card + per-question header pill. Built by JS               */
/* (buildQuizResultsChrome); consumed native nodes get .tb-rq-consumed.                */
/* ============================================================ */
/* Hide the consumed native nodes + native answer-indicators (replaced by the header pill). */
body.context-course_1:not(.is-teacher).tb-rq-results .tb-rq-consumed { display: none !important; }
body.context-course_1:not(.is-teacher).tb-rq-results #questions.assessment_results .answer_indicator,
body.context-course_1:not(.is-teacher).tb-rq-results #questions.assessment_results .answer_arrow { display: none !important; }

/* HERO */
body.context-course_1:not(.is-teacher) .tb-rq-hero { text-align: center; margin: 0 0 28px; }
body.context-course_1:not(.is-teacher) .tb-rq-hero h1 { margin: 0 0 20px; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: var(--tb-ink); }
body.context-course_1:not(.is-teacher) .tb-score-card { background: #fff; border: 1px solid var(--tb-border); border-radius: 20px; box-shadow: 0 6px 28px rgba(124,108,240,0.10); padding: 30px 28px 28px; max-width: 460px; margin: 0 auto; }
body.context-course_1:not(.is-teacher) .tb-score-label { font-size: 13px; font-weight: 600; color: var(--tb-muted); letter-spacing: .02em; }
body.context-course_1:not(.is-teacher) .tb-score-badges { display: flex; justify-content: center; gap: 8px; margin: 12px 0 4px; }
body.context-course_1:not(.is-teacher) .tb-score-badges:empty { display: none; }
body.context-course_1:not(.is-teacher) .tb-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 5px 11px; border-radius: 999px; text-transform: uppercase; }
body.context-course_1:not(.is-teacher) .tb-badge.kept { background: var(--tb-purple-soft); color: var(--tb-purple-text); }
body.context-course_1:not(.is-teacher) .tb-badge.latest { background: #eef0f5; color: #5b6075; }
body.context-course_1:not(.is-teacher) .tb-score-value { font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--tb-purple-text); font-variant-numeric: tabular-nums; margin: 6px 0 4px; }
body.context-course_1:not(.is-teacher) .tb-score-value .den { color: #8b90a4; font-weight: 700; }
body.context-course_1:not(.is-teacher) .tb-score-sub { display: flex; justify-content: center; gap: 22px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--tb-row-divider); font-size: 13px; color: var(--tb-muted); }
body.context-course_1:not(.is-teacher) .tb-score-sub .k { color: #8b90a4; display: block; font-size: 11px; font-weight: 600; letter-spacing: .03em; margin-bottom: 2px; }
body.context-course_1:not(.is-teacher) .tb-score-sub .v { font-weight: 600; color: var(--tb-ink); font-variant-numeric: tabular-nums; }
body.context-course_1:not(.is-teacher) a.tb-cta {
  display: inline-flex !important; align-items: center; gap: 9px; margin-top: 22px !important;
  background: var(--tb-purple) !important; color: #fff !important; border: 0 !important; border-radius: 11px !important;
  padding: 14px 28px !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1 !important;
  text-decoration: none !important; box-shadow: 0 6px 16px rgba(124,108,240,0.30) !important; width: auto !important;
}
body.context-course_1:not(.is-teacher) a.tb-cta:hover { background: #6b5ec4 !important; color: #fff !important; }

/* STATUS CARD */
body.context-course_1:not(.is-teacher) .tb-rq-status { border-radius: 16px; padding: 20px 22px; margin: 0 0 22px; display: flex; gap: 16px; align-items: flex-start; border: 1px solid; }
body.context-course_1:not(.is-teacher) .tb-rq-status .ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; }
body.context-course_1:not(.is-teacher) .tb-rq-status h2 { margin: 0 0 5px; font-size: 17px; font-weight: 700; }
body.context-course_1:not(.is-teacher) .tb-rq-status p { margin: 0; font-size: 14px; line-height: 1.55; }
body.context-course_1:not(.is-teacher) .tb-rq-status.warn { background: #fff4e1; border-color: #f3d9a8; color: #7a5a13; }
body.context-course_1:not(.is-teacher) .tb-rq-status.warn .ico { background: #fbe6bf; color: #b7791f; }
body.context-course_1:not(.is-teacher) .tb-rq-status.warn h2 { color: #b7791f; }
body.context-course_1:not(.is-teacher) .tb-rq-status.ok { background: #eafaf0; border-color: #b9e6cb; color: #186b39; }
body.context-course_1:not(.is-teacher) .tb-rq-status.ok .ico { background: #c8efd6; color: #157a3a; }
body.context-course_1:not(.is-teacher) .tb-rq-status.ok h2 { color: #157a3a; }
body.context-course_1:not(.is-teacher) .tb-rq-status.fail { background: #fff1e6; border-color: #f5cda4; color: #8a4f1a; }
body.context-course_1:not(.is-teacher) .tb-rq-status.fail .ico { background: #fbdcbf; color: #c4711d; }
body.context-course_1:not(.is-teacher) .tb-rq-status.fail h2 { color: #c4711d; }

/* QUESTION STATE PILL (header, right) + per-state border */
body.context-course_1:not(.is-teacher) #questions.assessment_results .tb-q-state {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}
body.context-course_1:not(.is-teacher) #questions.assessment_results .tb-q-state.correct { background: #e3f7ec; color: #157a3a; }
body.context-course_1:not(.is-teacher) #questions.assessment_results .tb-q-state.incorrect { background: #fdeeee; color: #c0392b; }
body.context-course_1:not(.is-teacher) #questions.assessment_results .tb-q-state.unanswered { background: #f0f0f4; color: #5b6075; }
body.context-course_1:not(.is-teacher) #questions.assessment_results .tb-unanswered-note {
  display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px;
  border-radius: 10px; font-size: 13.5px; line-height: 1.5; background: #fafafc; color: var(--tb-muted); border: 1px solid #e2e0ec;
}
/* Reveal (only when the server marks .correct_answer → show_correct_answers): green, !important
   to beat the existing .selected_answer purple (canvas-custom.css ~1809). Doesn't leak when suppressed. */
body.context-course_1:not(.is-teacher) #questions.assessment_results.show_correct_answers .answer.correct_answer {
  background: #f3fbf6 !important; border-color: #b9e6cb !important;
}
/* (F) Center EVERYTHING in a single 900px column; prevent quiz markup from spilling out of the wrapper */
body.context-course_1:not(.is-teacher).tb-rq-results #quiz_show { max-width: 900px !important; margin-left: auto !important; margin-right: auto !important; }
body.context-course_1:not(.is-teacher).tb-rq-results #quiz_show .quiz-submission,
body.context-course_1:not(.is-teacher).tb-rq-results #quiz_show #questions,
body.context-course_1:not(.is-teacher).tb-rq-results #quiz_show .display_question,
body.context-course_1:not(.is-teacher).tb-rq-results #quiz_show .tb-card { max-width: 100% !important; box-sizing: border-box !important; }

/* ===== SHARED CARD SYSTEM (Резултати): .tb-card > .tb-card-header + .tb-card-body =====
   Подаци о тесту / Упутства / Историја покушаја — all through the same card (header + body = one
   card). rqWrapCard (JS) wraps the native element; here is the unified look. */
body.context-course_1:not(.is-teacher).tb-rq-results .tb-card {
  background: #fff !important; border: 1px solid var(--tb-border) !important; border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(124,108,240,0.05) !important; margin: 0 0 22px 0 !important; overflow: hidden !important;
}
body.context-course_1:not(.is-teacher).tb-rq-results .tb-card-header {
  background: #f3f1fc !important; border-bottom: 1px solid #ece7f7 !important; padding: 15px 22px !important;
  font-size: 14px !important; font-weight: 700 !important; color: var(--tb-purple-text) !important;
  letter-spacing: -0.01em !important; text-align: left !important;
}
body.context-course_1:not(.is-teacher).tb-rq-results .tb-card-body { background: #fff !important; padding: 18px 22px !important; }
/* Упутства: text directly in the body, without an inner frame/box */
body.context-course_1:not(.is-teacher).tb-rq-results .tb-card-body > .description.user_content { border: 0 !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; }
/* Neutralize the own card-look of the moved native elements (now they are .tb-card-body content) */
body.context-course_1:not(.is-teacher).tb-rq-results .tb-card-body > ul#quiz_student_details,
body.context-course_1:not(.is-teacher).tb-rq-results .tb-card-body > .description.user_content,
body.context-course_1:not(.is-teacher).tb-rq-results .tb-card-body > #quiz-submission-version-table {
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important;
}
/* Native titles that the card-header replaces: .desc h3 (Историја) hidden */
body.context-course_1:not(.is-teacher).tb-rq-results #quiz-submission-version-table .desc { display: none !important; }
/* (A) „Преглед питања" section title */
body.context-course_1:not(.is-teacher) .tb-rq-section-title {
  font-size: 19px !important; font-weight: 800 !important; letter-spacing: -0.01em !important;
  color: var(--tb-ink) !important; margin: 32px 2px 16px !important; text-align: left !important;
}
/* (B) Per-state border of the question card (full border, white background — without the red left stripe 4307) */
body.context-course_1:not(.is-teacher).tb-rq-results #questions.assessment_results .display_question {
  background: #fff !important; border: 1.5px solid #e2e0ec !important; border-radius: 16px !important;
  box-shadow: 0 2px 10px rgba(20,20,40,0.03) !important; margin: 0 0 16px 0 !important;
}
body.context-course_1:not(.is-teacher).tb-rq-results #questions.assessment_results .display_question.tb-q-incorrect { border-color: #f3c9c9 !important; }
body.context-course_1:not(.is-teacher).tb-rq-results #questions.assessment_results .display_question.tb-q-correct { border-color: #b9e6cb !important; }
body.context-course_1:not(.is-teacher).tb-rq-results #questions.assessment_results .display_question.tb-q-unanswered { border-color: #e2e0ec !important; }
/* (D) Bottom „Резултат теста" — centered + larger, purple number */
body.context-course_1:not(.is-teacher).tb-rq-results #quiz_show .quiz_score:not(.tb-rq-consumed) {
  text-align: center !important; font-size: 20px !important; font-weight: 700 !important;
  color: var(--tb-ink) !important; margin: 34px 0 22px 0 !important;
}
body.context-course_1:not(.is-teacher).tb-rq-results #quiz_show .quiz_score:not(.tb-rq-consumed) .score_value {
  font-size: 28px !important; font-weight: 800 !important; color: var(--tb-purple-text) !important;
}

/* ============================================================ */
/* Резултати — polish v2 (width, readability, spacing)                            */
/* ============================================================ */
/* (1) Neutralize the Canvas panel around the question review → full column width (like the cards) */
body.context-course_1:not(.is-teacher).tb-rq-results #quiz_show .quiz-submission,
body.context-course_1:not(.is-teacher).tb-rq-results #quiz_show #questions.assessment_results {
  max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important;
  background: transparent !important; border: none !important; box-shadow: none !important;
}
/* (2) Smaller gap Историја → Преглед питања; same vertical hierarchy */
body.context-course_1:not(.is-teacher).tb-rq-results .tb-rq-section-title { margin: 18px 2px 14px !important; }
body.context-course_1:not(.is-teacher).tb-rq-results #quiz-submission-version-table:has(table) { margin-bottom: 8px !important; }
/* (3) Larger font for questions + options, more padding */
body.context-course_1:not(.is-teacher).tb-rq-results .display_question > .text { padding: 22px 24px 24px !important; }
body.context-course_1:not(.is-teacher).tb-rq-results .display_question .question_text { font-size: 16.5px !important; line-height: 1.6 !important; margin-bottom: 18px !important; }
body.context-course_1:not(.is-teacher).tb-rq-results .display_question .answer label.answer_row { padding: 15px 18px !important; font-size: 15.5px !important; }
body.context-course_1:not(.is-teacher).tb-rq-results .display_question .answer .answer_text,
body.context-course_1:not(.is-teacher).tb-rq-results .display_question .answer .answer_label,
body.context-course_1:not(.is-teacher).tb-rq-results .display_question .answer .answer_html { font-size: 15.5px !important; }
/* (4) Answer rows: clear border, readable text for unselected, emphasized selected */
body.context-course_1:not(.is-teacher).tb-rq-results .display_question .answer { border-color: #e5e7eb !important; }
body.context-course_1:not(.is-teacher).tb-rq-results .display_question .answer .answer_text,
body.context-course_1:not(.is-teacher).tb-rq-results .display_question .answer .answer_label,
body.context-course_1:not(.is-teacher).tb-rq-results .display_question .answer .answer_html { color: var(--tb-ink) !important; }
body.context-course_1:not(.is-teacher).tb-rq-results .display_question .answer.selected_answer .answer_text,
body.context-course_1:not(.is-teacher).tb-rq-results .display_question .answer.selected_answer .answer_label,
body.context-course_1:not(.is-teacher).tb-rq-results .display_question .answer:has(input:checked) .answer_text,
body.context-course_1:not(.is-teacher).tb-rq-results .display_question .answer:has(input:checked) .answer_label { color: var(--tb-ink) !important; font-weight: 600 !important; }
/* Selected answer = NEUTRAL LILAC (.selected_answer, 1811) regardless of correctness —
   red is ONLY the card border + pill, not the option (ref pages/rezultati-testa.html). */
/* (5) Subtler incorrect border (white card; red only on the border/pill/message) */
body.context-course_1:not(.is-teacher).tb-rq-results #questions.assessment_results .display_question.tb-q-incorrect { border-color: #f0cdcd !important; }
/* (7) Hero score slightly larger */
body.context-course_1:not(.is-teacher) .tb-score-value { font-size: 62px !important; }
/* (8) Историја покушаја: larger font + row height; flatter pill */
body.context-course_1:not(.is-teacher).tb-rq-results #quiz-submission-version-table tbody td { font-size: 15px !important; padding: 13px 16px !important; }
body.context-course_1:not(.is-teacher).tb-rq-results #quiz-submission-version-table thead th { font-size: 12.5px !important; padding: 12px 16px !important; }
body.context-course_1:not(.is-teacher).tb-rq-results .tb-attempt-pill { background: #efeefa !important; box-shadow: none !important; letter-spacing: 0.04em !important; }
/* (9) Bottom „Резултат теста" — more separated + stronger */
body.context-course_1:not(.is-teacher).tb-rq-results #quiz_show .quiz_score:not(.tb-rq-consumed) { margin: 40px 0 24px 0 !important; font-size: 22px !important; }
body.context-course_1:not(.is-teacher).tb-rq-results #quiz_show .quiz_score:not(.tb-rq-consumed) .score_value { font-size: 30px !important; }
/* (10) Mobile */
@media (max-width: 720px) {
  body.context-course_1:not(.is-teacher).tb-rq-results #quiz_show { max-width: none !important; }
  body.context-course_1:not(.is-teacher).tb-rq-results .display_question > .text { padding: 16px !important; }
  body.context-course_1:not(.is-teacher).tb-rq-results .display_question .answer label.answer_row { padding: 13px 14px !important; }
  body.context-course_1:not(.is-teacher) .tb-score-value { font-size: 48px !important; }
  body.context-course_1:not(.is-teacher) .tb-score-card { padding: 24px 18px !important; }
}

/* ===== Alignment v3 (ref pages/rezultati-testa.html): q-head, history, bottom, opcije ===== */
/* (3) Remove „Историја покушаја" from view (stays in the DOM for the hero badges) */
body.context-course_1:not(.is-teacher).tb-rq-results #quiz-submission-version-table,
body.context-course_1:not(.is-teacher).tb-rq-results #quiz-submission-version-table-wrapper { display: none !important; }
/* (4) Question header: transparent (no lilac stripe), padding 15px 22px */
body.context-course_1:not(.is-teacher).tb-rq-results .display_question > .header {
  background: transparent !important; border-bottom: 0 !important; padding: 15px 22px !important;
}
body.context-course_1:not(.is-teacher).tb-rq-results .display_question .question_name { color: var(--tb-ink) !important; font-size: 15px !important; font-weight: 700 !important; }
body.context-course_1:not(.is-teacher).tb-rq-results .display_question .question_points,
body.context-course_1:not(.is-teacher).tb-rq-results .display_question .question_points::after {
  color: var(--tb-faint) !important; font-size: 12px !important; font-weight: 600 !important;
}
/* (5) Question text: plain paragraph, no border */
body.context-course_1:not(.is-teacher).tb-rq-results .display_question .question_text { border: 0 !important; background: transparent !important; padding: 0 !important; font-size: 16px !important; line-height: 1.55 !important; }
/* (7) Options: gap 9px, padding 13×15; mark aligned to the top; selection LILAC (not red) */
body.context-course_1:not(.is-teacher).tb-rq-results .display_question .answer { margin: 0 0 9px 0 !important; }
body.context-course_1:not(.is-teacher).tb-rq-results .display_question .answer label.answer_row { padding: 13px 15px !important; align-items: flex-start !important; font-size: 15px !important; }
body.context-course_1:not(.is-teacher).tb-rq-results .display_question .answer .answer_input { margin-top: 1px !important; }
/* (8) Bottom result: centered, purple number; remove the „stray" line (teacher grading UI) */
body.context-course_1:not(.is-teacher).tb-rq-results #quiz_show .tb-rq-bottom {
  text-align: center !important; font-size: 20px !important; font-weight: 700 !important; color: var(--tb-ink) !important;
  margin: 34px 0 22px 0 !important; border: 0 !important; padding: 0 !important;
}
body.context-course_1:not(.is-teacher).tb-rq-results #quiz_show .tb-rq-bottom .tb-big { font-size: 28px !important; font-weight: 800 !important; color: var(--tb-purple-text) !important; font-variant-numeric: tabular-nums; }
body.context-course_1:not(.is-teacher).tb-rq-results #update_scores,
body.context-course_1:not(.is-teacher).tb-rq-results #speed_update_scores_container,
body.context-course_1:not(.is-teacher).tb-rq-results .update_scores,
body.context-course_1:not(.is-teacher).tb-rq-results .update_scores_fudge,
body.context-course_1:not(.is-teacher).tb-rq-results .update_scores_final_score { display: none !important; }

/* Hide the "Due" row in the quiz details box — these quizzes have no due dates.
   It is always the first <li> in #quiz_student_details (see _quiz_details.html.erb).
   Needs !important + matching scope to beat the `li { display: block !important }` rule above. */
body.context-course_1:not(.is-teacher) ul#quiz_student_details li:first-child { display: none !important; }

/* ============================================================
   Оцене (leader) — redesigned mastery team roster. Scoped to .mg-ocene.
   Markup: app/views/mastery_grades/show.html.erb. Interactions: masteryOceneInteractions().
   ============================================================ */
.mg-ocene {
  --ok-bg:#e3f7ec; --ok-fg:#157a3a; --ok-bd:#b9e6cb;
  --pu-bg:#efecfb; --pu-fg:#6c5ce7; --pu-bd:#d8d2f3;
  --gy-bg:#eef0f5; --gy-fg:#6f7589; --gy-bd:#dfe2eb;
  --or-bg:#ffeede; --or-fg:#c2570f; --or-bd:#f4d4b6;
  --bl-bg:#e6f1ff; --bl-fg:#2974c2; --bl-bd:#c5ddf6;
  --am-bg:#fff3da; --am-fg:#b7791f; --am-bd:#f0dcae;
  --ink:#1f2330; --muted:#5b6075; --faint:#8b90a4; --border:#e9e7f5; --divider:#f0eef8;
  --purple:#7c6cf0; --purple-text:#6c5ce7; --purple-soft:#efecfb; --purple-bd-soft:#d8d2f3;
  max-width: 1320px; margin: 0 auto; padding: 8px 0 48px; color: var(--ink);
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.mg-ocene * { box-sizing: border-box; }
.mg-ocene .data-label { display: none; }

.mg-ocene .mg-head { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:24px; }
.mg-ocene .mg-head .ht { flex:1 1 320px; min-width:0; }
.mg-ocene .mg-sub { font-size:14.5px; color:var(--muted); margin:0; }
.mg-ocene .mg-sub .sec { color:var(--purple-text); font-weight:700; }
.mg-ocene .mg-head-actions { display:flex; align-items:center; gap:10px; }
.mg-ocene .mg-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border-radius:9px; font-size:14px; font-weight:600; line-height:1; cursor:pointer;
  text-decoration:none; border:1px solid transparent; white-space:nowrap; transition:all .15s; }
.mg-ocene .mg-btn-primary { background:var(--purple); color:#fff; box-shadow:0 4px 12px rgba(124,108,240,.22); }
.mg-ocene .mg-btn-primary:hover { background:#6b5ec4; color:#fff; }
.mg-ocene .mg-btn-ghost { background:#fff; color:var(--ink); border-color:var(--border); }
.mg-ocene .mg-btn-ghost:hover { border-color:var(--purple-bd-soft); color:var(--purple-text); }
.mg-ocene .mg-btn-icon { padding:10px 12px; }

.mg-ocene .mg-summary { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:24px; }
.mg-ocene .mg-stat { background:#fff; border:1px solid var(--border); border-radius:16px; padding:18px;
  box-shadow:0 2px 10px rgba(124,111,214,.05); display:flex; align-items:center; gap:14px; cursor:pointer;
  transition:all .15s; }
.mg-ocene .mg-stat:hover { border-color:var(--purple-bd-soft); box-shadow:0 6px 18px rgba(124,108,240,.12); transform:translateY(-1px); }
.mg-ocene .mg-stat.active { border-color:var(--purple); box-shadow:0 0 0 2px rgba(124,108,240,.28); }
.mg-ocene .mg-stat .ic { flex:0 0 auto; width:44px; height:44px; border-radius:13px; display:grid; place-items:center; }
.mg-ocene .mg-val { font-size:26px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
.mg-ocene .mg-lbl { font-size:12px; color:var(--muted); font-weight:600; margin-top:6px; }
.mg-ocene .mg-stat-sub { font-size:12px; color:var(--purple-text); font-weight:700; margin-top:3px; }
.mg-ocene .s-total .ic { background:var(--purple-soft); color:var(--purple-text); }
.mg-ocene .s-done .ic { background:var(--ok-bg); color:var(--ok-fg); } .mg-ocene .s-done .mg-val { color:var(--ok-fg); }
.mg-ocene .s-prog .ic { background:var(--pu-bg); color:var(--pu-fg); } .mg-ocene .s-prog .mg-val { color:var(--pu-fg); }
.mg-ocene .s-help .ic { background:var(--or-bg); color:var(--or-fg); } .mg-ocene .s-help .mg-val { color:var(--or-fg); }
.mg-ocene .s-none .ic { background:var(--gy-bg); color:var(--gy-fg); } .mg-ocene .s-none .mg-val { color:var(--gy-fg); }

/* "Уживо обуке" filter chips (design_handoff_uzivo_obuke §3) — a secondary row below the 5 KPI
   cards, sharing @active_status with them (masteryOceneInteractions() enforces the mutual
   exclusivity). .pp-badge.pp-cbo/.pp-chief (defined earlier, Полазници PART) supply the icon
   colors — same "иста иконица, исто значење" reuse as the roster column. */
.mg-ocene .mg-live-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:24px; }
.mg-ocene .mg-live-lbl { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--faint); }
.mg-ocene .mg-live-chip { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--border); border-radius:999px; padding:6px 14px 6px 6px; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; transition:all .15s; }
.mg-ocene .mg-live-chip:hover { border-color:var(--purple-bd-soft); }
.mg-ocene .mg-live-chip .pp-badge { width:20px; height:20px; }
.mg-ocene .mg-live-chip .cnt { font-variant-numeric:tabular-nums; }
.mg-ocene .mg-live-chip.active { background:var(--purple); border-color:var(--purple); color:#fff; }
.mg-ocene .mg-live-chip.active .pp-badge.pp-cbo, .mg-ocene .mg-live-chip.active .pp-badge.pp-chief {
  background:rgba(255,255,255,.2); border-color:transparent; color:#fff;
}

.mg-ocene .mg-trunc { font-size:12.5px; color:var(--faint); margin:0 0 10px; }
/* Server-side pagination: footer count + infinite-scroll sentinel (pattern .pp-footer/#pp-sentinel). */
.mg-ocene .mg-footer { padding:14px 2px 0; font-size:13px; color:var(--faint); }
#mg-sentinel { height:1px; }
.mg-ocene .mg-roster-card { background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:0 2px 12px rgba(124,108,240,.05); }
.mg-ocene .mg-roster-scroll { overflow-x:auto; }
.mg-ocene table.mg-roster { width:100%; border-collapse:separate; border-spacing:0; font-size:14px; }
.mg-ocene .mg-roster thead th { text-align:left; padding:13px 20px; font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--faint); background:#fbfbfe; border-bottom:1px solid var(--border); }
.mg-ocene .mg-roster thead th.c { text-align:center; } .mg-ocene .mg-roster thead th.r { text-align:right; }
.mg-ocene .mg-lrow { cursor:pointer; }
.mg-ocene .mg-lrow > td { padding:13px 20px; border-bottom:1px solid var(--divider); vertical-align:middle; }
.mg-ocene .mg-lrow > td.c { text-align:center; } .mg-ocene .mg-lrow > td.r { text-align:right; }
.mg-ocene .mg-lrow:hover > td { background:#faf9fe; }
.mg-ocene .mg-lrow.open > td { background:#f6f4fd; }
.mg-ocene .who { display:flex; align-items:center; gap:12px; }
.mg-ocene .av { flex:0 0 auto; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-size:13.5px; font-weight:700; color:#fff; }
.mg-ocene .who .nm { font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.25; }
.mg-ocene .who .em { font-size:12px; color:var(--faint); }
.mg-ocene .lessons { display:flex; align-items:center; gap:10px; min-width:150px; }
.mg-ocene .mini-bar { flex:1 1 auto; height:7px; border-radius:999px; background:#ecebf6; overflow:hidden; min-width:60px; }
.mg-ocene .mini-bar > span { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#8b7bf3,#7c6cf0); }
.mg-ocene .lessons .nx { font-size:12.5px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.mg-ocene .gpill { display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:30px; padding:0 11px; border-radius:9px; font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; border:1.5px solid var(--border); }
.mg-ocene .gpill.g5p { background:var(--purple); color:#fff; border-color:var(--purple); }
.mg-ocene .gpill.g5 { background:var(--ok-bg); color:var(--ok-fg); border-color:var(--ok-bd); }
.mg-ocene .gpill.g4 { background:var(--bl-bg); color:var(--bl-fg); border-color:var(--bl-bd); }
.mg-ocene .gpill.g3 { background:var(--am-bg); color:var(--am-fg); border-color:var(--am-bd); }
.mg-ocene .gpill.g2 { background:var(--or-bg); color:var(--or-fg); border-color:var(--or-bd); }
.mg-ocene .gpill.g0 { background:#fff; color:#c2c4d0; border-style:dashed; }
.mg-ocene .sbadge { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; padding:6px 12px; border-radius:999px; white-space:nowrap; }
.mg-ocene .sbadge .dot { width:7px; height:7px; border-radius:50%; }
.mg-ocene .sbadge.st-done { background:var(--ok-bg); color:var(--ok-fg); } .mg-ocene .sbadge.st-done .dot { background:var(--ok-fg); }
.mg-ocene .sbadge.st-prog { background:var(--pu-bg); color:var(--pu-fg); } .mg-ocene .sbadge.st-prog .dot { background:var(--pu-fg); }
.mg-ocene .sbadge.st-none { background:var(--gy-bg); color:var(--gy-fg); } .mg-ocene .sbadge.st-none .dot { background:var(--gy-fg); }
.mg-ocene .sbadge.st-help { background:var(--or-bg); color:var(--or-fg); } .mg-ocene .sbadge.st-help .dot { background:var(--or-fg); }
.mg-ocene .last { font-size:13px; color:var(--muted); white-space:nowrap; } .mg-ocene .last.dim { color:var(--faint); }
.mg-ocene .acts { display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.mg-ocene .iconbtn { width:32px; height:32px; border-radius:8px; border:1px solid transparent; background:transparent; color:var(--faint); cursor:pointer; display:grid; place-items:center; transition:all .14s; }
.mg-ocene .iconbtn:hover { background:#fff; border-color:var(--border); color:var(--purple-text); }
.mg-ocene .chev { transition:transform .2s; }
.mg-ocene .mg-lrow.open .chev { transform:rotate(180deg); color:var(--purple-text); }

/* Custom: section selector (leader with multiple sections) + „Секција" badge/column. Rendered only when the view
   provides #mg-section (pattern .pp-select-wrap/.pp-sec from „Полазници"); a single section → none of this. */
.mg-ocene .mg-section-wrap { position:relative; display:inline-block; max-width:100%; }
.mg-ocene .mg-section-wrap select { appearance:none; -webkit-appearance:none; width:100%; height:42px;
  padding:10px 40px 10px 15px; border:1px solid var(--purple-bd-soft); border-radius:10px;
  font:inherit; font-size:15px; font-weight:700; color:var(--purple-text); background:#fff; cursor:pointer; }
.mg-ocene .mg-section-wrap select:focus { outline:none; border-color:var(--purple); box-shadow:0 0 0 3px rgba(124,108,240,.15); }
.mg-ocene .mg-section-wrap::after { content:""; position:absolute; right:16px; top:50%; width:8px; height:8px;
  border-right:2px solid var(--purple-text); border-bottom:2px solid var(--purple-text);
  transform:translateY(calc(-50% - 3px)) rotate(45deg); pointer-events:none; }
.mg-ocene .mg-sec { display:inline-block; max-width:100%; padding:3px 10px; border-radius:999px;
  background:var(--purple-soft); color:var(--purple-text); border:1px solid var(--purple-bd-soft);
  font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; }
.mg-ocene .mg-sec.none { background:transparent; border:none; color:var(--faint); font-weight:400; padding:0; }
/* A student in multiple leader sections: primary badge + „+N" (tooltip = all sections, via portal [data-tip]). */
.mg-ocene .mg-sec-multi { display:inline-flex; align-items:center; gap:5px; vertical-align:middle; cursor:default; }
.mg-ocene .mg-sec.more { padding:3px 8px; }

/* ===== Shared component: inline student progress detail =====
   Same render (masteryRenderDetail) and endpoint (/courses/:id/mastery_grades/:uid.json) on „Оцене"
   (.mg-ocene) and „Полазници" (.pp-people). Inner styles are tied to .detail-wrap (not to the page),
   so they don't duplicate; only the open/close toggle depends on each page's row. */
.mg-ocene .mg-detail-row > td,
.pp-people .pp-detail-row > td { padding:0; border-bottom:1px solid var(--divider); background:#faf9fe; }
.mg-ocene .detail-wrap,
.pp-people .detail-wrap { display:none; padding:22px 24px 26px;
  /* grade palette — on .detail-wrap itself, so it works in .pp-people too (which doesn't have it in its scope) */
  --ok-bg:#e3f7ec; --ok-fg:#157a3a; --ok-bd:#b9e6cb; --pu-bg:#efecfb; --pu-fg:#6c5ce7; --pu-bd:#d8d2f3;
  --gy-bg:#eef0f5; --gy-fg:#6f7589; --gy-bd:#dfe2eb; --or-bg:#ffeede; --or-fg:#c2570f; --or-bd:#f4d4b6;
  --bl-bg:#e6f1ff; --bl-fg:#2974c2; --bl-bd:#c5ddf6; --am-bg:#fff3da; --am-fg:#b7791f; --am-bd:#f0dcae; }
.mg-ocene .mg-lrow.open + .mg-detail-row .detail-wrap,
.pp-people .pp-row.open + .pp-detail-row .detail-wrap { display:block; }
.detail-wrap .detail-top { display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-bottom:18px; }
.detail-wrap .detail-prog { flex:1 1 280px; min-width:0; }
.detail-wrap .detail-prog .row { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px; }
.detail-wrap .detail-prog .lbl { font-size:12.5px; font-weight:700; color:var(--muted); }
.detail-wrap .detail-prog .val { font-size:13.5px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.detail-wrap .detail-prog .val b { color:var(--purple-text); }
.detail-wrap .detail-prog .bar { height:11px; border-radius:999px; background:#ecebf6; overflow:hidden; }
.detail-wrap .detail-prog .bar > span { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#8b7bf3,#7c6cf0); }
.detail-wrap .detail-note { font-size:12.5px; color:var(--faint); margin:8px 0 0; }
.detail-wrap .lesson-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(186px,1fr)); gap:12px; }
.detail-wrap .lcard { background:#fff; border:1px solid var(--border); border-radius:13px; padding:13px 15px; }
.detail-wrap .lcard.final { border-color:var(--pu-bd); background:#fcfbff; }
.detail-wrap .lc-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; }
.detail-wrap .lc-name { font-size:13.5px; font-weight:700; color:var(--ink); }
.detail-wrap .gtag { flex:0 0 auto; min-width:30px; height:26px; padding:0 9px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-size:13.5px; font-weight:800; font-variant-numeric:tabular-nums; border:1.5px solid var(--border); }
.detail-wrap .gtag.g5p { background:var(--purple); color:#fff; border-color:var(--purple); }
.detail-wrap .gtag.g5 { background:var(--ok-bg); color:var(--ok-fg); border-color:var(--ok-bd); }
.detail-wrap .gtag.g4 { background:var(--bl-bg); color:var(--bl-fg); border-color:var(--bl-bd); }
.detail-wrap .gtag.g3 { background:var(--am-bg); color:var(--am-fg); border-color:var(--am-bd); }
.detail-wrap .gtag.g2 { background:var(--or-bg); color:var(--or-fg); border-color:var(--or-bd); }
.detail-wrap .gtag.g0 { background:#f4f4f8; color:#b6b8c4; border-color:#e6e6ee; border-style:dashed; }
.detail-wrap .lc-status { font-size:12px; font-weight:700; margin-bottom:6px; }
.detail-wrap .lc-status.ok { color:var(--ok-fg); } .detail-wrap .lc-status.nope { color:var(--or-fg); }
.detail-wrap .lc-status.wip { color:var(--pu-fg); } .detail-wrap .lc-status.idle { color:var(--faint); }
.detail-wrap .lc-meta { font-size:12px; color:var(--muted); display:flex; gap:12px; }
.detail-wrap .lc-meta span b { color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; }
.detail-wrap .privacy-note { display:flex; align-items:center; gap:8px; margin-top:16px; font-size:12px; color:var(--faint); }
/* „стара платформа" (old platform) — a result recognized from the old platform (fsn1), not taken on this instance.
   On the test card = a small amber archive icon in the corner (next to the grade), instead of bulky text → the name
   stays on one line. The circle is the same as .pp-legacy in the list; the hover description goes via the portal (#pp-tip),
   because .pp-card/.mg- scroll would clip a CSS bubble. */
.detail-wrap .lc-oldp-ico { flex:0 0 auto; width:22px; height:22px; border-radius:999px; display:grid; place-items:center;
  color:#b07d24; background:#fdf3e3; border:1px solid #f0dcae; cursor:default; }
.detail-wrap .lc-oldp-ico svg { display:block; }
.detail-wrap .lcard.oldp { background:#fffaf0; border-color:var(--am-bd); }
.detail-wrap .lcard.oldp .lc-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.detail-wrap .oldp-note { color:var(--am-fg); }
.detail-wrap .mg-detail-loading { color:var(--faint); font-size:13px; padding:4px 0; }
/* Skeleton while the student detail loads (mirror of the detail layout: top strip + card grid) */
.detail-wrap .mg-sk-top { height:54px; border-radius:10px; margin-bottom:16px; }
.detail-wrap .mg-sk-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.detail-wrap .mg-sk-card { height:92px; border-radius:12px; }
.detail-wrap .mg-sk-top, .detail-wrap .mg-sk-card { background:linear-gradient(90deg,#ecebf4 8%,#f5f4fa 18%,#ecebf4 33%); background-size:200% 100%; animation:tb-skel 1.4s linear infinite; }
/* "Уживо обука" segment (design_handoff_uzivo_obuke §2, "Полазници" only — "Grades" has no
   .lt-history element at all). Sits ABOVE .detail-wrap as a SIBLING, not nested inside it — see
   the comment in _rows.html.erb for why (masteryLoadDetail/masteryRenderDetail are shared with
   "Grades" and fully own .detail-wrap's innerHTML there; nesting would let either render clobber
   the other on an out-of-order response). border-bottom + its own padding gives the "border-bottom
   + padding/margin 22px" separation the handoff specifies; .detail-wrap's own top padding (22px)
   then provides the same gap down to "Напредак кроз обуку". */
.pp-people .lt-history { display:none; padding:22px 24px; border-bottom:1px solid var(--divider); }
.pp-people .pp-row.open + .pp-detail-row .lt-history { display:block; }
.pp-people .lt-history-title { font-size:12.5px; font-weight:700; color:var(--muted); margin:0 0 10px; }
.pp-people .lt-history-empty, .pp-people .lt-history-loading { font-size:13.5px; color:var(--faint); margin:0; }
.pp-people .lt-history-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.pp-people .lt-card { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
/* Pill = icon + code, link to the server-provided edit_url (design handoff §2 ".live-code").
   Tooltip = the [data-tip] portal (ppBadgeTooltips, canvas-custom.js) — a position:fixed layer on
   <body>, so unlike the standalone prototype's own local CSS bubble it is never clipped by this
   card's overflow; the handoff's "излази испод и лево поравнат" fix for that clipping is therefore
   not needed here (the portal already clamps to the viewport and flips above/below on its own). */
/* Also used by .lt-page's own Тип column (PART 13, "Уживо обуке" events list) — a static badge
   there (no href), unlike this detail-card pill, but sharing the class avoids duplicating the
   icon/color rules; .lt-page redeclares the same --purple-* token values (see its own header
   comment), so this renders identically in both places. */
.pp-people .lt-pill, .lt-page .lt-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 10px 5px 6px; border-radius:999px; font-size:12.5px; font-weight:700; text-decoration:none; }
.pp-people .lt-pill:hover, .lt-page .lt-pill:hover { text-decoration:underline; }
.pp-people .lt-pill svg, .lt-page .lt-pill svg { display:block; }
.pp-people .lt-pill.cbo, .lt-page .lt-pill.cbo { background:var(--purple-soft); color:var(--purple-text); border:1px solid var(--purple-bd-soft); }
.pp-people .lt-pill.sbm, .lt-page .lt-pill.sbm { background:#fdeaef; color:#c23b63; border:1px solid #f4c6d5; }
/* Faza 4A field grid (design handoff §2 "dl.live-dl"): Секција/Датум/Тренери always, Остали
   присутни/Утисци only when the renderer added those rows (server omits the keys when blank). */
.pp-people .lt-dl { display:grid; grid-template-columns:max-content 1fr; column-gap:16px; row-gap:6px; font-size:13px; margin:0; }
.pp-people .lt-dl dt { color:var(--muted); font-weight:600; }
.pp-people .lt-dl dd { color:var(--ink); margin:0; }
/* Contact block (CUSTOM-PARTICIPANT-FIELDS-PLAN.md §11 Faza 8, "Полазници" only; markup
   _rows.html.erb .pp-contact): Е-пошта + the readable custom-field values as label/value rows, the
   full-text counterpart of the hover-only .pp-cf badges in the row. Sits ABOVE .lt-history as a
   SIBLING of it and of .detail-wrap — same padding + divider rhythm as .lt-history, so the three
   stack as equal bands; same open/close toggle as .lt-history (driven by the row's .open class). The
   dl mirrors .lt-dl's grid (label column = widest label, values fill the rest). */
.pp-people .pp-contact { display:none; padding:22px 24px; border-bottom:1px solid var(--divider); }
.pp-people .pp-row.open + .pp-detail-row .pp-contact { display:block; }
.pp-people .pp-contact-dl { display:grid; grid-template-columns:max-content 1fr; column-gap:24px; row-gap:8px; font-size:13.5px; margin:0; }
.pp-people .pp-contact-dl dt { color:var(--muted); font-weight:600; }
.pp-people .pp-contact-dl dd { color:var(--ink); margin:0; min-width:0; overflow-wrap:anywhere; }
/* Faza 8B inline edit (CUSTOM-PARTICIPANT-FIELDS-PHASE8B-EDIT-PLAN.md): the pencil sits next to the
   value, a compact „Сачувај"/„Откажи" form replaces the whole <dd> content on click (canvas-custom.js
   ppCfShowForm). .pp-cf-form's buttons reuse .pp-btn/.pp-btn-primary/.pp-btn-ghost (same look as the
   rest of the roster) at a smaller, row-appropriate size — a scoped override, not a new button style. */
.pp-people .pp-cf-val { display:flex; align-items:center; gap:8px; }
.pp-people .pp-cf-edit { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  border:0; background:none; color:var(--muted); border-radius:6px; cursor:pointer; padding:0; flex:none; }
.pp-people .pp-cf-edit:hover { background:var(--purple-bd-soft); color:var(--purple-text); }
.pp-people .pp-cf-form { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pp-people .pp-cf-input { flex:1 1 180px; min-width:120px; height:30px; box-sizing:border-box; padding:0 10px;
  border:1px solid var(--border); border-radius:7px; font:inherit; font-size:13.5px; color:var(--ink); }
.pp-people .pp-cf-input:focus { outline:none; border-color:var(--purple-bd-soft); }
.pp-people .pp-cf-form .pp-btn { height:30px; padding:0 14px; font-size:13px; }
.pp-people .pp-cf-form .pp-btn:disabled { opacity:.6; cursor:not-allowed; }
/* „Преузми CSV" busy state: dimmed + spinner while the report is being prepared */
.mg-ocene .mg-btn-busy { opacity:.72; pointer-events:none; cursor:default; }
.mg-ocene .mg-btn-spinner { display:inline-block; width:15px; height:15px; box-sizing:border-box; border-radius:50%; border:2px solid rgba(255,255,255,.55); border-top-color:#fff; animation:tb-csv-spin .6s linear infinite; }

/* „Сарадници/Полазници" — click-on-row + inline detail (the same .detail-wrap component from above).
   Only student rows (not „на чекању") get .pp-expandable; leader/pending rows are not clickable. */
.pp-people .pp-expandable { cursor:pointer; }
.pp-people .pp-expandable:hover > td { background:#faf9fe; }
.pp-people .pp-row.open > td { background:#f6f4fd; }
/* „стара платформа" pill — now only on „Оцене" (.mg-oldp). „Полазници" (.pp-people) uses
   the amber icon .pp-badge.pp-legacy in the group of status icons (see below). */
.mg-ocene .mg-oldp { display:inline-flex; align-items:center; margin-left:8px; padding:2px 8px; border-radius:999px; font-size:10.5px; font-weight:700; color:#b7791f; background:#fff3da; border:1px solid #f0dcae; white-space:nowrap; vertical-align:middle; }
.pp-people .pp-acts { display:flex; align-items:center; justify-content:flex-end; gap:2px; }
.pp-people .pp-chev { flex:0 0 auto; width:26px; height:26px; display:grid; place-items:center; color:var(--faint); transition:transform .2s, color .2s; }
.pp-people .pp-row.open .pp-chev { transform:rotate(180deg); color:var(--purple-text); }

@media (max-width:820px) { .detail-wrap .mg-sk-grid { grid-template-columns:1fr 1fr; } }

@media (max-width:820px) {
  .mg-ocene .mg-summary { grid-template-columns:1fr 1fr; }
  .mg-ocene table.mg-roster, .mg-ocene .mg-roster thead, .mg-ocene .mg-roster tbody, .mg-ocene .mg-roster tr, .mg-ocene .mg-roster td { display:block; width:100%; }
  .mg-ocene .mg-roster thead { display:none; }
  .mg-ocene .mg-lrow > td { padding:6px 16px; border:0; display:flex; align-items:center; gap:10px; }
  .mg-ocene .mg-lrow { border-bottom:1px solid var(--divider); padding:8px 0; }
  .mg-ocene .data-label { display:inline-block; min-width:116px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--faint); }
  .detail-wrap .lesson-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:520px) { .mg-ocene .mg-summary { grid-template-columns:1fr; } .detail-wrap .lesson-grid { grid-template-columns:1fr; } }


/* ============================================================ */
/* MASTERY QUIZ RESULTS — server-side template (.mastery-results-page)            */
/* Rendered by app/views/quizzes/quizzes/_mastery_submission.html.erb for mastery  */
/* quizzes. Questions reuse native _display_question; styled here. Scoped + high    */
/* specificity to override base theme quiz CSS. Theme JS stands down on this page.  */
/* ============================================================ */
body.context-course_1:not(.is-teacher) .mastery-results-page {
  --mr-purple:#7c6cf0; --mr-purple-dark:#6b5ec4; --mr-purple-text:#6c5ce7; --mr-purple-soft:#efecfb; --mr-purple-bd:#d8d2f3;
  --mr-ink:#1f2330; --mr-muted:#5b6075; --mr-faint:#8b90a4; --mr-bd:#e9e7f5; --mr-divider:#f0eef8;
  --mr-ok-bg:#eafaf0; --mr-ok-bd:#b9e6cb; --mr-ok-fg:#157a3a; --mr-ok-tint:#f3fbf6;
  --mr-bad-bg:#fdeeee; --mr-bad-bd:#f3c9c9; --mr-bad-fg:#c0392b; --mr-bad-tint:#fef6f5;
  --mr-warn-bg:#fff4e1; --mr-warn-bd:#f3d9a8; --mr-warn-fg:#b7791f;
  max-width:820px; margin:0 auto; padding:8px 0 40px; color:var(--mr-ink);
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
body.context-course_1:not(.is-teacher) .mastery-results-page,
body.context-course_1:not(.is-teacher) .mastery-results-page * { box-sizing:border-box; }

/* HERO */
body.context-course_1:not(.is-teacher) .mastery-hero { text-align:center; margin:0 0 26px; }
body.context-course_1:not(.is-teacher) .mastery-hero h1 { margin:0 0 18px; font-size:32px; font-weight:800; letter-spacing:-0.02em; color:var(--mr-ink); }
body.context-course_1:not(.is-teacher) .mastery-score-card { background:#fff; border:1px solid var(--mr-bd); border-radius:20px; box-shadow:0 6px 28px rgba(124,108,240,0.10); padding:28px 26px; max-width:460px; margin:0 auto; }
body.context-course_1:not(.is-teacher) .mastery-score-card .msc-label { font-size:13px; font-weight:600; color:var(--mr-muted); }
body.context-course_1:not(.is-teacher) .mastery-score-card .msc-badges { display:flex; justify-content:center; gap:8px; margin:12px 0 4px; }
body.context-course_1:not(.is-teacher) .mastery-score-card .msc-badges:empty { display:none; }
body.context-course_1:not(.is-teacher) .mastery-score-card .msc-badge { display:inline-flex; align-items:center; font-size:11px; font-weight:700; letter-spacing:.06em; padding:5px 11px; border-radius:999px; text-transform:uppercase; }
body.context-course_1:not(.is-teacher) .mastery-score-card .msc-badge.kept { background:var(--mr-purple-soft); color:var(--mr-purple-text); }
body.context-course_1:not(.is-teacher) .mastery-score-card .msc-badge.latest { background:#eef0f5; color:#5b6075; }
body.context-course_1:not(.is-teacher) .mastery-score-card .msc-value { font-size:60px; font-weight:800; line-height:1; letter-spacing:-0.03em; color:var(--mr-purple-text); font-variant-numeric:tabular-nums; margin:6px 0 4px; }
body.context-course_1:not(.is-teacher) .mastery-score-card .msc-value .den { color:var(--mr-faint); font-weight:700; }
body.context-course_1:not(.is-teacher) .mastery-score-card .msc-sub { display:flex; justify-content:center; gap:22px; margin-top:16px; padding-top:16px; border-top:1px solid var(--mr-divider); font-size:13px; color:var(--mr-muted); }
body.context-course_1:not(.is-teacher) .mastery-score-card .msc-sub .k { color:var(--mr-faint); display:block; font-size:11px; font-weight:600; letter-spacing:.03em; margin-bottom:2px; }
body.context-course_1:not(.is-teacher) .mastery-score-card .msc-sub .v { font-weight:600; color:var(--mr-ink); font-variant-numeric:tabular-nums; }
body.context-course_1:not(.is-teacher) .mastery-cta { display:inline-flex; align-items:center; gap:9px; margin-top:22px; background:var(--mr-purple); color:#fff; border:0; border-radius:11px; padding:14px 28px; font-size:15px; font-weight:700; line-height:1; text-decoration:none; box-shadow:0 6px 16px rgba(124,108,240,0.30); transition:background .15s; }
body.context-course_1:not(.is-teacher) .mastery-cta:hover { background:var(--mr-purple-dark); color:#fff; text-decoration:none; }
body.context-course_1:not(.is-teacher) .mastery-cta:active { transform:translateY(1px); }

/* ---- Mastery quiz INTRO (Покретање/Наставak / Start/Resume) — server-side _mastery_quiz_intro ---- */
/* Reuses .mastery-card / .mastery-info-grid / .mastery-instr-block / .mastery-cta; redeclares  */
/* the --mr-* tokens here since they're scoped to .mastery-results-page (a separate container).  */
body.context-course_1:not(.is-teacher) .mastery-quiz-intro {
  --mr-purple:#7c6cf0; --mr-purple-dark:#6b5ec4; --mr-purple-text:#6c5ce7; --mr-purple-soft:#efecfb; --mr-purple-bd:#d8d2f3;
  --mr-ink:#1f2330; --mr-muted:#5b6075; --mr-faint:#8b90a4; --mr-bd:#e9e7f5; --mr-divider:#f0eef8;
  --mr-warn-bg:#fff4e1; --mr-warn-bd:#f3d9a8; --mr-warn-fg:#b7791f;
  max-width:760px; margin:0 auto; padding:8px 0 40px; color:var(--mr-ink);
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
body.context-course_1:not(.is-teacher) .mastery-quiz-intro,
body.context-course_1:not(.is-teacher) .mastery-quiz-intro * { box-sizing:border-box; }
body.context-course_1:not(.is-teacher) .mqi-hero { text-align:center; margin:0 0 28px; }
body.context-course_1:not(.is-teacher) .mqi-hero h1 { margin:0; font-size:34px; font-weight:800; letter-spacing:-0.02em; color:var(--mr-ink); }
body.context-course_1:not(.is-teacher) .mqi-start { text-align:center; margin:30px 0 14px; }
body.context-course_1:not(.is-teacher) .mqi-start .mastery-cta { margin-top:0; padding:16px 38px; font-size:16px; border-radius:12px; gap:10px; }
body.context-course_1:not(.is-teacher) .mqi-start .mastery-cta svg { width:19px; height:19px; flex:0 0 auto; }
body.context-course_1:not(.is-teacher) .mqi-note { margin-top:14px; font-size:13px; font-weight:500; color:var(--mr-faint); }
@media (max-width:720px) {
  body.context-course_1:not(.is-teacher) .mqi-hero h1 { font-size:27px; }
  body.context-course_1:not(.is-teacher) .mqi-start .mastery-cta { width:100%; justify-content:center; }
}

/* STATUS BANNER */
body.context-course_1:not(.is-teacher) .mastery-status { border-radius:16px; padding:20px 22px; margin:0 0 22px; display:flex; gap:16px; align-items:flex-start; border:1px solid; }
body.context-course_1:not(.is-teacher) .mastery-status .ico { flex:0 0 auto; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; }
body.context-course_1:not(.is-teacher) .mastery-status h2 { margin:0 0 5px; font-size:17px; font-weight:700; }
body.context-course_1:not(.is-teacher) .mastery-status p { margin:0; font-size:14px; line-height:1.55; }
body.context-course_1:not(.is-teacher) .mastery-status.warn { background:var(--mr-warn-bg); border-color:var(--mr-warn-bd); color:var(--mr-warn-fg); }
body.context-course_1:not(.is-teacher) .mastery-status.warn .ico { background:#fbe6bf; color:var(--mr-warn-fg); } body.context-course_1:not(.is-teacher) .mastery-status.warn h2 { color:var(--mr-warn-fg); }
body.context-course_1:not(.is-teacher) .mastery-status.ok { background:var(--mr-ok-bg); border-color:var(--mr-ok-bd); color:#186b39; }
body.context-course_1:not(.is-teacher) .mastery-status.ok .ico { background:#c8efd6; color:var(--mr-ok-fg); } body.context-course_1:not(.is-teacher) .mastery-status.ok h2 { color:var(--mr-ok-fg); }
body.context-course_1:not(.is-teacher) .mastery-status.fail { background:#fff1e6; border-color:#f5cda4; color:#8a4f1a; }
body.context-course_1:not(.is-teacher) .mastery-status.fail .ico { background:#fbdcbf; color:#c4711d; } body.context-course_1:not(.is-teacher) .mastery-status.fail h2 { color:#c4711d; }
/* CTA to "Завршетак обуке" — green button inside the ok status card (only on the passed final test). */
body.context-course_1:not(.is-teacher) .mastery-status .final-cta { display:inline-flex; align-items:center; gap:9px; margin-top:14px; background:var(--mr-ok-fg); color:#fff; border-radius:10px; padding:11px 18px; font-size:14px; font-weight:700; text-decoration:none; box-shadow:0 6px 16px rgba(21,122,58,.22); transition:transform .06s, box-shadow .15s, background .15s; }
body.context-course_1:not(.is-teacher) .mastery-status .final-cta:hover { background:#11692f; box-shadow:0 8px 22px rgba(21,122,58,.3); color:#fff; text-decoration:none; }
body.context-course_1:not(.is-teacher) .mastery-status .final-cta:active { transform:translateY(1px); }
body.context-course_1:not(.is-teacher) .mastery-status .final-cta .fc-arrow { transition:transform .15s; }
body.context-course_1:not(.is-teacher) .mastery-status .final-cta:hover .fc-arrow { transform:translateX(3px); }

/* SHARED CARD */
body.context-course_1:not(.is-teacher) .mastery-card { background:#fff; border:1px solid var(--mr-bd); border-radius:14px; box-shadow:0 2px 10px rgba(124,108,240,0.05); margin:0 0 22px; overflow:hidden; }
body.context-course_1:not(.is-teacher) .mastery-card__header { background:#f3f1fc; border-bottom:1px solid #ece7f7; padding:15px 22px; font-size:14px; font-weight:700; color:var(--mr-purple-text); letter-spacing:-0.01em; }
body.context-course_1:not(.is-teacher) .mastery-card__body { padding:18px 22px; }
body.context-course_1:not(.is-teacher) .mastery-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; }
body.context-course_1:not(.is-teacher) .mastery-info-grid .minfo .k { font-size:12px; font-weight:600; color:var(--mr-faint); margin-bottom:3px; }
body.context-course_1:not(.is-teacher) .mastery-info-grid .minfo .v { font-size:15px; font-weight:600; color:var(--mr-ink); }
body.context-course_1:not(.is-teacher) .mastery-instr { font-size:15px; line-height:1.5; color:var(--mr-warn-fg); }
body.context-course_1:not(.is-teacher) .mastery-instr p { margin:0 0 8px; }
body.context-course_1:not(.is-teacher) .mastery-instr p:last-child { margin-bottom:0; }
/* Упутства = cream strip at the bottom of the same „Подаци о тесту" card (warn tokens) */
body.context-course_1:not(.is-teacher) .mastery-instr-block { background:var(--mr-warn-bg); border-top:1px solid var(--mr-warn-bd); padding:14px 22px; }
body.context-course_1:not(.is-teacher) .mastery-instr-label { font-size:12px; font-weight:700; color:var(--mr-warn-fg); letter-spacing:0.01em; margin:0 0 5px; }

/* ATTEMPTS */
body.context-course_1:not(.is-teacher) .mastery-attempts { width:100%; border-collapse:collapse; }
body.context-course_1:not(.is-teacher) .mastery-attempts th { text-align:left; font-size:12.5px; font-weight:600; color:var(--mr-faint); padding:6px 8px 10px; border-bottom:1px solid var(--mr-divider); }
body.context-course_1:not(.is-teacher) .mastery-attempts td { padding:13px 8px; font-size:15px; border-bottom:1px solid var(--mr-divider); }
body.context-course_1:not(.is-teacher) .mastery-attempts tr:last-child td { border-bottom:0; }
body.context-course_1:not(.is-teacher) .mastery-attempts .att-n { font-weight:700; color:var(--mr-ink); }
body.context-course_1:not(.is-teacher) .mastery-attempts .att-t { color:var(--mr-muted); font-variant-numeric:tabular-nums; }
body.context-course_1:not(.is-teacher) .mastery-attempts .att-r { font-weight:700; color:var(--mr-ink); font-variant-numeric:tabular-nums; }
body.context-course_1:not(.is-teacher) .mastery-attempts .mini-badge { white-space:nowrap; font-size:10px; font-weight:700; letter-spacing:.05em; padding:3px 8px; border-radius:999px; text-transform:uppercase; margin-left:8px; }
body.context-course_1:not(.is-teacher) .mastery-attempts .mini-badge.kept { background:var(--mr-purple-soft); color:var(--mr-purple-text); }
body.context-course_1:not(.is-teacher) .mastery-attempts .mini-badge.latest { background:#eef0f5; color:#5b6075; }

/* SECTION TITLE + BOTTOM */
body.context-course_1:not(.is-teacher) .mastery-section-title { font-size:19px; font-weight:800; letter-spacing:-0.01em; color:var(--mr-ink); margin:6px 2px 16px; }
body.context-course_1:not(.is-teacher) .mastery-bottom { text-align:center; margin:34px 0 22px; font-size:20px; font-weight:700; color:var(--mr-ink); }
body.context-course_1:not(.is-teacher) .mastery-bottom .big { font-size:28px; font-weight:800; color:var(--mr-purple-text); font-variant-numeric:tabular-nums; }
/* Mastery results bottom pager (mid test): summary → gate-note → Претходни + (Следећи | Уради тест поново). */
body.context-course_1:not(.is-teacher) .mastery-results-page .gate-note { text-align:center; margin:0 0 15px; font-size:13.5px; color:var(--mr-muted); }
body.context-course_1:not(.is-teacher) .mastery-results-page .mastery-pager { display:flex; justify-content:center; gap:12px; }
body.context-course_1:not(.is-teacher) .mastery-results-page .mastery-pager a { display:inline-flex; align-items:center; gap:7px; padding:11px 20px; border-radius:10px; border:1px solid var(--mr-bd); background:#fff; font-size:14px; font-weight:600; color:var(--mr-ink); text-decoration:none; transition:all .15s; }
body.context-course_1:not(.is-teacher) .mastery-results-page .mastery-pager a:hover { border-color:var(--mr-purple-bd); color:var(--mr-purple-text); text-decoration:none; }
body.context-course_1:not(.is-teacher) .mastery-results-page .mastery-pager a svg { flex:0 0 auto; }
body.context-course_1:not(.is-teacher) .mastery-results-page .mastery-pager a.is-retake { background:var(--mr-purple); border-color:var(--mr-purple); color:#fff; box-shadow:0 6px 16px rgba(124,108,240,0.30); }
body.context-course_1:not(.is-teacher) .mastery-results-page .mastery-pager a.is-retake:hover { background:var(--mr-purple-dark); border-color:var(--mr-purple-dark); color:#fff; }

/* QUESTIONS — reused native .display_question markup, restyled */
body.context-course_1:not(.is-teacher) .mastery-quiz-results { margin:0; }
/* Force the questions to the centered column width: #questions, the native .question_holder
   wrapper, and .display_question must be full-width with no horizontal margin/float/offset,
   otherwise Canvas's wrapper makes the cards misalign with the cards above. */
body.context-course_1:not(.is-teacher) .mastery-quiz-results,
body.context-course_1:not(.is-teacher) .mastery-quiz-results .question_holder,
body.context-course_1:not(.is-teacher) .mastery-quiz-results .display_question {
  width:100% !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important;
  float:none !important; position:static !important; box-sizing:border-box !important; left:auto !important;
}
body.context-course_1:not(.is-teacher) .mastery-quiz-results .question_holder { padding:0 !important; border:0 !important; background:transparent !important; }
body.context-course_1:not(.is-teacher) .mastery-quiz-results .display_question { background:#fff !important; border:1.5px solid var(--mr-bd) !important; border-radius:0 !important; box-shadow:0 2px 10px rgba(20,20,40,0.03) !important; margin:0 0 16px !important; padding:0 !important; overflow:visible !important; }
/* Belt-and-suspenders: no overflow clip anywhere on the question chain (take + results) */
body.context-course_1:not(.is-teacher) .display_question,
body.context-course_1:not(.is-teacher) .display_question > .header,
body.context-course_1:not(.is-teacher) .display_question > .text,
body.context-course_1:not(.is-teacher) .display_question .question_text,
body.context-course_1:not(.is-teacher) .display_question .question_text.user_content { overflow:visible !important; }
body.context-course_1:not(.is-teacher) .mastery-quiz-results .display_question.incorrect,
body.context-course_1:not(.is-teacher) .mastery-quiz-results .display_question.partial_credit { border-color:var(--mr-bad-bd) !important; }
body.context-course_1:not(.is-teacher) .mastery-quiz-results .display_question.correct { border-color:var(--mr-ok-bd) !important; }
body.context-course_1:not(.is-teacher) .mastery-quiz-results .display_question.unanswered { border-color:var(--mr-bd) !important; }
/* header: transparent, name ink, points faint, state pill via ::after */
body.context-course_1:not(.is-teacher) .mastery-quiz-results .display_question > .header { display:flex !important; align-items:center !important; gap:12px !important; background:transparent !important; border:0 !important; padding:15px 22px !important; }
body.context-course_1:not(.is-teacher) .mastery-quiz-results .display_question .question_name { color:var(--mr-ink) !important; font-size:15px !important; font-weight:700 !important; }
body.context-course_1:not(.is-teacher) .mastery-quiz-results .display_question .question_points_holder { font-size:0 !important; display:inline-flex !important; align-items:center !important; }
body.context-course_1:not(.is-teacher) .mastery-quiz-results .display_question .user_points { display:inline-flex !important; align-items:center !important; margin:0 !important; padding:0 !important; line-height:1 !important; }
body.context-course_1:not(.is-teacher) .mastery-quiz-results .display_question .question_points,
body.context-course_1:not(.is-teacher) .mastery-quiz-results .display_question .question_points::after { color:var(--mr-faint) !important; font-size:12px !important; font-weight:600 !important; }
body.context-course_1:not(.is-teacher) .mastery-quiz-results .display_question .question_points::after { content:" поен" !important; }
/* State pill is JS-built (.mr-q-state) so we can derive suppress-correct (no server class). */
body.context-course_1:not(.is-teacher) .mastery-quiz-results .display_question .mr-q-state { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; padding:5px 12px; border-radius:999px; white-space:nowrap; }
body.context-course_1:not(.is-teacher) .mastery-quiz-results .display_question .mr-q-state.incorrect { background:var(--mr-bad-bg); color:var(--mr-bad-fg); }
body.context-course_1:not(.is-teacher) .mastery-quiz-results .display_question .mr-q-state.correct { background:var(--mr-ok-bg); color:var(--mr-ok-fg); }
body.context-course_1:not(.is-teacher) .mastery-quiz-results .display_question .mr-q-state.unanswered { background:#f0f0f4; color:var(--mr-muted); }
/* JS-added border state (covers suppress-correct, which carries no server .correct class) */
body.context-course_1:not(.is-teacher) .mastery-quiz-results .display_question.mr-q-correct { border-color:var(--mr-ok-bd) !important; }
body.context-course_1:not(.is-teacher) .mastery-quiz-results .display_question.mr-q-incorrect { border-color:var(--mr-bad-bd) !important; }
/* question text + answers */
body.context-course_1:not(.is-teacher) .mastery-quiz-results .display_question > .text { padding:22px !important; overflow:visible !important; background:transparent !important; }
body.context-course_1:not(.is-teacher) .mastery-quiz-results .display_question .question_text { font-size:16px !important; line-height:1.55 !important; color:var(--mr-ink) !important; border:0 !important; background:transparent !important; padding:0 !important; margin:0 0 16px !important; }
/* Options — REAL results DOM (verified by rendering _display_answer):
     .answer > span.hidden.id
     .answer > div.select_answer.answer_type > input.question_input[disabled] + &nbsp; + label > .answer_text
     .answer > (hidden short_answer/matching/numerical answer_type variants) > .clear
   The input + label are nested inside .select_answer (NOT direct children of .answer), so the
   flex row lives on .select_answer. #questions (id) specificity beats base theme .answer/.answer_text. */
#questions.mastery-quiz-results .answers, #questions.mastery-quiz-results .answers_wrapper { border:0 !important; background:transparent !important; padding:0 !important; margin:0 !important; }
/* Card */
#questions.mastery-quiz-results .answer { display:block !important; background:#fff !important; border:1.5px solid #ececf3 !important; border-radius:12px !important; margin:0 0 9px !important; padding:13px 15px !important; min-height:0 !important; opacity:1 !important; }
#questions.mastery-quiz-results .answer .hidden { display:none !important; }
#questions.mastery-quiz-results .answer > .clear { display:none !important; }
/* Row: mark | text. Only the active answer_type wrapper is select_answer with no inline style;
   the short_answer/matching/numerical variants carry inline display:none, so :not([style*="display"])
   keeps them hidden (our !important would otherwise force-show them). font-size:0 collapses the &nbsp;. */
#questions.mastery-quiz-results .answer .select_answer:not([style*="display"]) { display:flex !important; align-items:flex-start !important; font-size:0 !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; }
#questions.mastery-quiz-results .answer .select_answer > label { flex:1 1 auto !important; min-width:0 !important; display:block !important; margin:0 !important; padding:0 !important; }
#questions.mastery-quiz-results .answer .answer_text, #questions.mastery-quiz-results .answer .answer_html, #questions.mastery-quiz-results .answer .select_answer > label { color:var(--mr-muted) !important; opacity:1 !important; font-size:14.5px !important; line-height:1.45 !important; font-weight:400 !important; margin:0 !important; padding:0 !important; background:transparent !important; }
#questions.mastery-quiz-results .answer .answer_html:empty { display:none !important; }
/* Answers authored in the rich editor arrive as :html („<p>text</p>") instead of :text — Canvas then
   hides .answer_text and renders .answer_html, and the <p>'s default margins made the row taller and
   pushed the label off the input's line (visible as checkbox answers sitting higher than the text).
   Zeroing the block margins makes an html answer occupy exactly one line, i.e. identical to a plain
   :text answer. NOT type-specific: 218 multiple_answers AND 47 multiple_choice answers carry :html. */
#questions.mastery-quiz-results .answer .answer_html > :first-child { margin-top:0 !important; }
#questions.mastery-quiz-results .answer .answer_html > :last-child { margin-bottom:0 !important; }
#questions.mastery-quiz-results .answer .answer_html p { margin:0 !important; padding:0 !important; line-height:1.45 !important; }
/* Mark = the native disabled input inside .select_answer, restyled (appearance:none) — not gray native */
#questions.mastery-quiz-results .answer .select_answer input.question_input { -webkit-appearance:none !important; appearance:none !important; flex:0 0 auto !important; width:20px !important; height:20px !important; border:2px solid #9b96b5 !important; background:#fff !important; margin:1px 12px 0 0 !important; padding:0 !important; box-sizing:border-box !important; opacity:1 !important; cursor:default !important; }
#questions.mastery-quiz-results .multiple_answers_question .answer .select_answer input.question_input { border-radius:6px !important; }
#questions.mastery-quiz-results .display_question:not(.multiple_answers_question) .answer .select_answer input.question_input { border-radius:999px !important; }
/* selected option = neutral purple (never red); never reveals which option is correct */
#questions.mastery-quiz-results .answer.selected_answer, #questions.mastery-quiz-results .answer:has(input:checked) { background:var(--mr-purple-soft) !important; border-color:var(--mr-purple-bd) !important; }
#questions.mastery-quiz-results .answer.selected_answer .answer_text, #questions.mastery-quiz-results .answer.selected_answer .answer_html, #questions.mastery-quiz-results .answer.selected_answer .select_answer > label, #questions.mastery-quiz-results .answer:has(input:checked) .answer_text, #questions.mastery-quiz-results .answer:has(input:checked) .answer_html, #questions.mastery-quiz-results .answer:has(input:checked) .select_answer > label { color:var(--mr-ink) !important; font-weight:600 !important; }
#questions.mastery-quiz-results .answer.selected_answer .select_answer input.question_input, #questions.mastery-quiz-results .answer .select_answer input.question_input:checked { background:var(--mr-purple) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='3.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='20%206%209%2017%204%2012'/%3E%3C/svg%3E") center/13px no-repeat !important; border-color:var(--mr-purple) !important; }
/* Bottom note (.q-note): JS-added .mr-q-note for incorrect/partial multi-answer + unanswered */
body.context-course_1:not(.is-teacher) .mastery-quiz-results .mr-q-note { display:flex; gap:10px; align-items:flex-start; margin-top:14px; padding:12px 14px; border-radius:10px; font-size:13.5px; line-height:1.5; }
body.context-course_1:not(.is-teacher) .mastery-quiz-results .mr-q-note svg { flex:0 0 auto; margin-top:1px; }
body.context-course_1:not(.is-teacher) .mastery-quiz-results .mr-q-note.bad { background:var(--mr-bad-tint); color:#9a3329; }
body.context-course_1:not(.is-teacher) .mastery-quiz-results .mr-q-note.bad svg { color:var(--mr-bad-fg); }
body.context-course_1:not(.is-teacher) .mastery-quiz-results .mr-q-note.neutral { background:#fafafc; color:var(--mr-muted); border:1px solid #e2e0ec; }

/* ---- Ordering (matching) read-only review (server _mastery_ordering_review) ---- */
body.context-course_1:not(.is-teacher) .mastery-quiz-results .order-review { display:flex; flex-direction:column; gap:9px; }
body.context-course_1:not(.is-teacher) .mastery-quiz-results .or-item { display:flex; align-items:flex-start; gap:13px; padding:13px 15px; background:#fff; border:1.5px solid #ececf3; border-radius:12px; }
body.context-course_1:not(.is-teacher) .mastery-quiz-results .or-rank { flex:0 0 auto; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:var(--mr-purple-soft); color:var(--mr-purple-text); font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; }
body.context-course_1:not(.is-teacher) .mastery-quiz-results .or-label { flex:1 1 auto; min-width:0; font-size:14.5px; line-height:1.45; color:var(--mr-ink); }
body.context-course_1:not(.is-teacher) .mastery-quiz-results .or-correct { display:block; margin-top:5px; font-size:13px; font-weight:600; color:var(--mr-ok-fg); }
body.context-course_1:not(.is-teacher) .mastery-quiz-results .or-mark { flex:0 0 auto; display:grid; place-items:center; margin-top:2px; }
/* reveal states — final passed, OR a failed mid attempt (see _mastery_submission.html.erb `reveal`) */
body.context-course_1:not(.is-teacher) .mastery-quiz-results .or-item.ok { border-color:var(--mr-ok-bd); background:var(--mr-ok-tint); }
body.context-course_1:not(.is-teacher) .mastery-quiz-results .or-item.ok .or-rank { background:var(--mr-ok-bg); color:var(--mr-ok-fg); }
body.context-course_1:not(.is-teacher) .mastery-quiz-results .or-item.ok .or-mark { color:var(--mr-ok-fg); }
body.context-course_1:not(.is-teacher) .mastery-quiz-results .or-item.bad { border-color:var(--mr-bad-bd); background:var(--mr-bad-tint); }
body.context-course_1:not(.is-teacher) .mastery-quiz-results .or-item.bad .or-rank { background:var(--mr-bad-bg); color:var(--mr-bad-fg); }
body.context-course_1:not(.is-teacher) .mastery-quiz-results .or-item.bad .or-mark { color:var(--mr-bad-fg); }
/* reveal (final passed, or any completed mid attempt): server-set .correct_answer → green */
body.context-course_1:not(.is-teacher) .mastery-quiz-results.show_correct_answers .answer.correct_answer { background:var(--mr-ok-tint) !important; border-color:var(--mr-ok-bd) !important; }
/* hide native arrows/indicators (we use question-level pill) + teacher chrome */
body.context-course_1:not(.is-teacher) .mastery-quiz-results .answer_arrow,
body.context-course_1:not(.is-teacher) .mastery-quiz-results .answer_indicator,
body.context-course_1:not(.is-teacher) .mastery-quiz-results .links,
body.context-course_1:not(.is-teacher) .mastery-quiz-results .flag_question,
body.context-course_1:not(.is-teacher) .mastery-quiz-results .move { display:none !important; }
/* Q-text is a plain paragraph — no box/border (belt-and-suspenders over base theme) */
body.context-course_1:not(.is-teacher) .mastery-quiz-results .display_question .text,
body.context-course_1:not(.is-teacher) .mastery-quiz-results .display_question .question_text,
body.context-course_1:not(.is-teacher) .mastery-quiz-results .display_question .user_content { border:0 !important; box-shadow:none !important; background:transparent !important; }
/* native quiz header is now hidden server-side (show.html.erb / history.html.erb guard) */

@media (max-width:720px) {
  body.context-course_1:not(.is-teacher) .mastery-results-page { max-width:none; padding-left:4px; padding-right:4px; }
  body.context-course_1:not(.is-teacher) .mastery-info-grid { grid-template-columns:1fr; }
  body.context-course_1:not(.is-teacher) .mastery-score-card .msc-value { font-size:48px; }
}

/* ============================================================ */
/* PART 7: ПОЛАЗНИЦИ — team leader section roster                */
/* Markup: app/views/section_people/show.html.erb. Interactions: */
/* sectionPeopleInteractions(). Container-scoped (.pp-people),    */
/* tokens redeclared here like .mg-ocene. Top bar = buildVodja.   */
/* ============================================================ */
.pp-people {
  --ink:#1f2330; --muted:#5b6075; --faint:#8b90a4; --border:#e9e7f5; --divider:#f0eef8;
  --purple:#7c6cf0; --purple-text:#6c5ce7; --purple-soft:#efecfb; --purple-bd-soft:#d8d2f3;
  --pp-field:#d8d3ea; --pp-pend-bg:#eef0f5; --pp-pend-fg:#5b6075; --pp-pend-bd:#dfe2eb;
  max-width:1320px; margin:0 auto; padding:8px 0 48px; color:var(--ink);
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.pp-people * { box-sizing:border-box; }
.pp-people .pp-data-label { display:none; }
.pp-people .pp-title { font-size:27px; font-weight:800; letter-spacing:-0.02em; margin:0 0 22px; }

/* card shell */
.pp-people .pp-card { background:#fff; border:1px solid var(--border); border-radius:16px;
  box-shadow:0 2px 12px rgba(124,108,240,.05); overflow:hidden; }

/* "Додај полазнике" — its own row above the search/filter toolbar (5 filter controls left it no
   room to sit comfortably inline at the row's end via margin-left:auto). Same horizontal padding
   as .pp-sections-summary/.pp-toolbar for alignment; .pp-toolbar keeps its own top padding below. */
.pp-people .pp-actions-row { display:flex; justify-content:flex-end; padding:18px 22px 0; }

/* toolbar */
.pp-people .pp-toolbar { display:flex; align-items:center; gap:12px; padding:18px 22px 14px; flex-wrap:wrap; }
.pp-people .pp-search { position:relative; flex:0 1 280px; }
.pp-people .pp-search svg { position:absolute; left:12px; top:50%; transform:translateY(calc(-50% - 5px)); color:var(--faint); }
.pp-people .pp-search input { width:100%; padding:9px 12px 9px 36px; border:1px solid var(--pp-field);
  border-radius:10px; font:inherit; font-size:14px; color:var(--ink); background:#fff; }
.pp-people .pp-search input:focus { outline:none; border-color:var(--purple); box-shadow:0 0 0 3px rgba(124,108,240,.15); }
/* Canvas base text-input styling overrides the input's radius AND height (but not the select) — force
   the search to be IDENTICAL to the dropdown: same radius (10px) and same height (40px, border-box). */
body.context-course_1 .pp-people .pp-search input {
  border-radius:10px !important; box-sizing:border-box !important; height:40px !important;
  padding:9px 12px 9px 36px !important; font-size:14px !important; line-height:normal !important;
}
body.context-course_1 .pp-people .pp-select-wrap select { height:40px !important; box-sizing:border-box !important; line-height:normal !important; }
body.context-course_1 .pp-people .pp-toolbar .pp-btn { height:40px !important; box-sizing:border-box !important; }
/* all three toolbar elements: same height (40px) + center => bottoms on the same line; vertical margins 0 */
body.context-course_1 .pp-people .pp-toolbar { align-items:center; }
body.context-course_1 .pp-people .pp-toolbar > * { margin-top:0 !important; margin-bottom:0 !important; }
/* the input/select wrappers had an inline "descender" gap (which made them sit slightly above the button);
   flex turns them into exactly 40px height so all three align perfectly. */
body.context-course_1 .pp-people .pp-search,
body.context-course_1 .pp-people .pp-select-wrap { display:flex; align-items:center; }
/* The button's drop shadow (0 4px 12px) bleeds ~16px below the edge, so the button looked lower
   than the field/dropdown (which have no shadow). Remove it in the toolbar so the bottom edge matches. */
body.context-course_1 .pp-people .pp-toolbar .pp-btn-primary { box-shadow:none; }
.pp-people .pp-select-wrap { position:relative; }
.pp-people .pp-select-wrap select { appearance:none; -webkit-appearance:none;
  padding:9px 38px 9px 14px; border:1px solid var(--pp-field); border-radius:10px;
  font:inherit; font-size:14px; color:var(--ink); background:#fff; cursor:pointer; }
.pp-people .pp-select-wrap select:focus { outline:none; border-color:var(--purple); box-shadow:0 0 0 3px rgba(124,108,240,.15); }
.pp-people .pp-select-wrap::after { content:""; position:absolute; right:14px; top:50%; width:8px; height:8px;
  border-right:2px solid var(--faint); border-bottom:2px solid var(--faint); transform:translateY(calc(-50% - 5px)) rotate(45deg); pointer-events:none; }

.pp-people .pp-btn, .pp-confirm-box .pp-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; box-sizing:border-box;
  padding:10px 18px; border-radius:9px; font:inherit; font-size:14px; font-weight:600; line-height:1;
  cursor:pointer; text-decoration:none; border:1px solid transparent; white-space:nowrap;
  transition:background .15s, border-color .15s, color .15s, transform .05s; }
.pp-people .pp-btn:active, .pp-confirm-box .pp-btn:active { transform:translateY(1px); }
.pp-people .pp-btn-primary, .pp-confirm-box .pp-btn-primary { background:var(--purple); color:#fff; box-shadow:0 4px 12px rgba(124,108,240,.22); }
.pp-people .pp-btn-primary:hover, .pp-confirm-box .pp-btn-primary:hover { background:#6b5ec4; color:#fff; text-decoration:none; }

/* invite banner */
.pp-people .pp-invite { display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:0 22px 14px; flex-wrap:wrap; }
.pp-people .pp-invite-note { font-size:13px; color:var(--muted); }
.pp-people .pp-invite-note b { color:var(--ink); font-weight:700; }
.pp-people .pp-invite-note a { color:var(--purple-text); font-weight:700; text-decoration:none; margin-left:6px; }
.pp-people .pp-invite-note a:hover { text-decoration:underline; }
.pp-people .pp-invite-note a[data-busy="1"] { pointer-events:none; opacity:.75; }
/* "Пошаљи поново" busy state — same spinner mechanic as .tb-csv-spinner (Оцене CSV export), colored
   for the purple link text instead of white-on-button. */
.pp-people .pp-invite-note .pp-resend-spinner { display:inline-block; width:12px; height:12px; box-sizing:border-box;
  border-radius:50%; border:2px solid var(--purple-bd-soft); border-top-color:var(--purple-text);
  animation:tb-csv-spin .6s linear infinite; vertical-align:-2px; margin-right:2px; }

/* table */
.pp-people .pp-scroll { overflow-x:auto; }
.pp-people table.pp-table { width:100%; border-collapse:separate; border-spacing:0; font-size:14px; }
/* padding 17px (was 12px) = design_handoff_raspored_kolona §1б — a taller header row (~49px vs ~39px)
   separates the filters from the data instead of sitting glued to the first row. VERTICAL padding only:
   font (10.5px/700/uppercase/.05em) and the #fbfbfe background are unchanged. */
.pp-people .pp-table thead th { text-align:left; padding:17px 12px; font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--faint);
  background:#fbfbfe; border-top:1px solid var(--border); border-bottom:1px solid var(--border); white-space:nowrap; }
.pp-people .pp-table thead th.r { text-align:right; }
/* Centred columns (Секција / Улога / both activity columns) — marked with class="c" in the view rather
   than nth-child: the „Секција" column only exists for a multi-section leader, so positional selectors
   would centre the wrong columns in the single-section layout. Digits already line up via
   .pp-activity's font-variant-numeric:tabular-nums. */
.pp-people .pp-table th.c, .pp-people .pp-table td.c { text-align:center; }
/* Time columns (design_handoff_raspored_kolona §1в) — the two-line heading („ПОСЛЕД. / АКТИВНОСТ") is
   what keeps them narrow. The shared `.pp-table thead th { white-space:nowrap }` above leaks onto them
   and forces one line, at which point the column grows to the heading's min-content (~145px), `width`
   stops mattering and the freed space never reaches Е-пошта — the documented failure mode. Hence the
   explicit override here; the class comes from the view so it survives the missing „Секција" column. */
.pp-people .pp-table thead th.t { white-space:normal; line-height:1.35; }
/* Sortable columns (Име / Улога / Послед. активност — SectionPeopleController::ROSTER_SORT_KEYS).
   The header text is a <button> so it is keyboard-reachable; `all:unset` strips default button chrome
   while keeping the inherited th font/color/uppercase (unset re-inherits, it doesn't reset to none).
   `.pp-sort-ico` is a plain CSS triangle (border trick), faint until the column is the active sort, so
   it never needs a new SVG asset for a per-column toggle. */
.pp-people .pp-table thead th.pp-sortable { cursor:pointer; }
.pp-people .pp-table thead th.pp-sortable .pp-sort-btn {
  all:unset; display:inline-flex; align-items:center; gap:4px; cursor:pointer; }
.pp-people .pp-table thead th.pp-sortable:hover .pp-sort-btn { color:var(--purple-text); }
.pp-people .pp-table thead th.pp-sortable .pp-sort-ico {
  width:0; height:0; flex:0 0 auto; border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor; opacity:.3; }
.pp-people .pp-table thead th.pp-sort-active .pp-sort-ico { opacity:1; }
.pp-people .pp-table thead th.pp-sort-active[aria-sort="ascending"] .pp-sort-ico { transform:rotate(180deg); }
/* Tight side padding on the narrow columns (Улога + both time columns). At 18px per side the padding
   alone eats 36px, which is more than the text box left for „АКТИВНОСТ"/„Полазник" — the column then
   settles at min-content and ignores `width` entirely, the same failure as the nowrap heading above.
   8px per side leaves room for the word, so the widths actually bind and the slack reaches Е-пошта. */
/* No per-column padding exception any more: every column carries the same 12px sides, so the gap
   between any two neighbours is a uniform 24px (the .t class now only marks the wrapping headings). */
/* Badge group sits harder against Е-пошта: the „Име" cell keeps its 18px on the left (avatar) but gives
   the right side back to the badges, which are right-anchored (margin-left:auto). */
.pp-people .pp-table .pp-row > td.pp-who-td { padding-right:6px; }
.pp-people .pp-table td.c .pp-sec-multi { justify-content:center; }

/* Resizable columns: a handle on the right edge of each header (JS sectionPeopleColumnResize). */
.pp-people .pp-col-resize { position:absolute; top:0; right:-5px; width:11px; height:100%; cursor:col-resize; z-index:3; touch-action:none; user-select:none; }
.pp-people .pp-col-resize::after { content:""; position:absolute; top:22%; bottom:22%; left:5px; width:2px; border-radius:2px; background:transparent; transition:background .15s; }
.pp-people .pp-col-resize:hover::after { background:var(--purple-bd-soft); }
body.pp-col-resizing { cursor:col-resize !important; }
body.pp-col-resizing, body.pp-col-resizing * { user-select:none !important; }
body.pp-col-resizing .pp-people .pp-col-resize::after { background:var(--purple); }
.pp-people .pp-row > td { padding:11px 12px; border-bottom:1px solid var(--divider); vertical-align:middle; }
.pp-people .pp-row:hover > td { background:#faf9fe; }

.pp-people .pp-who { display:flex; align-items:center; gap:12px; width:100%; min-width:0; }
.pp-people .pp-av { flex:0 0 auto; width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  font-size:12px; font-weight:700; color:#fff; }
.pp-people .pp-av.empty { background:#e7e6f0; color:#b0b2c4; }
/* The name takes the remaining space and truncates with … when long → never pushes the icons over the text. */
.pp-people .pp-nm-wrap { flex:0 1 auto; min-width:0; }  /* shrinkable: the name is one ellipsised line again (see .pp-nm) */
/* Role tags (Тренер зелена капа / Шеф бирачког места роза штит) as round icon badges next to the name,
   with ＋ add (dashed circle), hover-× remove, and the row action menu (＋ tags-only / ⋯ full).
   Tags reuse the .pp-badge primitive; badges stack 2-per-row, right-aligned. Design: design_handoff_tagovi_i_meni. */
/* design_handoff_raspored_kolona §5 — the group is pinned to the RIGHT edge of the „Име" column
   (margin-left:auto on the shared rule), so badges grow leftwards from a stable right origin and the
   ＋ stays last, hard against Е-пошта. That stable right edge is what now prevents the skeleton→badge
   horizontal jump, so the old left-anchored fixed lane (min-width:81px) is gone with it. */
.pp-people .pp-who-td .pp-badges { display:flex; flex-direction:row; align-items:center; justify-content:flex-end; gap:6px; }
/* Loading skeleton: the badge column is built by JS (ppDecorateRow) after the theme script runs.
   _rows.html.erb pre-renders EXACTLY the eventual badge count as .pp-skel-dot placeholders (same 19px
   circle + 6px gap as real badges), so ppDecorateRow's innerHTML swap changes nothing geometrically
   → no width shift / jump. Same shimmer as the full-page #tb-people-skel (purple tb-skel sweep). */
.pp-people .pp-who-td .pp-skel-dot {
  flex:0 0 auto; position:relative; left:-3px; /* nudge dots left to line up with the loaded badges
    (real badges carry a 1px border → their visual centre sits a few px right of a solid dot). Purely
    visual (position:relative) → does NOT move the real icons or change the flex layout. */
  width:19px; height:19px; border-radius:999px;
  background: linear-gradient(90deg, rgba(124,108,240,0.10) 0%, rgba(124,108,240,0.25) 50%, rgba(124,108,240,0.10) 100%);
  background-size:200% 100%; animation: tb-skel 1.2s ease-in-out infinite; }
.pp-people .pp-who-td .pp-badge { width:19px; height:19px; }  /* smaller badges (design delta; SVG stays 12px). .pp-who-td → beats the shared 22px `.pp-people .pp-badge, .mg-ocene .pp-badge` (equal-specificity, defined later) */
.pp-people .pp-badge.pp-trainer { background:#e2f5ec; color:#1f9d63; border:1px solid #bfe6d1; }
.pp-people .pp-badge.pp-chief, .mg-ocene .pp-badge.pp-chief { background:#fdeaef; color:#c23b63; border:1px solid #f4c6d5; }
/* "Члан бирачког одбора" (design_handoff_uzivo_obuke §1) — same purple token as .pp-cbo (the
   "Уживо обука" column badge, :5584), deliberately paired with .pp-chief's pink as ЧБО/ШБМ. */
.pp-people .pp-badge.pp-member, .mg-ocene .pp-badge.pp-member { background:var(--purple-soft); color:var(--purple-text); border:1px solid var(--purple-bd-soft); }
.pp-people .pp-badge.pp-mobile { background:#e6eff9; color:#2c68ab; border:1px solid #c7dcf0; } /* design_handoff_nove_oznake */
.pp-people .pp-badge.pp-legal { background:#ecedfa; color:#4b4fa8; border:1px solid #d2d4f0; } /* design_handoff_nove_oznake */
/* ЛО/ДО (design_handoff_lo_do §1) — the only pair with a DARK badge: a 50%-opaque saturated fill with
   yellow initials. The translucency is deliberate: the badges sit on the white row and on the
   --tb-purple-soft row-hover, and should blend with whichever is behind instead of dominating the row. */
.pp-people .pp-badge.pp-lo { background:rgba(215,38,31,.5); color:#ffe66b; border:1px solid rgba(184,28,22,.4); }
.pp-people .pp-badge.pp-do { background:rgba(20,48,107,.5); color:#ffe66b; border:1px solid rgba(14,36,80,.4); }
/* Muted olive-beige (design_handoff_ikonica_bez_intervjua) — deliberately quiet: states a fact about
   the polaznik, not a status/problem, so no saturation and no red like .pp-pending's grey neighbour. */
.pp-people .pp-badge.pp-nointv { background:#F7F5E9; color:#8C845B; border:1px solid #E8E3C9; }
/* Initials instead of an SVG — sized to sit optically centred in the same 19×19 circle. */
.pp-people .pp-badge .ini { font-size:8.5px; font-weight:800; letter-spacing:.02em; line-height:1; }
.pp-people .pp-badge.pp-add-tag { border:1px dashed #cdd0da; background:#fcfcfd; color:#9498a6; cursor:pointer; padding:0; }
.pp-people .pp-badge.pp-add-tag:hover { background:#f4f5f7; border-color:#b4b8c4; color:#6f7382; }
.pp-people .pp-badge.removable { cursor:pointer; }
.pp-people .pp-badge.removable .pp-rmx { position:absolute; inset:0; display:grid; place-items:center; border-radius:999px; opacity:0; transition:opacity .12s; }
.pp-people .pp-badge.removable:hover svg:first-child, .pp-people .pp-badge.removable:focus svg:first-child { opacity:0; }
.pp-people .pp-badge.removable:hover .pp-rmx, .pp-people .pp-badge.removable:focus .pp-rmx { opacity:1; }
.pp-people .pp-badge.pp-trainer.removable:hover, .pp-people .pp-badge.pp-trainer.removable:focus { background:#cceadb; }
.pp-people .pp-badge.pp-chief.removable:hover, .pp-people .pp-badge.pp-chief.removable:focus { background:#f7d4de; }
.pp-people .pp-badge.pp-member.removable:hover, .pp-people .pp-badge.pp-member.removable:focus { background:#ded8f7; }
.pp-people .pp-badge.pp-mobile.removable:hover, .pp-people .pp-badge.pp-mobile.removable:focus { background:#d3e4f5; }
.pp-people .pp-badge.pp-legal.removable:hover, .pp-people .pp-badge.pp-legal.removable:focus { background:#dcdef5; }
.pp-people .pp-badge.pp-lo.removable:hover, .pp-people .pp-badge.pp-lo.removable:focus { background:rgba(215,38,31,.68); }
.pp-people .pp-badge.pp-do.removable:hover, .pp-people .pp-badge.pp-do.removable:focus { background:rgba(20,48,107,.68); }
.pp-people .pp-badge.pp-nointv.removable:hover, .pp-people .pp-badge.pp-nointv.removable:focus { background:#EFEBD9; }
.pp-people .pp-badge.removable:focus { outline:none; box-shadow:0 0 0 2px rgba(124,108,240,.35); }
/* row action menu (position:fixed; ＋ tags-only / ⋯ full) */
.pp-menu { position:fixed; z-index:100001; min-width:232px; background:#fff; border:1px solid #e9e7f5;
  border-radius:12px; box-shadow:0 12px 34px rgba(31,35,48,.16); padding:6px; }
.pp-menu-head { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#8b90a4; padding:8px 10px 4px; }
.pp-menu-item { display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box; text-align:left; border:none;
  background:none; cursor:pointer; padding:9px 10px; border-radius:8px; font-size:13.5px; font-weight:600; color:#2d2438; }
.pp-menu-item:hover { background:#efecfb; }
.pp-menu-ico { flex:0 0 auto; width:22px; height:22px; border-radius:999px; display:grid; place-items:center; }
.pp-menu-ico.trainer { background:#e2f5ec; color:#1f9d63; border:1px solid #bfe6d1; }
.pp-menu-ico.chief { background:#fdeaef; color:#c23b63; border:1px solid #f4c6d5; }
.pp-menu-ico.member { background:#efecfb; color:#6c5ce7; border:1px solid #d8d2f3; } /* design_handoff_uzivo_obuke — literal, not var(): .pp-menu is appended to <body>, outside .pp-people (same trap as .pp-menu-item.soon above) */
.pp-menu-ico.mobile { background:#e6eff9; color:#2c68ab; border:1px solid #c7dcf0; } /* design_handoff_nove_oznake */
.pp-menu-ico.legal { background:#ecedfa; color:#4b4fa8; border:1px solid #d2d4f0; } /* design_handoff_nove_oznake */
.pp-menu-ico.lo { background:rgba(215,38,31,.5); color:#ffe66b; border:1px solid rgba(184,28,22,.4); } /* design_handoff_lo_do */
.pp-menu-ico.do { background:rgba(20,48,107,.5); color:#ffe66b; border:1px solid rgba(14,36,80,.4); } /* design_handoff_lo_do */
.pp-menu-ico.nointv { background:#F7F5E9; color:#8C845B; border:1px solid #E8E3C9; } /* design_handoff_ikonica_bez_intervjua */
.pp-menu-ico .ini { font-size:9.5px; font-weight:800; line-height:1; }
.pp-menu-txt { flex:1; min-width:0; }
.pp-menu-check { flex:0 0 auto; color:var(--purple-text); opacity:0; }
.pp-menu-item.on .pp-menu-check { opacity:1; }
.pp-menu-item.on .pp-menu-txt { color:var(--purple-text); }
/* Announced-but-not-yet-available tag (design_handoff_lo_do §2). The coloured icon stays as-is on
   purpose — the point of the announcement is to show what the badge will look like; only the text and
   the item as a whole are dimmed. Reusable for any future „Ускоро" rollout. */
.pp-menu-item.soon { cursor:default; opacity:.62; }
.pp-menu-item.soon:hover { background:transparent; }
/* literal, not var() — .pp-menu is appended to <body>, outside .pp-people, so the roster tokens do
   not resolve here (same trap the .pp-confirm-overlay comment documents). Matches .pp-menu-head. */
.pp-menu-item.soon .pp-menu-txt { color:#8b90a4; }
.pp-menu-soon { margin-left:auto; flex:0 0 auto; font-size:9.5px; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; color:#8a6d1f; background:#fdf6e0; border:1px solid #f0e2b4; border-radius:999px; padding:2px 7px; }
.pp-menu-item.plain .pp-menu-ico { display:none; }
.pp-menu-sep { height:1px; background:#f0eff7; margin:6px 8px; }
.pp-menu-item.danger { color:#c2481a; }
.pp-menu-item.danger:hover { background:#f9ece4; }
/* ── Полазници table finesse (dizajn/README delta): column alignments, compact padding, email wrap, pending spacer, confirm modal ── */
.pp-people .pp-table thead th:nth-child(2), .pp-people .pp-row > td:nth-child(2) { text-align:right; }   /* Е-пошта */
.pp-people .pp-table thead th:nth-child(3), .pp-people .pp-row > td:nth-child(3),
.pp-people .pp-table thead th:nth-child(4), .pp-people .pp-row > td:nth-child(4),
.pp-people .pp-table thead th:nth-child(5), .pp-people .pp-row > td:nth-child(5),
.pp-people .pp-table thead th:nth-child(6), .pp-people .pp-row > td:nth-child(6) { text-align:center; } /* Секција/Улога/активности */
.pp-people .pp-row > td { padding:8px 12px; }
.pp-people .pp-row > td:nth-child(1) { padding-right:4px; }  /* Име: ознаке ближе колони Е-пошта */
.pp-people .pp-row > td:nth-child(2) { padding-left:4px; }
.pp-people .pp-table thead th:last-child, .pp-people .pp-row > td:last-child { padding-right:18px; text-align:right; } /* Радње: right in BOTH 6- and 7-col layouts (overrides nth-child(6) center in the no-Секција branch) */
.pp-people .pp-sec-multi { justify-content:center; }
.pp-people .pp-kebab-spacer { width:26px; height:26px; flex:0 0 auto; }  /* aligns ⋯ under the chevrons on pending rows */
/* remove-tag confirmation modal (× → confirm, not immediate) */
.pp-confirm-overlay { position:fixed; inset:0; z-index:10002; display:none; align-items:center; justify-content:center;
  background:rgba(31,35,48,.45); backdrop-filter:blur(2px); padding:16px;
  /* overlay is appended to <body>, OUTSIDE .pp-people → re-declare the tokens the modal (box border,
     h3/p text) and its .pp-btn buttons resolve via var(); otherwise they fall back to invalid/inherited. */
  --ink:#1f2330; --muted:#5b6075; --border:#e9e7f5; --purple:#7c6cf0; --purple-text:#6c5ce7; --purple-bd-soft:#d8d2f3; }
.pp-confirm-overlay.show { display:flex; }
.pp-confirm-box { width:100%; max-width:400px; background:#fff; border:1px solid var(--border); border-radius:16px;
  box-shadow:0 24px 60px rgba(31,35,48,.32); padding:22px; }
.pp-confirm-box h3 { margin:0 0 8px; font-size:16px; font-weight:700; color:var(--ink); }
.pp-confirm-box p { margin:0 0 20px; font-size:13.5px; line-height:1.45; color:var(--muted); }
.pp-confirm-box p b { color:var(--ink); }
.pp-confirm-foot { display:flex; justify-content:flex-end; gap:10px; }
/* design_handoff_raspored_kolona §3 — back to ONE line with an ellipsis (this reverses the earlier
   2-line wrap): with „Име" now width:auto the cell no longer has a fixed 25ch lane to wrap inside, and
   a wrapped name would push the badge group and Е-пошта around. 220px was measured against the longest
   real name, so in practice nothing is actually cut; the span carries title="{име}" for the rare case. */
.pp-people .pp-nm { font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.3;
  flex:0 1 auto; max-width:220px; min-width:0;
  display:inline-block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Status icons next to the name (progress / pending / old platform) — round 22×22, grouped
   on the right in the „Име" cell (margin-left:auto, next to the following column). Tooltip = CSS via data-tip, WITHOUT
   a native title → appears IMMEDIATELY (no ~0.5–1s pause). Handoff: design_handoff_ikonice_status. */
.pp-people .pp-badges, .mg-ocene .pp-badges { display:inline-flex; align-items:center; gap:6px; margin-left:auto; padding-left:12px; flex:0 0 auto; }
.pp-people .pp-badge, .mg-ocene .pp-badge { position:relative; flex:0 0 auto; width:22px; height:22px; border-radius:999px; display:grid; place-items:center; cursor:default; }
.pp-people .pp-badge svg, .mg-ocene .pp-badge svg { display:block; }
/* pp- prefix INTENTIONAL: the generic `.progress` collides with Canvas/Bootstrap `.progress`
   (progress-bar carries margin-bottom → align-items:center centers the margin-box so the "eye" flies up).
   Hence pp-scoped modifiers — no collision. */
.pp-people .pp-badge.pp-progress { background:var(--purple-soft); color:var(--purple-text); border:1px solid var(--purple-bd-soft); }
.pp-people .pp-badge.pp-pending { background:#eef0f5; color:#8a8fa3; border:1px solid #dfe2eb; }
.pp-people .pp-badge.pp-legacy, .mg-ocene .pp-badge.pp-legacy { background:#fdf3e3; color:#b07d24; border:1px solid #f0dcae; }
/* hover description = portal bubble (#pp-tip). Rendered as a position:fixed layer on <body> (see
   ppBadgeTooltips in canvas-custom.js), OUTSIDE the .pp-card/.pp-scroll overflow — so they don't clip it.
   Appears IMMEDIATELY on hover (no native title, no delay). Same pattern as .pp-toast. */
.pp-tip { position:fixed; top:0; left:0; z-index:100000; max-width:min(80vw,320px);
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:#1f2330; color:#fff; font-size:11.5px; font-weight:600; line-height:1.3; white-space:nowrap;
  padding:6px 10px; border-radius:8px; box-shadow:0 6px 18px rgba(31,35,48,.22);
  opacity:0; pointer-events:none; transform:translateY(4px); transition:opacity .14s, transform .14s; }
.pp-tip.show { opacity:1; transform:translateY(0); }
/* arrow: by default the bubble is above the icon (arrow at the bottom); .below → below (arrow at the top). */
.pp-tip::after { content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:#1f2330; }
.pp-tip.below::after { top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:#1f2330; }
/* Email: a single line with … when the column shrinks (full email on hover via title). */
/* design_handoff_raspored_kolona §2 — one line + ellipsis. Was `white-space:normal; overflow-wrap:anywhere`,
   which broke the address mid-token („novicvrle@gmail" / „.com") and grew the row to two lines. */
.pp-people .pp-login { color:var(--muted); font-size:12px; display:inline-block; white-space:nowrap;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.pp-people .pp-login.none { color:var(--faint); }
/* Е-пошта cell = address + custom-participant-field icon badges (CUSTOM-PARTICIPANT-FIELDS-PLAN.md
   §11 Faza 8; markup _rows.html.erb .pp-email/.pp-cf, server-rendered — no JS builds these). Flex so
   the address keeps its one-line ellipsis (flex item, min-width:0) while the badges stay on the same
   line, hard after the text — never wrapped onto a second line, never pinned to the cell's far edge. */
.pp-people .pp-email { display:flex; align-items:center; gap:8px; min-width:0; }
.pp-people .pp-email .pp-login { flex:0 1 auto; min-width:0; }
.pp-people .pp-cf { display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; }
/* One badge per icon-bearing field — the shared 22px .pp-badge primitive (:5515). The CustomIconCatalog
   SVG ships at 18px (admin-page preview size) → narrowed to the 12px glyph every other roster badge
   uses; the catalog's native icon-font entries (icon-Line icon-*) get the same 12px. `.has` = the
   participant has a value (same palette as .pp-trainer), `.none` = no value (same palette as
   .pp-pending). The value itself is the [data-tip] tooltip (ppBadgeTooltips portal). */
.pp-people .pp-cf .pp-badge svg { width:12px; height:12px; }
.pp-people .pp-cf .pp-badge i[class*="icon-"] { font-size:12px; line-height:1; }
.pp-people .pp-cf .pp-badge i[class*="icon-"]::before { font-size:12px; margin:0; }
.pp-people .pp-badge.pp-cf-badge.has { background:#e2f5ec; color:#1f9d63; border:1px solid #bfe6d1; }
.pp-people .pp-badge.pp-cf-badge.none { background:#eef0f5; color:#8a8fa3; border:1px solid #dfe2eb; }
.pp-people .pp-section { color:var(--ink); }
.pp-people .pp-role { color:var(--muted); font-size:13px; display:block; text-align:center; }
.pp-people .pp-activity { color:var(--muted); font-size:13px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.pp-people .pp-activity.total { color:var(--ink); font-weight:600; }
.pp-people .pp-activity.none { color:var(--faint); }
/* „Уживо обука" column (design_handoff_uzivo_obuke §2): icon(s) only, 19px circle, gap 5px between
   ЧБО/ШБМ when both present. .pp-lt .pp-badge narrows the shared 22px .pp-badge (:5463) to 19px,
   same override shape as the existing .pp-who-td .pp-badge rule (:5363) for the same primitive.
   .pp-chief reused VERBATIM for ШБМ (same colors as the existing "Шеф бирачког места" tag badge,
   :5365) — the handoff states this is the SAME icon/meaning, not a new color. .pp-cbo (this column)
   and .pp-badge.pp-member (the roster tag, :5365 area) share the same purple vars — the exact
   colors the handoff specifies for ЧБО/"Члан бирачког одбора" — reused from .pp-badge.pp-progress
   just above (:5468). */
.pp-people .pp-lt, .mg-ocene .pp-lt { display:inline-flex; align-items:center; justify-content:center; gap:5px; }
.pp-people .pp-lt .pp-badge, .mg-ocene .pp-lt .pp-badge { width:19px; height:19px; }
.pp-people .pp-badge.pp-cbo, .mg-ocene .pp-badge.pp-cbo { background:var(--purple-soft); color:var(--purple-text); border:1px solid var(--purple-bd-soft); }
.pp-people .pp-lt.none, .mg-ocene .pp-lt.none { color:var(--faint); }
.pp-people .pp-kebab-td { text-align:right; }
.pp-people .pp-kebab { width:32px; height:32px; border-radius:8px; border:1px solid transparent; background:transparent;
  color:var(--faint); cursor:pointer; display:inline-grid; place-items:center; transition:all .14s; }
.pp-people .pp-kebab:hover { background:#fff; border-color:var(--border); color:var(--purple-text); }

.pp-people .pp-footer { padding:14px 22px; font-size:13px; color:var(--faint); }

/* toast (kebab stub; appended to body, fixed) */
.pp-toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px);
  background:#1f2330; color:#fff; font-size:13.5px; font-weight:600; padding:12px 20px;
  border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.22); opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; z-index:10002; display:flex; align-items:flex-start; gap:9px;
  /* max-width + wrap: a deleted-participant business message (ppDeletedMessage) can name several
     emails and would otherwise stretch off-screen — every other toast is short enough to never
     approach this width. */
  max-width:480px; white-space:normal; text-align:left; }
.pp-toast.show { opacity:1; transform:translate(-50%,0); }

/* ghost button (Откажи in the modal) */
.pp-people .pp-btn-ghost, .pp-confirm-box .pp-btn-ghost { background:#fff; color:var(--ink); border-color:var(--border); }
.pp-people .pp-btn-ghost:hover, .pp-confirm-box .pp-btn-ghost:hover { border-color:var(--purple-bd-soft); color:var(--purple-text); }

/* Add People modal (DOM child of .pp-people, but literals for consistency) */
.pp-modal-overlay { position:fixed; inset:0; background:rgba(31,35,48,.45); display:none;
  align-items:flex-start; justify-content:center; padding:80px 18px; z-index:10001; }
.pp-modal-overlay.show { display:flex; }
.pp-modal { width:100%; max-width:520px; background:#fff; border:1px solid #e9e7f5; border-radius:14px;
  box-shadow:0 24px 60px rgba(31,35,48,.28); overflow:hidden; color:#1f2330;
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; }
.pp-modal * { box-sizing:border-box; }
.pp-m-head { display:flex; align-items:center; gap:28px; padding:18px 26px 18px 22px; border-bottom:1px solid #e9e7f5; }
.pp-m-head h2 { flex:1 1 auto; min-width:0; margin:0; font-size:18px; font-weight:700; line-height:1.3; }
.pp-x { width:30px; height:30px; border-radius:8px; border:0; background:transparent; color:#5b6075; cursor:pointer; font-size:20px; line-height:1; }
.pp-x:hover { background:#f0eef8; }
.pp-m-body { padding:22px; }
.pp-m-body .pp-lbl { display:block; font-size:14px; font-weight:600; margin:0 0 6px; }
/* !important: Canvas bootstrap input[type=email]/[type=text] (0,1,1) inače nadjača .pp-inp (0,1,0) — radius/border/padding. */
.pp-inp { width:100%; padding:10px 12px !important; border:1px solid #d8d3ea !important; border-radius:10px !important; font:inherit; font-size:14px !important; color:#1f2330; background:#fff !important; transition:border-color .15s, box-shadow .15s; height:auto !important; }
.pp-inp::placeholder { color:#a7abbd; }
.pp-inp:focus { outline:none !important; border-color:#7c6cf0 !important; box-shadow:0 0 0 3px rgba(124,108,240,.15) !important; }
.pp-field-name { margin-top:16px; }
.pp-cert-note { display:flex; gap:9px; align-items:flex-start; margin-top:16px; padding:11px 13px; border-radius:10px;
  background:#fff4e1; border:1px solid #f3d9a8; color:#8a6d1f; font-size:13px; line-height:1.45; }
.pp-cert-note svg { flex:0 0 auto; margin-top:1px; color:#b7791f; }
.pp-cert-note b { color:#7a5d0f; font-weight:700; }
.pp-section-note { font-weight:600; margin:16px 0 0; font-size:13.5px; color:#1f2330; }
.pp-section-note b { color:#6c5ce7; }
.pp-m-foot { display:flex; justify-content:flex-end; gap:10px; padding:16px 22px; border-top:1px solid #e9e7f5; background:#faf9fe; }

/* --- Bulk "Додај полазнике" modal (design_handoff_dodaj_polaznike): tabs + rows + CSV --- */
.pp-modal-wide { max-width:720px; height:min(560px, calc(100vh - 112px)); max-height:calc(100vh - 112px); display:flex; flex-direction:column; border-radius:16px; overflow:hidden; }
/* Fixed modal height (min(560px, viewport) — the SAME across both tabs, so it doesn't jump between row entry and CSV):
   head, tabs and footer are flex:0 0 auto; the body takes the rest and scrolls (flex:1 1 auto + min-height:0), so the
   Откажи/Додај buttons in the footer stay visible on any viewport. */
.pp-modal-wide .pp-m-body { flex:1 1 auto; min-height:0; overflow-y:auto; padding:18px 22px 6px; }
.pp-modal-wide > .pp-m-head, .pp-modal-wide > .pp-seg, .pp-modal-wide > .pp-m-foot { flex:0 0 auto; }
.pp-foot-count { font-size:13px; color:#5b6075; font-weight:600; margin-right:auto; }
/* Tabs as the main nav (underlined, no pills). Vars from .pp-people (the modal is inside it). */
/* Add People: section choice INSIDE the title ("…у секцију [dropdown]"): purple-soft select; a single section = plain purple text. Vars from .pp-people. */
/* Secondary control: white field, app radius 10, gray arrow — mirrors the roster #pp-section picker so it reads as a
   control, not a purple pill. Right-aligned after the flex-growing (primary) title; flex-shrink lets it give way so
   the title keeps priority (never wraps unless there is truly no room). */
.pp-people .pp-title-sec { position:relative; flex:0 1 260px; min-width:0; }
.pp-people .pp-title-sec select { appearance:none; -webkit-appearance:none; width:100%; height:38px; box-sizing:border-box; margin:0; padding:0 40px 0 14px;
  border:1px solid var(--pp-field); border-radius:10px; font:inherit; font-size:14.5px; font-weight:600; color:var(--purple-text); background:#fff; cursor:pointer; }
.pp-people .pp-title-sec select:focus { outline:none; border-color:var(--purple); box-shadow:0 0 0 3px rgba(124,108,240,.15); }
.pp-people .pp-title-sec::after { content:""; position:absolute; right:14px; top:50%; width:8px; height:8px;
  border-right:2px solid var(--faint); border-bottom:2px solid var(--faint); transform:translateY(calc(-50% - 3px)) rotate(45deg); pointer-events:none; }
.pp-people .pp-title-sec-fixed { flex:0 0 auto; color:var(--purple-text); font-size:16px; font-weight:700; }
/* Canvas bootstrap forces select height/line-height — override with !important like .pp-select-wrap does. */
body.context-course_1 .pp-people .pp-title-sec select { height:38px !important; margin:0 !important; box-sizing:border-box !important; line-height:normal !important; }
.pp-seg { display:flex; gap:4px; padding:10px 22px 0; border-bottom:1px solid var(--border); }
.pp-seg-btn { position:relative; font:inherit; font-size:14px; font-weight:500; color:var(--muted); padding:12px 14px 14px; border:0; background:transparent; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:color .15s; }
.pp-seg-btn::after { content:""; position:absolute; left:6px; right:6px; bottom:-1px; height:2px; border-radius:2px 2px 0 0; background:transparent; transition:background .15s; }
.pp-seg-btn:hover { color:var(--ink); }
.pp-seg-btn.active { color:var(--ink); font-weight:700; }
.pp-seg-btn.active::after { background:var(--purple); }
.pp-pane { display:none; }
.pp-pane.show { display:block; }
.pp-callout { display:flex; gap:10px; margin:0 0 4px; padding:12px 14px; background:#fdf3e3; border:1px solid #f3dcae; border-radius:10px; font-size:13px; line-height:1.5; color:#8a5d1a; }
.pp-callout svg { flex:0 0 auto; margin-top:1px; }
.pp-callout b { font-weight:800; }
.pp-rows-head { display:grid; grid-template-columns:1fr 1fr 34px; gap:10px; padding:0 2px 8px; margin-top:16px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#8b90a4; }
.pp-rows-head span:last-child { text-align:center; }
.pp-rows { display:flex; flex-direction:column; gap:8px; }
.pp-prow { display:grid; grid-template-columns:1fr 1fr 34px; gap:10px; align-items:center; }
/* Custom participant fields (CUSTOM-PARTICIPANT-FIELDS-PLAN.md §11): one extra 1fr column per
   admin-defined field, inserted between Име и презиме and the delete button. --pp-cf-count is
   set once on .pp-people (canvas-custom.js) from the field catalog's length; .pp-has-cf is only
   ever added when that catalog is non-empty, so a course/viewer with none keeps the plain
   two-column rule above untouched. */
.pp-rows-head.pp-has-cf, .pp-prow.pp-has-cf { grid-template-columns:1fr 1fr repeat(var(--pp-cf-count, 0), 1fr) 34px; }
.pp-inp.bad { border-color:#c0392b !important; box-shadow:0 0 0 3px rgba(192,57,43,.12) !important; }
.pp-row-del { width:34px; height:40px; border:0; background:transparent; color:#8b90a4; border-radius:8px; cursor:pointer; display:grid; place-items:center; transition:all .15s; }
.pp-row-del:hover { background:#fbeceb; color:#c0392b; }
.pp-row-del:disabled { opacity:.3; cursor:default; }
.pp-row-del:disabled:hover { background:transparent; color:#8b90a4; }
.pp-add-row { display:inline-flex; align-items:center; gap:7px; margin-top:12px; background:transparent; border:0; color:#6c5ce7; font:inherit; font-size:14px; font-weight:700; cursor:pointer; padding:4px 2px; }
.pp-add-row:hover { text-decoration:underline; }
.pp-csv-drop { border:1.5px dashed #d8d2f3; border-radius:12px; background:#fbfaff; padding:26px 20px; text-align:center; cursor:pointer; transition:all .15s; }
.pp-csv-drop:hover, .pp-csv-drop.drag { border-color:#7c6cf0; background:#efecfb; }
.pp-cd-ic { width:46px; height:46px; margin:0 auto 12px; border-radius:12px; background:#efecfb; color:#6c5ce7; display:grid; place-items:center; }
.pp-cd-title { font-size:14.5px; font-weight:700; color:#1f2330; }
.pp-cd-title u { color:#6c5ce7; text-underline-offset:2px; }
.pp-cd-sub { font-size:12.5px; color:#5b6075; margin-top:4px; }
.pp-csv-help { margin-top:16px; }
.pp-csv-help-title { font-size:12.5px; font-weight:700; color:#1f2330; margin:0 0 6px; }
.pp-csv-help ul { margin:0; padding-left:18px; font-size:12.5px; color:#5b6075; line-height:1.6; }
.pp-csv-help li { margin-bottom:2px; }
.pp-csv-help code { background:#f5f4fb; border-radius:4px; padding:1px 5px; font-size:12px; }
.pp-fmt { margin-top:16px; border:1px solid #e9e7f5; border-radius:12px; overflow:hidden; }
.pp-fmt-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; background:#faf9fe; border-bottom:1px solid #e9e7f5; font-size:12.5px; font-weight:700; color:#1f2330; }
.pp-fmt-link { background:transparent; border:0; color:#6c5ce7; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.pp-fmt-link:hover { text-decoration:underline; }
.pp-fmt pre { margin:0; padding:14px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; line-height:1.7; color:#1f2330; background:#fff; overflow-x:auto; white-space:pre; }
.pp-fmt pre .hd { color:#6c5ce7; font-weight:700; }
.pp-fmt pre .mut { color:#8b90a4; }
.pp-csv-area { width:100%; min-height:96px; resize:vertical; margin-top:14px; padding:12px 14px !important; border:1px solid #d8d3ea !important; border-radius:10px !important; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; color:#1f2330; box-sizing:border-box; background:#fff !important; }
.pp-csv-area:focus { outline:none !important; border-color:#7c6cf0 !important; box-shadow:0 0 0 3px rgba(124,108,240,.15) !important; }
/* Whole-file CSV header rejection (CUSTOM-PARTICIPANT-FIELDS-PHASE6-CSV-DISCOVERY.md §7) — shown
   INSTEAD OF .pp-summary's ok/err/dup pills when the header itself is invalid; toggled via inline
   display (canvas-custom.js ppRefreshCount), same convention as #pp-csv-err-wrap/#pp-csv-dup-wrap. */
.pp-csv-head-err { align-items:center; gap:8px; margin-top:10px; padding:10px 12px; background:#fdecea; border:1px solid #f3c6c0; border-radius:10px; font-size:13px; line-height:1.45; color:#a83226; }
.pp-summary { display:flex; align-items:center; gap:14px; margin-top:10px; font-size:13px; color:#5b6075; }
.pp-summary .pp-pill { display:inline-flex; align-items:center; gap:6px; font-weight:700; }
.pp-summary .pp-pill.ok { color:#157a3a; }
.pp-summary .pp-pill.err { color:#c0392b; }
.pp-summary .pp-pill.dup { color:#a06a00; }
.pp-inp.dup { border-color:#d9a300 !important; box-shadow:0 0 0 3px rgba(217,163,0,.12) !important; }
@media (max-width:620px) {
  .pp-modal-wide { max-height:calc(100vh - 60px); }
  .pp-modal-wide .pp-m-head { gap:14px; padding:16px 16px 16px 18px; }
  .pp-people .pp-title-sec { flex-basis:180px; }
  .pp-rows-head, .pp-prow { grid-template-columns:1fr 1fr 30px; gap:8px; }
  .pp-rows-head.pp-has-cf, .pp-prow.pp-has-cf { grid-template-columns:1fr 1fr repeat(var(--pp-cf-count, 0), 1fr) 30px; }
}

/* kebab dropdown (appended to body) */
.pp-kebab-menu { position:absolute; min-width:184px; background:#fff; border:1px solid #e9e7f5; border-radius:10px;
  box-shadow:0 10px 30px rgba(31,35,48,.18); padding:6px; z-index:10002;
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; }
.pp-kebab-item { display:block; width:100%; text-align:left; background:transparent; border:0; cursor:pointer;
  padding:9px 12px; border-radius:7px; font:inherit; font-size:13.5px; font-weight:600; color:#1f2330; }
.pp-kebab-item:hover { background:#f3f0fb; color:#6c5ce7; }
.pp-kebab-item.danger { color:#c2570f; }
.pp-kebab-item.danger:hover { background:#ffeede; color:#b7491a; }

/* mobile (<=820px): table -> stacked cards with data-label */
@media (max-width:820px) {
  .pp-people .pp-search { flex:1 1 100%; }
  /* width/min-width !important — cancel the inline px widths that the resize sets on desktop */
  .pp-people table.pp-table, .pp-people .pp-table thead, .pp-people .pp-table tbody,
  .pp-people .pp-table tr, .pp-people .pp-table td { display:block; width:100% !important; min-width:0 !important; }
  .pp-people .pp-table thead { display:none; }
  .pp-people .pp-row { padding:14px 16px 8px; border-bottom:1px solid var(--divider); }
  .pp-people .pp-row:hover > td { background:transparent; }
  .pp-people .pp-row > td { padding:5px 0; border:0; display:flex; align-items:center; gap:10px; }
  .pp-people .pp-row > td.pp-who-td { padding-top:2px; }
  .pp-people .pp-data-label { display:inline-block; min-width:116px; font-size:11.5px; font-weight:700;
    text-transform:uppercase; letter-spacing:.04em; color:var(--faint); }
  .pp-people .pp-who { flex:1; }
  .pp-people .pp-email { flex:1; } /* stacked mode: the address+badges row takes the space after the label */
  .pp-people .pp-row > td.pp-kebab-td { justify-content:flex-end; }
}

/* ===== Setting/changing password (pseudonyms/confirm_change_password) — design_handoff_lozinka.
   All scoped to .pp-setpw-page (specificity > Canvas input[type=password]/button base). ===== */
.pp-setpw-page{
  --pw-purple:#7c6cf0; --pw-purple-deep:#5b4cd4; --pw-purple-soft:#efecfb; --pw-purple-text:#6c5ce7;
  --pw-ink:#1f2330; --pw-muted:#5b6075; --pw-border:#e9e7f5; --pw-field:#d8d3ea;
  --pw-ok-bg:#e0f5e9; --pw-ok-fg:#157a3a; --pw-ok-bd:#b9e6cb;
  position:fixed; inset:0; z-index:1; overflow:auto;
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--pw-ink); -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 600px at 12% 0%, rgba(245,195,130,.35) 0%, rgba(245,195,130,0) 60%),
    radial-gradient(900px 700px at 100% 100%, rgba(124,108,240,.28) 0%, rgba(124,108,240,0) 60%),
    linear-gradient(180deg,#faf9ff 0%,#f4f1fb 100%);
  display:grid; place-items:center; padding:32px 20px;
}
.pp-setpw-page *{ box-sizing:border-box; }
.pp-setpw-page .pp-stage{ width:100%; max-width:500px; display:flex; flex-direction:column; gap:18px; }
.pp-setpw-page .pp-lead{ text-align:center; padding:0 8px; }
.pp-setpw-page .pp-kicker{ display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--pw-purple-deep); margin-bottom:12px; }
.pp-setpw-page .pp-kicker::before, .pp-setpw-page .pp-kicker::after{ content:""; width:18px; height:1px; background:currentColor; opacity:.4; }
.pp-setpw-page .pp-lead h1{ margin:0 0 10px; font-family:"Source Serif 4",Georgia,serif; font-weight:400; font-size:26px; line-height:1.25; letter-spacing:-.005em; color:#1a1e2c; }
.pp-setpw-page .pp-lead h1 .pp-accent{ font-style:italic; color:var(--pw-purple-deep); }
.pp-setpw-page .pp-lead p{ margin:0 auto; color:var(--pw-muted); font-size:14px; line-height:1.55; max-width:380px; }
.pp-setpw-page .pp-card{ background:#fff; border:1px solid var(--pw-border); border-radius:20px; padding:8px; box-shadow:0 26px 60px -28px rgba(70,50,160,.28),0 1px 3px rgba(20,20,40,.04); }
.pp-setpw-page .pp-acct{ display:flex; align-items:center; gap:12px; padding:14px 16px; background:linear-gradient(180deg,#faf8ff 0%,#f5f1fb 100%); border:1px solid var(--pw-border); border-radius:14px; margin-bottom:4px; }
.pp-setpw-page .pp-avatar{ width:42px; height:42px; border-radius:12px; flex:0 0 auto; background:var(--pw-purple-soft); color:var(--pw-purple-deep); display:grid; place-items:center; font-size:15px; font-weight:800; }
.pp-setpw-page .pp-who{ min-width:0; flex:1; }
.pp-setpw-page .pp-name{ font-size:14px; font-weight:700; color:var(--pw-ink); }
.pp-setpw-page .pp-mail{ font-size:12.5px; color:var(--pw-muted); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pp-setpw-page .pp-lock{ color:var(--pw-purple-text); flex:0 0 auto; opacity:.8; }
.pp-setpw-page .pp-panel{ padding:16px 16px 8px; }
.pp-setpw-page .pp-panel-head{ margin-bottom:16px; }
.pp-setpw-page .pp-panel-head h2{ margin:0 0 4px; font-size:17px; font-weight:700; letter-spacing:-.01em; }
.pp-setpw-page .pp-panel-head p{ margin:0; color:var(--pw-muted); font-size:13px; line-height:1.5; }
.pp-setpw-page form{ display:grid; gap:14px; }
.pp-setpw-page .pp-field{ display:grid; gap:6px; }
.pp-setpw-page .pp-field label{ font-size:12px; font-weight:600; color:#2b2f44; }
.pp-setpw-page .pp-input{ height:44px; border:1px solid var(--pw-field); border-radius:10px; padding:0 44px 0 12px; font:inherit; font-size:14px; color:var(--pw-ink); background:#fff; width:100%; transition:border-color .15s,box-shadow .15s; }
.pp-setpw-page .pp-input:focus{ outline:none; border-color:var(--pw-purple); box-shadow:0 0 0 4px rgba(124,108,240,.15); }
.pp-setpw-page .pp-input.ok{ border-color:var(--pw-ok-bd); }
.pp-setpw-page .pp-input.ok:focus{ box-shadow:0 0 0 4px rgba(21,122,58,.12); }
.pp-setpw-page .pp-pw-wrap{ position:relative; }
.pp-setpw-page .pp-pw-toggle{ position:absolute; top:0; right:0; height:44px; width:44px; display:grid; place-items:center; background:transparent; border:0; padding:0; color:#9094a8; cursor:pointer; transition:color .15s; }
.pp-setpw-page .pp-pw-toggle:hover{ color:var(--pw-purple-text); }
.pp-setpw-page .pp-strength{ display:grid; gap:6px; margin-top:-2px; }
.pp-setpw-page .pp-meter{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.pp-setpw-page .pp-meter span{ height:5px; border-radius:999px; background:#ece9f6; transition:background .2s; }
.pp-setpw-page .pp-strength-row{ display:flex; justify-content:space-between; align-items:center; }
.pp-setpw-page .pp-strength-label{ font-size:11.5px; font-weight:700; color:#9094a8; transition:color .2s; }
.pp-setpw-page .pp-strength-hint{ font-size:11.5px; color:#9094a8; }
.pp-setpw-page .pp-strength.s1 .pp-meter span:nth-child(-n+1){ background:#e0922f; } .pp-setpw-page .pp-strength.s1 .pp-strength-label{ color:#b7791f; }
.pp-setpw-page .pp-strength.s2 .pp-meter span:nth-child(-n+2){ background:#e0922f; } .pp-setpw-page .pp-strength.s2 .pp-strength-label{ color:#b7791f; }
.pp-setpw-page .pp-strength.s3 .pp-meter span:nth-child(-n+3){ background:var(--pw-purple); } .pp-setpw-page .pp-strength.s3 .pp-strength-label{ color:var(--pw-purple-deep); }
.pp-setpw-page .pp-strength.s4 .pp-meter span{ background:var(--pw-ok-fg); } .pp-setpw-page .pp-strength.s4 .pp-strength-label{ color:var(--pw-ok-fg); }
.pp-setpw-page .pp-reqs{ list-style:none; margin:2px 0 0; padding:0; display:grid; gap:7px; }
.pp-setpw-page .pp-reqs li{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--pw-muted); transition:color .15s; }
.pp-setpw-page .pp-reqs li .pp-tick{ width:18px; height:18px; border-radius:50%; flex:0 0 auto; border:1.5px solid var(--pw-field); color:transparent; display:grid; place-items:center; transition:all .15s; }
.pp-setpw-page .pp-reqs li.met{ color:#2b2f44; }
.pp-setpw-page .pp-reqs li.met .pp-tick{ background:var(--pw-ok-bg); border-color:var(--pw-ok-bd); color:var(--pw-ok-fg); }
.pp-setpw-page .pp-form-error{ background:#fdecec; border:1px solid #f3c7c7; color:#b3261e; font-size:12.5px; border-radius:10px; padding:9px 12px; }
.pp-setpw-page .pp-btn-primary{ height:46px; border-radius:11px; background:var(--pw-purple); color:#fff; font:inherit; font-weight:700; font-size:14.5px; border:0; cursor:pointer; margin-top:2px; transition:background .15s,transform .05s,opacity .15s; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; }
.pp-setpw-page .pp-btn-primary:hover{ background:#6b5ae8; }
.pp-setpw-page .pp-btn-primary:active{ transform:translateY(1px); }
.pp-setpw-page .pp-btn-primary:disabled{ opacity:.5; cursor:not-allowed; }
.pp-setpw-page .pp-done{ display:none; text-align:center; padding:26px 18px 20px; }
.pp-setpw-page .pp-done.show{ display:block; }
.pp-setpw-page .pp-seal{ width:56px; height:56px; border-radius:50%; margin:0 auto 14px; background:var(--pw-ok-bg); color:var(--pw-ok-fg); border:1px solid var(--pw-ok-bd); display:grid; place-items:center; }
.pp-setpw-page .pp-done h2{ margin:0 0 6px; font-family:"Source Serif 4",Georgia,serif; font-weight:400; font-size:22px; color:#1a1e2c; }
.pp-setpw-page .pp-done h2 .pp-accent{ font-style:italic; color:var(--pw-purple-deep); }
.pp-setpw-page .pp-done p{ margin:0 auto 18px; max-width:320px; color:var(--pw-muted); font-size:13.5px; line-height:1.55; }
.pp-setpw-page .pp-done a.pp-btn-primary{ padding:0 26px; }
.pp-setpw-page .pp-foot{ margin-top:16px; text-align:center; color:#8a8fa3; font-size:12px; }
.pp-setpw-page .pp-foot a{ color:var(--pw-purple-text); text-decoration:none; font-weight:600; }
.pp-setpw-page .pp-foot a:hover{ text-decoration:underline; }
.pp-setpw-page .pp-secnote{ display:flex; align-items:flex-start; gap:8px; justify-content:center; margin-top:8px; color:#8a8fa3; font-size:11.5px; line-height:1.5; text-align:left; max-width:400px; margin-inline:auto; }
.pp-setpw-page .pp-secnote svg{ flex:0 0 auto; margin-top:1px; opacity:.7; }
.pp-setpw-page .pp-secnote strong{ color:var(--pw-purple-deep); font-weight:700; }
.pp-setpw-page .pp-attrib{ margin-top:6px; padding-top:14px; border-top:1px dashed var(--pw-border); text-align:center; color:#9094a8; font-size:11px; line-height:1.5; }
.pp-setpw-page .pp-attrib a{ color:var(--pw-purple-text); text-decoration:none; font-weight:600; }
.pp-setpw-page .pp-attrib a:hover{ text-decoration:underline; }
.pp-setpw-page .pp-attrib-row{ display:inline-flex; align-items:center; gap:6px; margin-bottom:4px; }
.pp-setpw-page .pp-attrib-row svg{ opacity:.7; }
@media (max-width:460px){
  .pp-setpw-page .pp-lead h1{ font-size:22px; }
  .pp-setpw-page .pp-mail{ font-size:12px; }
}

/* ── Admin: „Вођа у више тимова" (multi-section leader enroll) ── */
.tb-lm-btn{ display:inline-flex; align-items:center; gap:6px; margin-left:8px; padding:8px 14px;
  border:1px solid #5e35b1; border-radius:8px; background:#ede7f6; color:#5e35b1; font-weight:600;
  cursor:pointer; font-size:14px; line-height:1; vertical-align:middle; }
.tb-lm-btn:hover{ background:#e1d5f0; }
.tb-lm-btn > span{ font-size:16px; }
.tb-lm-modal{ position:fixed; inset:0; z-index:100000; display:none; }
.tb-lm-modal.show{ display:block; }
.tb-lm-overlay{ position:absolute; inset:0; background:rgba(45,36,56,.5); }
.tb-lm-dialog{ position:relative; max-width:480px; margin:6vh auto 0; background:#fff; border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.3); overflow:hidden; }
.tb-lm-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid #e1d5f0; }
.tb-lm-head h2{ margin:0; font-size:18px; color:#2d2438; }
.tb-lm-x{ border:none; background:none; font-size:26px; line-height:1; color:#8e7cc3; cursor:pointer; padding:0 4px; }
.tb-lm-body{ padding:18px 20px; }
.tb-lm-lbl{ display:block; font-size:13px; font-weight:600; color:#5e35b1; margin:12px 0 5px; }
.tb-lm-body > .tb-lm-lbl:first-child{ margin-top:0; }
.tb-lm-inp{ width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid #e1d5f0; border-radius:8px; font-size:14px; }
.tb-lm-inp:focus{ outline:none; border-color:#8e7cc3; box-shadow:0 0 0 2px rgba(142,124,195,.3); }
.tb-lm-sections{ max-height:220px; overflow-y:auto; border:1px solid #e1d5f0; border-radius:8px; padding:6px; }
.tb-lm-sec{ display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:6px; cursor:pointer; font-size:14px; color:#2d2438; }
.tb-lm-sec:hover{ background:#faf7fc; }
.tb-lm-cb{ width:16px; height:16px; accent-color:#5e35b1; }
.tb-lm-empty{ padding:12px; color:#8e7cc3; font-size:13px; text-align:center; }
.tb-lm-foot{ display:flex; align-items:center; gap:10px; padding:16px 20px; border-top:1px solid #e1d5f0; }
.tb-lm-status{ flex:1; font-size:13px; color:#8e7cc3; }
.tb-lm-cancel{ padding:9px 16px; border:1px solid #e1d5f0; border-radius:8px; background:#fff; color:#5e35b1; font-weight:600; cursor:pointer; }
.tb-lm-submit{ padding:9px 18px; border:none; border-radius:8px; background:#5e35b1; color:#fff; font-weight:600; cursor:pointer; }
.tb-lm-submit:disabled{ background:#c9bce0; cursor:not-allowed; }
/* multi-section enroll — person search + picked chip + create-new toggle + section filter */
.tb-lm-psearchwrap{ position:relative; }
.tb-lm-results{ position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:5; max-height:240px;
  overflow-y:auto; background:#fff; border:1px solid #e1d5f0; border-radius:8px; box-shadow:0 8px 24px rgba(45,36,56,.16); }
.tb-lm-result{ display:block; width:100%; box-sizing:border-box; text-align:left; border:none; background:none;
  cursor:pointer; padding:8px 12px; font-size:14px; color:#2d2438; }
.tb-lm-result:hover{ background:#faf7fc; }
.tb-lm-rname{ display:block; font-weight:600; }
.tb-lm-remail{ display:block; font-size:12px; color:#8e7cc3; }
.tb-lm-noresult{ padding:10px 12px; font-size:13px; color:#8e7cc3; }
.tb-lm-picked{ margin-top:6px; }
.tb-lm-chip{ display:inline-flex; align-items:center; gap:8px; max-width:100%; padding:7px 10px;
  background:#f3edfa; border:1px solid #d9c9ef; border-radius:999px; font-size:13px; color:#2d2438; }
.tb-lm-chip b{ font-weight:700; }
.tb-lm-chipx{ border:none; background:none; color:#8e7cc3; font-size:18px; line-height:1; cursor:pointer; padding:0 2px; }
.tb-lm-picked-hint{ margin-top:5px; font-size:12px; color:#8e7cc3; }
.tb-lm-link{ display:inline-block; margin-top:10px; border:none; background:none; padding:0;
  color:#5e35b1; font-size:13px; font-weight:600; cursor:pointer; text-decoration:underline; }
.tb-lm-new{ margin-top:4px; }
.tb-lm-secsearch{ margin-bottom:8px; }
.tb-lm-sec-led{ opacity:.6; }
.tb-lm-sec-led .tb-lm-cb{ cursor:not-allowed; }
.tb-lm-sectag{ margin-left:auto; padding:2px 8px; border-radius:999px; background:#ede4fa; color:#5e35b1;
  font-size:11px; font-weight:700; white-space:nowrap; }

/* ── Полазници: „Секција" badge + summary (leader with multiple sections; section choice = #pp-section dropdown) ── */
.pp-people .pp-sec{ display:inline-block; max-width:100%; padding:3px 10px; border-radius:999px;
  background:var(--purple-soft); color:var(--purple-text); border:1px solid var(--purple-bd-soft);
  font-size:11px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; }
.pp-people .pp-sec.none{ background:transparent; border:none; color:var(--faint); font-weight:400; padding:0; }
/* A student in multiple leader sections: primary badge + „+N" (tooltip = all sections, via portal [data-tip]). */
.pp-people .pp-sec-multi{ display:inline-flex; align-items:center; gap:5px; vertical-align:middle; cursor:default; }
.pp-people .pp-sec.more{ padding:3px 8px; }
/* Tags are an Admin/Teacher tool (native People). The team leader (role 18/20/21) must not see them even on
   native /users → hide the tag icon (the perm forbids manage anyway; this is a visual hide). */
body.tb-leader .user-tags-icon { display:none !important; }

/* ===== Custom: native People (/courses/1/users) reskin — follows section_people (.pp-*). PHASE 1.
   Scope: body.context-course_1 #group_categories_tabs (roster root; exists ONLY on the People page
   of course 1 → account People and other courses untouched). CSS-only; native DOM/functions/API untouched.
   Tokens are re-declared here because --purple lives on .pp-people/.mg-ocene (a different subtree). ===== */
body.context-course_1 #group_categories_tabs {
  --ink:#1f2330; --muted:#5b6075; --faint:#8b90a4; --border:#e9e7f5; --divider:#f0eef8;
  --purple:#7c6cf0; --purple-text:#6c5ce7; --purple-soft:#efecfb; --purple-bd-soft:#d8d2f3; --pp-field:#d8d3ea;
  max-width:100%; color:var(--ink);
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
/* main panel = card (like .pp-card); flex-wrap groups the toolbar into rows (B) */
body.context-course_1 #group_categories_tabs #tab-0.roster-tab {
  background:#fff; border:1px solid var(--border); border-radius:16px;
  box-shadow:0 2px 12px rgba(124,108,240,.05); padding:18px 22px; margin-top:6px; min-height:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px;
}
/* A — contains the table in the card; scroll ONLY for the table region. [data-view=users] is a stable el
   (RosterView.child('usersView','[data-view=users]') → attach, not replace; survives re-render). */
body.context-course_1 #group_categories_tabs [data-view="users"] { overflow-x:auto; }
body.context-course_1 #group_categories_tabs table.roster { width:100%; }
/* B — grouping the toolbar (CSS-only, without DOM reordering):
   row 1 = search/filter (grows) + „+People"; row 2 = Tag As/Manage Tags; row 3 = invitations + table.
   (Group Set stays top-right, above the tabs — secondary.) */
body.context-course_1 #group_categories_tabs #tab-0 > div:first-of-type {
  flex:0 1 auto; align-items:center !important; gap:10px !important; margin-bottom:0 !important;
}
body.context-course_1 #group_categories_tabs #tab-0 > #addUsers.btn { float:none; margin:0 0 0 auto; }
body.context-course_1 #group_categories_tabs #tab-0 > #userDiffTagManager,
body.context-course_1 #group_categories_tabs #tab-0 > #manageTagsTray { flex:1 1 100%; margin:0; }
body.context-course_1 #group_categories_tabs #tab-0 > .v-gutter { flex:1 1 100%; width:100%; margin:0; }

/* ===== search/filter polish (CSS-only; stable parents + exact InstUI nodes from the DOM dump) =====
   SEARCH = InstUI TextInput; one border box = label>span>span (facade); the <input> itself has its OWN
   border (double frame) → turned off. FILTER = InstUI Select; same box; the "All roles" chip (button) blended in. */
body.context-course_1 #group_categories_tabs #search_input_container { width:300px; max-width:100%; }
/* InstUI TextInput is inline-block (narrower than 300px) → gap to the filter; stretch the field to fill the container */
body.context-course_1 #group_categories_tabs #search_input_container > label,
body.context-course_1 #group_categories_tabs #search_input_container > label > span,
body.context-course_1 #group_categories_tabs #search_input_container > label > span > span { display:block !important; width:100% !important; }
body.context-course_1 #group_categories_tabs #search_input_container > label > span > span {
  border:1px solid var(--pp-field) !important; border-radius:10px !important; background:#fff !important;
  height:40px !important; box-sizing:border-box !important; box-shadow:none !important;
}
body.context-course_1 #group_categories_tabs #search_input_container input[type="text"] {
  border:none !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important;
  font:inherit !important; font-size:14px !important; color:var(--ink) !important;
}
body.context-course_1 #group_categories_tabs #search_input_container input[type="text"]::placeholder { color:var(--faint) !important; }
body.context-course_1 #group_categories_tabs #search_input_container:focus-within > label > span > span {
  border-color:var(--purple) !important; box-shadow:0 0 0 3px rgba(124,108,240,.15) !important;
}
body.context-course_1 #group_categories_tabs #search_input_container svg[role="presentation"] { color:var(--faint); }

body.context-course_1 #group_categories_tabs #peopleFilterContainer { min-width:200px; }
body.context-course_1 #group_categories_tabs #peopleFilterContainer > label > span > span {
  border:1px solid var(--pp-field) !important; border-radius:10px !important; background:#fff !important;
  height:40px !important; box-sizing:border-box !important; box-shadow:none !important;
}
body.context-course_1 #group_categories_tabs #peopleFilterContainer:focus-within > label > span > span {
  border-color:var(--purple) !important; box-shadow:0 0 0 3px rgba(124,108,240,.15) !important;
}
body.context-course_1 #group_categories_tabs #peopleFilterContainer input[role="combobox"] {
  border:none !important; box-shadow:none !important; background:transparent !important;
  font:inherit !important; font-size:14px !important; color:var(--ink) !important;
}
body.context-course_1 #group_categories_tabs #peopleFilterContainer button[type="button"] {
  background:var(--purple-soft) !important; border-color:var(--purple-bd-soft) !important; color:var(--purple-text) !important;
}
body.context-course_1 #group_categories_tabs #peopleFilterContainer button[type="button"] svg { color:var(--purple-text) !important; }

/* buttons: even out height/radius (+People filled primary, +Vođa outline secondary — both emphasized) */
body.context-course_1 #group_categories_tabs #tab-0 > #tb-lm-btn { float:none; margin:0; }
body.context-course_1 #group_categories_tabs #addUsers.btn,
body.context-course_1 #group_categories_tabs #tb-lm-btn {
  height:40px !important; box-sizing:border-box !important; border-radius:10px !important;
  display:inline-flex !important; align-items:center; gap:7px; font-weight:700; font-size:14px;
}
body.context-course_1 #group_categories_tabs #tb-lm-btn {
  background:#fff !important; color:var(--purple-text) !important; border:1px solid var(--purple) !important; box-shadow:none !important;
}
body.context-course_1 #group_categories_tabs #tb-lm-btn:hover { background:var(--purple-soft) !important; color:var(--purple-text) !important; }
/* toolbar buttons (Canvas .btn — stable): primary/secondary like .pp-btn */
body.context-course_1 #group_categories_tabs #addUsers.btn,
body.context-course_1 #group_categories_tabs .group-categories-actions .btn {
  display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 16px; border-radius:10px;
  font-weight:700; font-size:14px; border:1px solid var(--pp-field); background:#fff; color:var(--ink); box-shadow:none;
}
body.context-course_1 #group_categories_tabs #addUsers.btn-primary { background:var(--purple); border-color:var(--purple); color:#fff; }
body.context-course_1 #group_categories_tabs #addUsers.btn-primary:hover { background:#6b5ec4; color:#fff; }
/* search input (InstUI mount) — per element, to match the .pp-search input */
body.context-course_1 #group_categories_tabs #search_input_container input:not([type="hidden"]) {
  border-radius:10px; height:40px; border:1px solid var(--pp-field); font-family:inherit; font-size:14px;
}
/* table: header + rows like .pp-table */
body.context-course_1 #group_categories_tabs table.roster.ic-Table { border-collapse:separate; border-spacing:0; }
body.context-course_1 #group_categories_tabs table.roster thead th {
  text-align:left; padding:12px 18px; font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--faint); background:#fbfbfe; border-bottom:1px solid var(--border);
}
body.context-course_1 #group_categories_tabs table.roster tbody td {
  padding:11px 18px; border-bottom:1px solid var(--divider); vertical-align:middle; font-size:14px; color:var(--ink); background:transparent;
}
body.context-course_1 #group_categories_tabs table.roster.ic-Table--striped tbody tr:nth-child(2n) td { background:transparent; }
body.context-course_1 #group_categories_tabs table.roster tbody tr:hover td { background:#faf9fe; }
body.context-course_1 #group_categories_tabs a.roster_user_name { font-weight:700; color:var(--purple-text); }
/* pending/inactive label -> soft pill (like .pp-badge.pp-pending) */
body.context-course_1 #group_categories_tabs .roster .label {
  border-radius:999px; padding:2px 9px; font-size:11.5px; font-weight:700; text-shadow:none;
  background:#eef0f5; color:#8a8fa3; border:1px solid #dfe2eb;
}
/* native tag icon -> brand color */
body.context-course_1 #group_categories_tabs .user-tags-icon { color:var(--purple-text); }

/* Custom: colored tag labels on native People rows (peopleTags): Тренер = purple, Шеф = amber,
   other/unknown tag = neutral gray. Named pills, modeled on .pp-tag from section_people. */
body.context-course_1 #group_categories_tabs .tb-ptag {
  display:inline-block; margin-left:8px; padding:2px 9px; border-radius:999px;
  font-size:11.5px; font-weight:700; white-space:nowrap; vertical-align:middle;
  background:#eef0f5; color:#8a8fa3; border:1px solid #dfe2eb; }
body.context-course_1 #group_categories_tabs .tb-ptag.tb-ptag-trener { background:var(--purple-soft); color:var(--purple-text); border-color:var(--purple-bd-soft); }
body.context-course_1 #group_categories_tabs .tb-ptag.tb-ptag-sef { background:#fdf3e3; color:#b07d24; border-color:#f0dcae; }
/* soft appearance of our buttons + pills after the skeleton reveal (without a hard pop) */
.tb-lm-btn { animation: tbFadeIn .24s ease-out; }
body.context-course_1 #group_categories_tabs .tb-ptag { animation: tbFadeIn .2s ease-out; }
@keyframes tbFadeIn { from { opacity:0; } to { opacity:1; } }

/* Custom: skeleton for the admin People list (#tb-people-skel, injectPeopleSkeleton) while the native roster arrives.
   The container + z-index are in the inline critical style; here are the shapes (shimmer) + fade-out on reveal. */
#tb-people-skel { transition: opacity .24s ease-out; }
html:not(.tb-people-pre) #tb-people-skel { opacity:0; pointer-events:none; }
#tb-people-skel .pp-skel-top { height:56px; background:#fff; border-bottom:1px solid #ecedf3; }
#tb-people-skel .pp-skel-wrap { max-width:1080px; margin:0 auto; padding:30px 34px 0; }
#tb-people-skel .pp-skel-tabs { display:flex; gap:10px; margin-bottom:22px; }
#tb-people-skel .pp-skel-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
#tb-people-skel .pp-skel-grow { flex:1; }
#tb-people-skel .pp-skel-tr { display:flex; align-items:center; gap:16px; padding:15px 6px; border-bottom:1px solid #f1f2f6; }
#tb-people-skel .pp-skel-b { position:relative; overflow:hidden; background:#eceef3; border-radius:8px; }
#tb-people-skel .pp-skel-b::after {
  content:""; position:absolute; top:0; left:0; right:0; bottom:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  transform:translateX(-100%); animation:ppSkelShimmer 1.3s infinite; }
@keyframes ppSkelShimmer { 100% { transform:translateX(100%); } }
#tb-people-skel .pp-skel-tab { width:92px; height:20px; }
#tb-people-skel .pp-skel-tab2 { width:72px; height:20px; }
#tb-people-skel .pp-skel-search { flex:1; height:42px; }
#tb-people-skel .pp-skel-filter { width:150px; height:42px; }
#tb-people-skel .pp-skel-btn { width:120px; height:42px; }
#tb-people-skel .pp-skel-btn2 { width:178px; height:42px; }
#tb-people-skel .pp-skel-thead { height:44px; border-radius:10px; margin-bottom:6px; }
#tb-people-skel .pp-skel-ava { width:38px; height:38px; border-radius:50%; flex:0 0 38px; }
#tb-people-skel .pp-skel-name { width:220px; height:13px; }
#tb-people-skel .pp-skel-col { margin-left:auto; flex:0 0 130px; height:12px; }
#tb-people-skel .pp-skel-col2 { flex:0 0 90px; height:12px; }
.pp-people .pp-sections-summary{ padding:14px 22px 0; font-size:13px; color:var(--muted); }
.pp-people .pp-sections-summary b{ color:var(--purple-text); font-weight:800; font-variant-numeric:tabular-nums; }
#pp-sentinel{ height:1px; }

/* ============================================================ */
/* ПРОМЕНА ИМЕНА (name_change#show) — design_handoff_promena_imena */
/* Self-service edit of your own name: one field, saved at once.  */
/* Tokens redeclared on the scope root like .pp-people/.mg-ocene. */
/* Entry point = account menu in the top bar (.acct-* above).     */
/* ============================================================ */
.nc-name {
  --ink:#1f2330; --muted:#5b6075; --border:#e9e7f5; --purple:#7c6cf0; --purple-dark:#6b5ec4;
  --purple-text:#6c5ce7; --nc-field:#d8d3ea; --nc-foot:#faf9fe;
  --err-fg:#cc0000; --err-deep:#a3342b; --err-bg:#fbeceb; --err-bd:#f2d4d1;
  max-width:760px; margin:0 auto; padding:8px 0 64px; color:var(--ink);
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.nc-name * { box-sizing:border-box; }
.nc-name .nc-lead { margin-bottom:22px; }
.nc-name .nc-lead h1 { margin:0 0 8px; font-size:26px; font-weight:800; letter-spacing:-.01em; }
.nc-name .nc-lead p { margin:0; font-size:14.5px; line-height:1.6; color:var(--muted); max-width:560px; text-wrap:pretty; }

/* One field must not stretch across the whole 760px column (handoff §1). */
.nc-name .nc-card { max-width:560px; background:#fff; border:1px solid var(--border); border-radius:16px;
  box-shadow:0 6px 24px rgba(124,108,240,.07); overflow:hidden; }
.nc-name .nc-card-body { padding:20px 22px 22px; }
.nc-name .nc-field label { display:block; font-size:13.5px; font-weight:700; margin-bottom:6px; }
/* !important on the box properties: Canvas bootstrap input[type=text] (0,1,1) outranks .nc-inp (0,1,0)
   and would otherwise cut the corners — same reason as .pp-inp. */
.nc-name .nc-inp { width:100%; padding:11px 13px !important; border:1px solid var(--nc-field) !important;
  border-radius:10px !important; background:#fff !important; font:inherit; font-size:14.5px; color:var(--ink);
  height:auto; margin:0; box-shadow:none; transition:border-color .15s, box-shadow .15s; }
.nc-name .nc-inp:focus { outline:none; border-color:var(--purple) !important; box-shadow:0 0 0 3px rgba(124,108,240,.15) !important; }
.nc-name .nc-inp[aria-invalid="true"] { border-color:var(--err-fg) !important; box-shadow:0 0 0 2px rgba(204,0,0,.12) !important; }
.nc-name .nc-inp:disabled { background:#faf9fe !important; color:var(--muted); cursor:default; }

.nc-name .nc-err { display:none; align-items:center; gap:6px; color:var(--err-fg); font-size:12px;
  margin-top:6px; font-weight:600; }
.nc-name .nc-err.show { display:flex; }
/* Save failed — the product's only server-error pattern (handoff §8): .callout geometry, red gamut. */
.nc-name .nc-sysfail { display:none; gap:9px; margin-top:16px; padding:11px 13px; background:var(--err-bg);
  border:1px solid var(--err-bd); border-radius:10px; font-size:12.5px; line-height:1.5; color:var(--err-deep); }
.nc-name .nc-sysfail.show { display:flex; }
.nc-name .nc-sysfail svg { flex:0 0 auto; margin-top:1px; }
.nc-name .nc-sysfail b { font-weight:800; }

.nc-name .nc-card-foot { display:flex; align-items:center; justify-content:flex-end; gap:10px;
  padding:16px 22px; border-top:1px solid var(--border); background:var(--nc-foot); }
.nc-name .nc-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit;
  font-size:14px; font-weight:700; padding:10px 18px; border-radius:10px; cursor:pointer;
  border:1px solid transparent; transition:all .16s; text-decoration:none; }
.nc-name .nc-btn-ghost { background:#fff; color:var(--ink); border-color:var(--nc-field); }
.nc-name .nc-btn-ghost:hover { background:#f4f2fb; color:var(--ink); }
.nc-name .nc-btn-primary { background:var(--purple); color:#fff; min-width:124px; }
.nc-name .nc-btn-primary:hover:not(:disabled) { background:var(--purple-dark); }
.nc-name .nc-btn-primary:disabled { opacity:.5; cursor:default; }
.nc-name .nc-btn:focus-visible { outline:2px solid var(--purple); outline-offset:2px; }
/* Saving — first submit-in-progress state in the product (handoff §6); min-width keeps the button
   from jumping between „Сачувај" and spinner + „Чување…". */
.nc-name .nc-btn-primary[aria-busy="true"] { background:#b8aef0; cursor:default; }
.nc-name .nc-spin { display:inline-block; width:15px; height:15px; box-sizing:border-box; border-radius:50%;
  border:2px solid rgba(255,255,255,.55); border-top-color:#fff; animation:nc-spin .6s linear infinite; }
@keyframes nc-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .nc-name .nc-spin { animation-duration:2s; } }
.nc-name .nc-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }

@media (max-width:620px) {
  .nc-name { padding:4px 0 56px; }
  .nc-name .nc-lead h1 { font-size:23px; }
  .nc-name .nc-card { max-width:none; }
  .nc-name .nc-card-body { padding:18px; }
  .nc-name .nc-card-foot { padding:14px 18px; gap:8px; }
  .nc-name .nc-btn { flex:1 1 auto; padding:12px 16px; }
  .nc-name .nc-btn-primary { min-width:0; }
}

/* ============================================================ */
/* PART 13: УЖИВО ОБУКА (LiveTraining) — leader's/observer's log  */
/* Markup: app/views/live_training/{index,edit,_form}.html.erb.  */
/* Interactions: liveTrainingInteractions(). Container-scoped     */
/* (.lt-page), tokens redeclared here like .pp-people/.mg-ocene.  */
/* ============================================================ */
.lt-page {
  --ink:#1f2330; --muted:#5b6075; --faint:#8b90a4; --border:#e9e7f5; --divider:#f0eef8;
  --purple:#7c6cf0; --purple-text:#6c5ce7; --purple-soft:#efecfb; --purple-bd-soft:#d8d2f3;
  max-width:840px; margin:0 auto; padding:8px 0 48px; color:var(--ink);
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.lt-page * { box-sizing:border-box; }
.lt-back { display:inline-block; margin-bottom:16px; color:var(--purple-text); text-decoration:none; font-weight:600; font-size:14px; }
.lt-back:hover { text-decoration:underline; }

.lt-card { background:#fff; border:1px solid var(--border); border-radius:16px; padding:20px 22px; margin-bottom:20px; }
.lt-toolbar { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.lt-heading { font-size:19px; font-weight:800; margin:0; }
.lt-subtitle { font-size:13px; color:var(--muted); margin:6px 0 0; line-height:1.5; max-width:60ch; }
.lt-empty { color:var(--muted); font-size:14px; }

/* Секција/Тип filter toolbar (design_handoff_uzivo_obuke §4) — same select-with-chevron shape as
   .pp-people .pp-select-wrap, mirrored here (not shared: .lt-page has no --pp-field token). */
.lt-filters { display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.lt-select-wrap { position:relative; }
.lt-select-wrap select { appearance:none; -webkit-appearance:none;
  padding:9px 38px 9px 14px; border:1px solid #d8dbe3; border-radius:10px;
  font:inherit; font-size:14px; color:var(--ink); background:#fff; cursor:pointer; }
.lt-select-wrap select:focus { outline:none; border-color:var(--purple); box-shadow:0 0 0 3px rgba(124,108,240,.15); }
.lt-select-wrap::after { content:""; position:absolute; right:14px; top:50%; width:8px; height:8px;
  border-right:2px solid var(--faint); border-bottom:2px solid var(--faint); transform:translateY(calc(-50% - 5px)) rotate(45deg); pointer-events:none; }
.lt-count { margin-left:auto; font-size:13.5px; color:var(--muted); }
.lt-count b { color:var(--ink); font-variant-numeric:tabular-nums; }

/* .lt-table-wrap: same overflow-x:auto scroll-container pattern as .pp-people .pp-scroll
   (Полазници roster) — contains the table's own overflow so a too-wide table scrolls
   INSIDE the card on narrow viewports instead of the whole page overflowing horizontally.
   Unlike .pp-scroll's page, no <768px stacked-table media query here (design constraint:
   keep this table a normal table — no column hiding/reflow — at every width). */
.lt-table-wrap { width:100%; overflow-x:auto; }
/* min-width:720px sums the 7 columns' own sensible minimums (Датум ~95, Тип pill ~95,
   Секција pill ~150, Тренери 2-names-shown+chip ~180, Учесника ~70, Белешке icon ~55,
   edit icon ~55) — comfortably under .lt-page's 840px cap minus .lt-card's 44px padding
   (~796px, so width:100% already satisfies it and desktop/tablet render UNCHANGED), and
   above every phone portrait viewport (so .lt-table-wrap scrolls there instead of squeezing). */
.lt-table { width:100%; min-width:720px; border-collapse:collapse; font-size:14px; }
.lt-table th { text-align:left; color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.03em; padding:8px 10px; border-bottom:1px solid var(--border); }
.lt-table th.c, .lt-table td.c { text-align:center; }
.lt-table td { padding:10px; border-bottom:1px solid var(--divider); }
/* Тип pill styling itself lives earlier in this file (.pp-people .lt-pill, .lt-page .lt-pill —
   Полазници PART, extended to also cover this page instead of duplicating it). */
.lt-sec { display:inline-block; font-size:12.5px; font-weight:700; color:var(--purple-text); background:var(--purple-soft); border-radius:999px; padding:5px 12px; white-space:nowrap; }
.lt-trainers-more { color:var(--purple-text); font-weight:700; cursor:default; }
.lt-notes-yes { display:inline-flex; width:22px; height:22px; border-radius:999px; background:#e6f5ec; color:#2f8f5b; align-items:center; justify-content:center; }
.lt-notes-yes svg { display:block; }
.lt-notes-none { color:var(--faint); }
.lt-ico-edit { display:inline-flex; color:var(--muted); }
.lt-ico-edit:hover { color:var(--purple-text); }

.lt-btn { border:1px solid var(--border); border-radius:10px; padding:9px 16px; font-weight:700; font-size:14px; cursor:pointer; background:#fff; color:var(--ink); }
.lt-btn-primary { background:var(--purple); border-color:var(--purple); color:#fff; }
.lt-btn-primary:hover { background:var(--purple-text); }
.lt-btn-primary:disabled { opacity:.6; cursor:default; }
.lt-btn-ghost { background:#fff; color:var(--muted); }

/* Page-level header (design_handoff_uzivo_obuke §5) — title/subtitle/context pill sit OUTSIDE
   .lt-form-wrap's card, directly on the page background (edit.html.erb only; the inline create
   panel on the events list has no header of its own — it sits right under that page's own). */
.lt-form-header { margin-bottom:24px; }
.lt-form-title { font-size:26px; font-weight:800; margin:0; }
.lt-form-subtitle { font-size:14px; color:var(--muted); margin:6px 0 0; }
.lt-form-context { display:flex; align-items:center; gap:10px; margin-top:14px; }
.lt-form-context-sec { font-size:14px; font-weight:700; color:var(--ink); }

/* .lt-form-wrap spacing/sizing below matches design_handoff_uzivo_obuke §5's own numbers
   (card radius 12/padding 32, section gap 36/18, label->field 6, field->field 22, input 44px,
   focus ring) — kept on .lt-form-wrap specifically, NOT the shared .lt-card (used by the events
   list's table card too, which must stay at its own existing radius/padding). */
.lt-form-wrap { background:#fff; border:1px solid var(--border); border-radius:12px; padding:32px; }
.lt-form-section-title { font-size:15.5px; font-weight:700; margin:0 0 18px; }
.lt-form-section-title:not(:first-child) { margin-top:36px; }
.lt-form .lt-field { margin-bottom:22px; }
.lt-form label, .lt-form .lt-label { display:block; font-size:14px; font-weight:600; color:var(--muted); margin-bottom:6px; }
.lt-label-row { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; }
.lt-label-row .lt-label { margin-bottom:0; }
.lt-participants-count { font-size:13px; color:var(--muted); font-weight:600; }
.lt-helper { font-size:12.5px; color:var(--faint); margin:0 0 6px; }
.lt-form select, .lt-form input[type="text"], .lt-form input[type="date"] {
  width:100%; height:44px; box-sizing:border-box; border:1px solid #d8dbe3; border-radius:8px; padding:0 12px; font-size:14px; font-family:inherit; color:var(--ink);
}
.lt-form textarea {
  width:100%; box-sizing:border-box; border:1px solid #d8dbe3; border-radius:8px; padding:10px 12px; font-size:14px; font-family:inherit; color:var(--ink);
  min-height:64px; resize:vertical;
}
.lt-form select:focus, .lt-form input:focus, .lt-form textarea:focus {
  outline:none; border-color:var(--purple); box-shadow:0 0 0 4px rgba(124,108,240,.14);
}

.lt-participants .lt-selected-list { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; min-height:28px; }
.lt-chip { display:inline-flex; align-items:center; gap:6px; background:var(--purple-soft); border:1px solid var(--purple-bd-soft); color:var(--purple-text); border-radius:999px; padding:4px 6px 4px 12px; font-size:13px; font-weight:600; }
.lt-chip-x { border:0; background:none; color:var(--purple-text); cursor:pointer; font-size:15px; line-height:1; padding:2px 4px; }
.lt-selected-empty { color:var(--faint); font-size:13px; }
.lt-participant-results { position:relative; margin-top:4px; max-height:220px; overflow-y:auto; border:1px solid var(--border); border-radius:9px; }
.lt-participant-results:empty { border:none; }
.lt-result-row { display:block; width:100%; text-align:left; border:0; background:#fff; padding:8px 12px; font-size:14px; cursor:pointer; }
.lt-result-row:hover { background:var(--divider); }
.lt-no-results { display:block; padding:8px 12px; color:var(--faint); font-size:13px; }

.lt-form-actions { display:flex; align-items:center; gap:10px; margin-top:18px; }
.lt-form-error { color:#c0392b; font-size:13px; font-weight:600; }