/* VIAL LMS 0.6.18: side panels are overlays and must not squeeze page content. */
:root{
  --vial-block-gap:12px;
}
.moodle-top,
.moodle-bar,
.moodle-actions,
.user-menu{
  overflow:visible!important;
}
.user-menu{
  position:relative!important;
  z-index:21000!important;
}
.user-menu-dropdown,
.moodle-user-dropdown{
  z-index:2147483000!important;
}
.user-menu:hover .user-menu-dropdown,
.user-menu:focus-within .user-menu-dropdown,
.user-menu-dropdown.open{
  display:block!important;
}
.user-menu-dropdown{
  top:calc(100% + 8px)!important;
  right:0!important;
}
.user-menu-dropdown .user-submenu:hover > div,
.user-menu-dropdown .user-submenu:focus-within > div{
  display:block!important;
}
.avatar-fallback{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#e5e7eb!important;
  color:#475569!important;
  border:1px solid #cbd5e1!important;
  font-weight:800!important;
  line-height:1!important;
  text-transform:uppercase!important;
}
.wrap{
  margin-top:var(--vial-block-gap)!important;
  margin-bottom:0!important;
}
.main-content > *{
  margin-top:0!important;
}
.main-content > * + *{
  margin-top:var(--vial-block-gap)!important;
}
.card,
.moodle-section,
.admin-section-intro,
.admin-section-list,
.course-category,
.table-scroll,
.table-wrap,
.msg,
.alert{
  margin-top:0!important;
  margin-bottom:var(--vial-block-gap)!important;
}
.grid,
.grid.two,
.grid.three,
.grid.four,
.course-folder-grid,
.course-preview-list,
.course-admin-list,
.course-builder-list,
.course-structure-list{
  gap:var(--vial-block-gap)!important;
}
.grid > .card,
.course-folder-grid > *,
.course-preview-list > *,
.course-admin-list > *,
.course-builder-list > *,
.course-structure-list > *{
  margin-top:0!important;
  margin-bottom:0!important;
}
.page-title-row,
.course-header,
.lesson-reader-head,
.moodle-heading,
.vial-home-heading{
  margin-top:var(--vial-block-gap)!important;
  margin-bottom:var(--vial-block-gap)!important;
}
.moodle-tabs{
  margin-top:0!important;
  margin-bottom:var(--vial-block-gap)!important;
}
.lesson-progress-strip,
.lesson-page-nav,
.lesson-materials,
.lesson-page-editor-card,
.lesson-start-card,
.lesson-contents-card{
  margin-top:0!important;
  margin-bottom:var(--vial-block-gap)!important;
}
.form-actions,
.course-actions,
.lesson-actions{
  gap:8px!important;
}
body.with-sidebar:not(.moodle-home) .moodle-layout,
body.with-sidebar:not(.moodle-home):not(.sidebar-hidden) .moodle-layout.with-sidebar,
body.with-sidebar:not(.moodle-home).sidebar-hidden .moodle-layout.with-sidebar{
  display:block!important;
  width:min(1180px, calc(100vw - 36px))!important;
  max-width:1180px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:18px!important;
  padding-right:18px!important;
  grid-template-columns:none!important;
}
body.with-sidebar:not(.moodle-home) .main-content{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}
body.with-sidebar .right-sidebar.moodle-drawer,
body.with-sidebar .moodle-drawer.right-sidebar{
  position:fixed!important;
  right:0!important;
  left:auto!important;
  top:var(--vial-topbar-space,78px)!important;
  bottom:0!important;
  height:calc(100vh - var(--vial-topbar-space,78px))!important;
  width:320px!important;
  max-width:min(88vw,340px)!important;
  z-index:12000!important;
  transform:translateX(0)!important;
}
body.with-sidebar.sidebar-hidden .right-sidebar.moodle-drawer,
body.with-sidebar.sidebar-hidden .moodle-drawer.right-sidebar{
  transform:translateX(105%)!important;
}
body.with-sidebar:not(.sidebar-hidden) .sidebar-tab{
  display:none!important;
}
body.with-sidebar.sidebar-hidden .sidebar-tab{
  display:flex!important;
  right:0!important;
}

/* Lesson page: full-width reading area, course navigation in a left overlay only. */
.lesson-page-view .lesson-reading-layout{
  display:block!important;
  position:relative!important;
  max-width:1180px!important;
  width:100%!important;
  margin:0 auto 18px!important;
  grid-template-columns:none!important;
}
.lesson-page-view .lesson-reading-main{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  grid-column:auto!important;
  grid-row:auto!important;
}
.lesson-page-view .lesson-reader-card{
  width:100%!important;
  min-height:520px;
}
.lesson-page-view .lesson-left-tab,
.course-view .course-left-tab{
  position:fixed!important;
  left:0!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:13020!important;
  width:36px!important;
  height:56px!important;
  border:1px solid #d8e3ea!important;
  border-left:0!important;
  border-radius:0 22px 22px 0!important;
  background:#eef7f7!important;
  color:#00756f!important;
  box-shadow:2px 2px 12px rgba(15,23,42,.10)!important;
  cursor:pointer!important;
  font-size:20px!important;
}
.lesson-page-view .lesson-reading-layout.lesson-nav-open .lesson-left-tab,
.course-view .course-outline-shell.course-outline-open .course-left-tab{
  display:none!important;
}
.lesson-page-view .lesson-page-toc,
.lesson-page-view .lesson-course-nav{
  position:fixed!important;
  left:0!important;
  width:340px!important;
  max-width:min(88vw,340px)!important;
  background:#fff!important;
  border-color:#d8e3ea!important;
  box-shadow:8px 0 24px rgba(15,23,42,.10)!important;
  z-index:13010!important;
  transform:translateX(-105%)!important;
  transition:transform .22s ease!important;
}
.lesson-page-view .lesson-page-toc{
  top:var(--vial-topbar-space,78px)!important;
  height:44vh!important;
  max-height:none!important;
  overflow:auto!important;
  border-radius:0 10px 0 0!important;
  padding:12px!important;
}
.lesson-page-view .lesson-course-nav{
  top:calc(var(--vial-topbar-space,78px) + 44vh)!important;
  bottom:0!important;
  max-height:none!important;
  overflow:auto!important;
  border-top:0!important;
  border-radius:0 0 10px 0!important;
  padding:12px!important;
}
.lesson-page-view .lesson-reading-layout.lesson-nav-open .lesson-page-toc,
.lesson-page-view .lesson-reading-layout.lesson-nav-open .lesson-course-nav{
  transform:translateX(0)!important;
}
.lesson-page-view .lesson-course-nav .lesson-page-nav{
  display:none!important;
}
.lesson-page-view .lesson-reader-nav{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin:12px 0 0!important;
  padding:10px!important;
  background:#fff!important;
  border:1px solid #d8e3ea!important;
  border-radius:10px!important;
}
.lesson-page-view .lesson-reader-nav a,
.lesson-page-view .lesson-reader-nav span{
  min-width:120px;
}
.lesson-page-view .course-element-nav-list{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:8px!important;
}
.lesson-page-view .course-element-nav-list h3{
  margin:0 0 8px!important;
  font-size:16px!important;
}

/* Course page: left overlay with course outline only on course pages. */
.course-view .course-left-drawer{
  position:fixed!important;
  left:0!important;
  top:var(--vial-topbar-space,78px)!important;
  bottom:0!important;
  width:340px!important;
  max-width:min(88vw,340px)!important;
  z-index:13010!important;
  overflow:auto!important;
  background:#fff!important;
  border-right:1px solid #d8e3ea!important;
  box-shadow:8px 0 24px rgba(15,23,42,.10)!important;
  transform:translateX(-105%)!important;
  transition:transform .22s ease!important;
  padding:12px!important;
}
.course-view .course-outline-shell.course-outline-open .course-left-drawer{
  transform:translateX(0)!important;
}
.course-drawer-close-row{
  display:flex;
  justify-content:flex-end;
  margin-bottom:6px;
}
.course-drawer-close{
  width:32px;
  height:32px;
  border:1px solid #d8e3ea;
  border-radius:8px;
  background:#fff;
  color:#334155;
  cursor:pointer;
  font-size:20px;
  line-height:1;
}
.course-left-drawer h2{
  margin:0 0 12px;
  font-size:18px;
  color:#0f172a;
}
.course-outline-list{
  display:grid;
  gap:6px;
}
.course-outline-section{
  display:block;
  margin-top:8px;
  padding:8px 10px;
  border-radius:8px;
  background:#f0fdfa;
  color:#00756f;
  font-weight:800;
  text-decoration:none;
}
.course-outline-item{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:8px;
  align-items:center;
  padding:8px 10px 8px 18px;
  color:#0f172a;
  text-decoration:none;
  border-radius:8px;
}
.course-outline-item:hover,
.course-outline-section:hover{
  background:#eef7f7;
}
.course-outline-item b{
  font-size:13px;
  line-height:1.25;
}

/* Larger, cleaner LMS activity icons. */
.activity-row{
  grid-template-columns:44px minmax(0,1fr) auto!important;
}
.activity-icon,
.builder-icon{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  border-radius:9px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid #d8e3ea!important;
  background:#fff!important;
  box-shadow:0 1px 3px rgba(15,23,42,.06)!important;
  position:relative!important;
}
.activity-icon .vial-activity-glyph{
  width:25px!important;
  height:25px!important;
  display:block!important;
  position:relative!important;
}
.activity-icon.lesson,
.builder-item[data-token^="lesson:"] .builder-icon{
  color:#b85f2f!important;
  background:#fff8f3!important;
  border-color:#f0c8ad!important;
}
.activity-icon.lesson .vial-activity-glyph:before,
.builder-item[data-token^="lesson:"] .builder-icon:before{
  content:""!important;
  position:absolute!important;
  left:6px!important;
  top:5px!important;
  width:17px!important;
  height:21px!important;
  border:2px solid #b85f2f!important;
  border-radius:4px!important;
  background:linear-gradient(90deg,#fff 0 48%,#fdebd7 48% 52%,#fff7ed 52% 100%)!important;
}
.activity-icon.lesson .vial-activity-glyph:after,
.builder-item[data-token^="lesson:"] .builder-icon:after{
  content:""!important;
  position:absolute!important;
  left:15px!important;
  top:7px!important;
  height:17px!important;
  border-left:2px solid #b85f2f!important;
}
.activity-icon.test,
.builder-item[data-token^="test:"] .builder-icon{
  color:#0d9488!important;
  background:#f0fdfa!important;
  border-color:#99f6e4!important;
}
.activity-icon.test .vial-activity-glyph:before,
.builder-item[data-token^="test:"] .builder-icon:before{
  content:""!important;
  position:absolute!important;
  left:6px!important;
  top:6px!important;
  width:20px!important;
  height:20px!important;
  border:2px solid #0d9488!important;
  border-radius:5px!important;
  background:#fff!important;
}
.activity-icon.test .vial-activity-glyph:after,
.builder-item[data-token^="test:"] .builder-icon:after{
  content:""!important;
  position:absolute!important;
  left:12px!important;
  top:12px!important;
  width:10px!important;
  height:6px!important;
  border-left:3px solid #0d9488!important;
  border-bottom:3px solid #0d9488!important;
  transform:rotate(-45deg)!important;
}
.builder-icon{
  font-size:0!important;
}
.course-builder-list .builder-item{
  cursor:grab!important;
}
.course-builder-list .builder-item:active{
  cursor:grabbing!important;
}
.course-builder-list .builder-actions,
.course-builder-list .builder-actions *{
  cursor:auto!important;
}
.course-builder-list .drag{
  width:34px!important;
  height:34px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:8px!important;
  background:#f1f5f9!important;
  color:#64748b!important;
  font-size:18px!important;
}
.course-outline-item{
  grid-template-columns:36px minmax(0,1fr)!important;
}

/* Course cover drop area: make drag-and-drop obvious and reliable visually. */
.course-cover-drop{
  min-height:122px!important;
  border:2px dashed #a7cfd1!important;
  border-radius:12px!important;
  background:#fbffff!important;
  padding:14px!important;
  cursor:pointer!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:6px!important;
  transition:border-color .15s, background .15s, box-shadow .15s!important;
}
.course-cover-drop.dragover,
.course-cover-drop.has-file{
  border-color:#0d9488!important;
  background:#f0fdfa!important;
  box-shadow:0 0 0 3px rgba(13,148,136,.12)!important;
}
.course-cover-drop b{
  color:#00756f!important;
}
.course-cover-drop span{
  color:#475569!important;
  line-height:1.35!important;
}

@media(max-width:980px){
  body.with-sidebar:not(.moodle-home) .moodle-layout{
    width:100%!important;
    max-width:100%!important;
  }
  .lesson-page-view .lesson-page-toc,
  .lesson-page-view .lesson-course-nav,
  .course-view .course-left-drawer{
    top:0!important;
  }
  .lesson-page-view .lesson-page-toc{height:44vh!important}
  .lesson-page-view .lesson-course-nav{top:44vh!important}
}