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


/* ============================================================ */
/* TOKENI                                                        */
/* ============================================================ */

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;
}


/* ============================================================ */
/* DEO 1: SAKRIVANJE CANVAS CHROME-A + 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;
}

/* U iframe-ovima nemamo custom top bar — bez padding-a */
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;
}


/* ============================================================ */
/* DEO 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);
}


/* ============================================================ */
/* DEO 3: NASLOV STRANICE LEKCIJE                                 */
/* ============================================================ */

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;
}




/* ============================================================ */
/* DEO 4: MODULES (Области) — vizuelno uskladi sa Assignments     */
/* (samo CSS — Canvas-ov native collapse handler ostaje netaknut) */
/* ============================================================ */

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;
}

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;
}


/* ============================================================ */
/* DEO 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 kontejner — nije kartica */
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 za "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;
}

/* Sakri sve arrow/toggle ikonice unutar headera (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 u praznom header-u dok Canvas učitava naslov */
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 (isti offset kao 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 raste, poeni desno */
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 (isti offset kao 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, isti desni rub kao "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-ova nativna icon-quiz (rocket) ostaje */
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;
}

/* Poeni desno */
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;
}

/* Resetuj outer wrapper-e */
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;
}


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

/* Sakrij naslov "Оцене за..." i Sort/Apply formu */
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 kartice (JS injektuje #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 tabela */
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;
}

/* Onemogući sve linkove u grades tabeli — naslovi i score linkovi se
   prikazuju kao plain text (klik nemoguć, hover bez kursora). */
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;
}

/* Sakri 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 red ("Assignments" agregat) — sakri ceo red */
body.context-course_1:not(.is-teacher) #grades_summary tbody tr.group_total,
/* Sakri samo Status kolonu (Due/Рок ostaje vidljiv) */
body.context-course_1:not(.is-teacher) #grades_summary thead th.status,
body.context-course_1:not(.is-teacher) #grades_summary tbody td.status,
/* Sakri prazne / utility kolone iza 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 splituje points_possible
   tako da "/" zauzme centralnu kolonu — pozicioniran tačno ispod centra
   reči "Резултат" u headeru (oba centrirana u istoj koloni). */
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;
}


/* ============================================================ */
/* DEO 7: STRANICE LEKCIJE (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;
}

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 ispod lekcije) — 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 — bela slova na ljubičastom gradijentu (override DEO 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;
}

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

/* Sakrij Canvas spinner (.spinner u .show-content) — naš loader nije potreban
   jer prerequisites lookup je brz, a spinner ima inline left/top koji se ne
   slaže sa našim layout-om. */
body.context-course_1:not(.is-teacher) .show-content > .spinner {
  display: none !important;
}

/* Glavni explanation kontejner — soft kartica u okviru .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 (ubacuje JS) — manji, levo poravnat,
   override DEO 7 h2 centriranog/ljubičastog. */
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;
}

/* Svaki modul = bela podkartica */
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 ikona (jedna za ceo modul) — redundantna, sakrij */
body.context-course_1:not(.is-teacher) #module_prerequisites_list > li.module > i.icon-lock {
  display: none !important;
}

/* Naziv modula — diskretan label, ne veliki ljubičasti centrirani 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 (lista zahteva) */
body.context-course_1:not(.is-teacher) #module_prerequisites_list > li.module > ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Svaki zahtev — red sa linkom i opisom */
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 u zahtevu */
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 ikonica na linku (zaključan 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;
}

/* Zaključan link — onemogući klik (Canvas svejedno doda href) */
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;
}

/* Opis zahteva ("морате освојити бар 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;
}


/* ============================================================ */
/* DEO 8: QUIZ SHOW (test landing — pre nego što se uđe u test)  */
/* ============================================================ */

/* Canvas .alert na quiz stranicama (npr. "Тачни одговори су скривени") —
   neutralna paleta umesto default crvenkaste. Ne diramo .alert-danger
   (lock_explanation) jer označava stvarnu grešku/zabranu. */
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;
}

/* Naslov "Тест 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 kartica — 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: deca skrivena, spinner u centru — isti spinner kao 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 dodaje .tb-ready posle font-size fix — sadržaj se prikaže, spinner nestane */
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;
}

/* Forsiraj 14px na SVE potomke (Canvas može renderovati .title kao h2 ili 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 dugme wrapper — odvoji od kartice ispod */
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" naslov + tekst */
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;
}

/* "Историја покушаја" naslov — uvučen koliko i redovi tabele */
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) ubacuje sivi spinner u version-table
   tokom AJAX poziva. Sakri ga, prikaži naš purple spinner umesto. */
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;
}

/* Naš spinner dok tabela nije učitana */
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;
}

/* Kad tabela stigne, ukini min-height pa kartica raste prirodno */
body.context-course_1:not(.is-teacher) #quiz-submission-version-table:has(table) {
  min-height: 0;
}

/* Nema attempts → JS doda .tb-no-attempts; sakri ceo blok (nema istorije) */
body.context-course_1:not(.is-teacher) #quiz-submission-version-table.tb-no-attempts {
  display: none !important;
}

/* Resetuj wrappere koji zaokružuju samu istoriju u praznu karticu */
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 tabela */
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;
}

/* Linkovi onemogućeni — plain text bez tooltip/pointera (kao kod grades tabele) */
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;
}

/* Prva kolona (badge) — skupi na sadržaj */
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 injektuje .tb-attempt-pill u prvu ćeliju) */
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;
}


/* ============================================================ */
/* DEO 9: QUIZ TAKING (kad student aktivno radi test)            */
/* ============================================================ */

/* Layout — content centriran, prostor za 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;
}

/* Sakrij Canvas-ovu nativnu .form-actions — JS pravi clone u bottom bar-u */
body.context-course_1.tb-quiz-taking:not(.is-teacher) #submit_quiz_form .form-actions {
  display: none !important;
}

/* Quiz take initial loading: Canvas renderuje <h3 class="loading">Loading...</h3>
   pre nego se .loaded prikaže. Sakri tekst, prikaži purple spinner.
   `display` BEZ !important — Canvas postavlja inline style="display:none" kad
   učitavanje završi, pa naš spinner nestaje prirodno. */
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;
}

body.context-course_1:not(.is-teacher) header.quiz-header h2 {
  color: var(--tb-ink) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 24px 0 8px 0 !important;
  text-align: left !important;
  letter-spacing: -0.01em !important;
}

body.context-course_1:not(.is-teacher) #quiz-instructions {
  background: var(--tb-card) !important;
  border: 1px solid var(--tb-border) !important;
  border-radius: 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: 14px !important;
  text-align: left !important;
}

/* ----- Top stats kartice (JS injektuje #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 pre prvog pitanja */
.tb-quiz-section-heading {
  color: var(--tb-ink) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 8px 0 12px 0 !important;
  padding: 0 !important;
  text-align: left !important;
  letter-spacing: -0.01em !important;
}

/* ----- Pitanje kao kartica ----- */
body.context-course_1:not(.is-teacher) .display_question {
  background: var(--tb-card) !important;
  border: 1px solid var(--tb-border) !important;
  border-radius: 14px !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  overflow: hidden !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;
  padding: 14px 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;
}

/* Bookmark / flag dugme — Canvas-ov .flag_question link */
body.context-course_1:not(.is-teacher) .display_question .flag_question {
  color: var(--tb-purple-text) !important;
  text-decoration: none !important;
  margin-right: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
}

body.context-course_1:not(.is-teacher) .display_question .flag_question::before {
  content: '🔖' !important;
  font-size: 14px !important;
}

body.context-course_1:not(.is-teacher) .display_question.marked .flag_question::before {
  content: '🏷️' !important;
}

/* "1 поен" — trik: font-size:0 sakriva " pts", ::after dodaje " поен" */
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;
}

body.context-course_1:not(.is-teacher) .display_question .question_points {
  color: var(--tb-purple-text) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  background: transparent !important;
}

body.context-course_1:not(.is-teacher) .display_question .question_points::after {
  content: ' поен' !important;
  color: var(--tb-purple-text) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  margin-left: 2px !important;
}

/* Pitanje 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;
}

/* ----- Odgovori ----- */
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;
}

body.context-course_1:not(.is-teacher) .display_question .answer {
  background: #ffffff !important;
  border: 1px solid var(--tb-border) !important;
  border-radius: 10px !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  transition: all 0.15s !important;
  display: block !important;
}

body.context-course_1:not(.is-teacher) .display_question .answer:hover {
  background: #faf9fc !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: #ede9fc !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: 14px !important;
  padding: 14px 18px !important;
  cursor: pointer !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  color: var(--tb-ink) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
}

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

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"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--tb-purple) !important;
  cursor: pointer !important;
  margin: 0 !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 !important;
  color: var(--tb-ink) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ----- Bottom action bar (fixed, full-width pozadina, sadržaj 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: 14px;
  font-weight: 500;
  flex: 1;
}

#custom-quiz-actionbar .qab-center {
  color: var(--tb-muted);
  font-size: 13px;
  font-weight: 500;
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#custom-quiz-actionbar .qab-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34c759;
  flex: 0 0 auto;
}

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

#custom-quiz-actionbar .qab-submit-btn {
  background: #ffffff !important;
  color: var(--tb-purple-text) !important;
  border: 1px solid var(--tb-purple-border-soft) !important;
  border-radius: 8px !important;
  padding: 8px 20px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  text-decoration: none !important;
  display: inline-block !important;
  font-family: inherit !important;
}

#custom-quiz-actionbar .qab-submit-btn:hover {
  background: var(--tb-purple-soft) !important;
  border-color: var(--tb-purple) !important;
}


/* ============================================================ */
/* DEO 9B: PAGE-LEVEL SKELETON LOADER                             */
/* JS dodaje body.tb-loaded na kraju run() funkcije.              */
/* Do tada — #content sakriven, skeleton karte preko #content-a.  */
/* Skeleton ima delay 250ms da izbegne flash na brzim load-ovima. */
/* ============================================================ */

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));
}


/* ============================================================ */
/* DEO 11: LOGIN PAGE (prijava-v2 dizajn)                         */
/* JS injektuje: #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 je naš 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 iznad kartice) ----- */
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) — sakrij 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 koristi $.hide/$.show koje
   postavljaju style="display: none" / brišu inline display. Naš grid layout
   primenjujemo SAMO kada NIJE inline-hidden, da bi toggle pravilno radio. */
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 → skida 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 instrukcije */
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 i Request Password u istom redu */
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 — sakrij (zamenjeno mission lead-om iznad kartice) ----- */
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 kolone) ----- */
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 (paragraf ispod pillara) ----- */
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;
}

/* ----- Sakrij Canvas-ov original footer (zamenjeno našim attrib-om) ----- */
/* Koristimo ID + tag selector da pobedimo Canvas-ov #footer pravilo. */
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 (ako su konfigurisani auth provider-i) ----- */
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; }
}


/* ============================================================ */
/* DEO 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 injektuje: #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 od #tb-login-ribbon sa login stranice.
   Fixed na viewport (ne na #modal-box), centriran horizontalno na vrhu. */
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 — centrirana kartica. Stage (#main/#content) je flex-centriran, pa
   #modal-box samo definiše širinu — vertikalni padding nije potreban. */
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;
}

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

/* Header band više ne koristimo na ovoj stranici (samo na logged-in enroll-u) */
body.body--login-confirmation .tb-enroll-header-band {
  display: none !important;
}

/* Lead (pill + naslov + sublead) — IZNAD belog card-a, centriran */
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 ("Унесите податке") — prvi element unutar belog card-a.
   Login analog (.tb-login-panel-head h2) ima margin 0 0 14px unutar .ic-Login__content
   sa padding 24px; ovde nema card padding pa to namećemo na 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 sadržaj — iste dimenzije i gap kao login forma (.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;
}

/* Sakrij Canvas-ov default H2 ("Enroll in...") — zamenjen sa 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 ispod submit dugmeta — "Потребна помоћ? Контактирајте подршку" */
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-ov "You are enrolling in <course>" summary i "Please enter..."
   paragraph — premešten je u .tb-enroll-lead iznad card-a; ovde sakrij. */
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 kartice ISPOD belog card-a (Трајање / Области / Тестова) */
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 paragraf na dnu */
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: skrivamo radio izbor (JS forsira create). Obe user_info
   sekcije (#create_user_info → Full Name, #log_in_user_info → Password) imaju
   inline display:none — overrid-ujemo da pokažemo OBE.
   Backbone changeAction radi .hide()/.show() na njima pri svakoj radio promeni,
   pa nam treba !important da to anuliramo. */
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;
}

/* Resetuj Canvas-ov horizontalni form-group na vertikalni 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 div-ovi koje Canvas backbone view koristi (create_user_info,
   email_info, log_in_user_info) — neka budu obični kontejneri bez razmaka. */
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 dugme — Canvas inline-uje visibility:hidden dok user ne klikne radio.
   Pošto smo sakrili radio, oslobađamo dugme putem CSS-a (JS već postavlja stil,
   ali ovo je fallback za FOUC i za slučaj da Backbone view re-renderuje dugme
   sa display:none nakon naših JS intervencija). */
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 лево, submit дугме десно (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;
}

/* Sakrij Canvas-ovu auto-injektovanu external-link ikonicu. Naš tekst/SVG ostaju.
   Hvatamo: bilo koji svg koji nije naš, sve što dolazi POSLE naše ikonice u DOM-u
   (general sibling), i tipične Canvas izlazne tagove (i, img, ui-icon-extlink,
   screenreader-only) plus oba pseudo-elementa. */
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 dugme više nema strelicu — kao 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; }
}


/* ============================================================ */
/* DEO 12C: ENROLLMENT REDIRECT — spinner overlay                 */
/* Dva trigger-a:                                                 */
/* 1) html.tb-enroll-redirecting — JS dodaje sinhrono kad detektuje*/
/*    ?enrolled=1 na /enroll/<code>, pre window.location.replace. */
/* 2) :has() na server-rendered markeru "successfully enrolled"   */
/*    stranice (a[href*="registration_success"] unutar #enroll_form). */
/*    Ovo je render-blocking detekcija — deluje čim parser stigne */
/*    do tog linka, pa Canvas chrome ne uspe da paintuje sadržaj. */
/* CSS je u <head> (učitan sync), pa pravila važe pre defer JS-a. */
/* ============================================================ */

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); }
}


/* ============================================================ */
/* DEO 12B: ENROLLMENT PAGE — LOGGED-IN STATE                     */
/* /enroll/<code> kad je student ulogovan (already enrolled itd). */
/* JS dodaje body.tb-enroll-logged-in. Canvas chrome se sakriva.  */
/* ============================================================ */

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; }

/* Sakrij sav Canvas chrome — scope kroz CSS :has() da se primenjuje čim
   parser dospe do #enroll_form. Naš theme JS je defer (Canvas helper) pa
   ne stiže pre body parse-a; :has() je render-blocking-CSS-driven detekcija
   i hvata FOUC bez čekanja JS-a. */
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 pre nego što parser dospe do
   #enroll_form. Eliminiše flash chrome-a (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 od .ic-Login na login stranici: vertikalno centriran
     sadržaj, min-height da kartica ne pliva na vrhu kad ima dovoljno mesta. */
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Card je #modal-box (kad je student ulogovan, nema .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 — sada deluje kao 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 kartica (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 levo, secondary desno */
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) prvi vizuelno */
}

/* "Грешка у упису? Контактирајте подршку" */
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 (svi /enroll/* URL-ovi, oba stanja) ----- */
/* html.tb-enroll-page se postavlja SYNC u JS-u — radi pre run()-a, bez flash-a */

/* Sakrij Canvas-ov default H2 ("Enrol in <course>") odmah — JS bi to uradio
   tek na DOMContentLoaded, ali H2 stigne ranije. Override sa CSS-om. */
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;
}

/* Sakrij sadržaj dok body nema .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 — više placeholder blokova koji liče na stvarnu formu ===== */

/* Container koji JS injectuje sync u <html> pre body-ja. */
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 — pokriva Canvas chrome flash pre nego što naš JS
     dospe da doda hide klase. */
  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%);
}

/* Body je potpuno sakriven dok skeleton fade-uje. Skeleton je sibling body-ja
   (child of html) pa ostaje vidljiv. Koristimo server-side body class
   `self-enrollment-page` (dodat u SelfEnrollmentsController#new) — parsira se
   čim parser dospe do <body class="..."> taga, PRE ikakvog body sadržaja.
   Eliminiše flash i Canvas chrome-a I starog sadržaja. */
body.self-enrollment-page:not(.tb-loaded) {
  visibility: hidden !important;
}

/* Post-enroll skeleton — bez outer padding-a; inner .tb-skel-home preuzima
   tačnu geometriju #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.
   Pojedinačni margin-top-ovi umesto gap-a da odgovaraju stvarnim razmacima
   sekcija (28/28/20/36) u renderovanom sadržaju. */
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; }

/* Stari ::before/::after pseudo-skeleton više ne treba — koristimo #tb-enroll-skel. */


/* ============================================================ */
/* DEO 10: MOBILNA PRILAGOĐAVANJA                                 */
/* ============================================================ */

@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 — manje rounded i 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;
  }

  /* Lekcije */
  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 kolona */
  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 kartica — 1 kolona */
  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;
  }
}