/**
 * @file
 * Styles for course/lesson pages layout.
 */

/* Course layout wrapper */
.course-layout {
  width: 100%;
  max-width: 100%;
}

.course-main-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* 3-column grid layout */
.course-content-wrapper {
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  gap: 2rem;
  align-items: start;
}

/* Main content area */
.course-content-main {
  min-width: 0; /* Prevent grid blowout */
  background: #ffffff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Left sidebar - Navigation */
.course-sidebar {
  position: sticky;
  top: 2rem;
  background: #ffffff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}

/* Right sidebar - Additional blocks */
.course-sidebar-secondary {
  position: sticky;
  top: 2rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.course-sidebar-secondary > .block {
  background: #ffffff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Action buttons area */
.course-actions {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 2px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
  .course-content-wrapper {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Left sidebar becomes top on tablet */
  .course-sidebar {
    position: static;
    max-height: none;
    order: -1; /* Show first */
  }

  /* Hide right sidebar on tablet */
  .course-sidebar-secondary {
    display: none;
  }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  .course-main-wrapper {
    padding: 1rem;
  }

  .course-content-main {
    padding: 1.5rem;
  }

  .course-sidebar {
    padding: 1rem;
  }

  .course-actions {
    flex-direction: column;
  }
}

/* Override LMS navigation component to match theme */
.lms-course-navigation-container {
  background: #ffffff !important;
  padding: 1.5rem !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.lms-course-navigation-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: #333 !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 2px solid #0d75a3 !important;
}

/* Progress bar */
.lms-progress-container {
  margin-bottom: 1.5rem !important;
  padding: 1rem !important;
  background: #f8f9fa !important;
  border-radius: 8px !important;
  border-left: 4px solid #0d75a3 !important;
}

.lms-progress-text {
  color: #0d75a3 !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  margin-bottom: 0.75rem !important;
  text-align: left !important;
}

.lms-progress-bar {
  height: 10px !important;
  background-color: #e9ecef !important;
  border-radius: 5px !important;
  overflow: hidden !important;
}

.lms-progress-fill {
  background: linear-gradient(90deg, #0d75a3 0%, #0a8ec4 100%) !important;
  height: 100% !important;
  border-radius: 5px !important;
  transition: width 0.5s ease !important;
}

/* Lesson items (accordions) */
.lms-course-navigation-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

/* Lesson item styling */
.lms-lesson-item {
  border: 2px solid #e9ecef !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
}

.lms-lesson-item:hover {
  border-color: #0d75a3 !important;
  box-shadow: 0 2px 8px rgba(13, 117, 163, 0.1) !important;
}

/* Lesson header (accordion toggle) */
.lms-lesson-item__header {
  padding: 1rem !important;
  background: #f8f9fa !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: background-color 0.2s ease !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
  color: #333 !important;
}

.lms-lesson-item__header:hover {
  background: #e9ecef !important;
}

/* Active/current lesson */
.lms-lesson-item--active,
.lms-lesson-item--current {
  border-color: #0d75a3 !important;
  background: #f0f8fc !important;
}

.lms-lesson-item--active .lms-lesson-item__header,
.lms-lesson-item--current .lms-lesson-item__header {
  background: #e6f4fa !important;
  color: #0d75a3 !important;
  font-weight: 600 !important;
}

/* Lesson content (activities list) */
.lms-lesson-item__content {
  padding: 0 !important;
  background: #ffffff !important;
  margin: 0 !important;
}

.lms-lesson-details {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Activity items inside lesson */
.lms-activity-item {
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid #f0f0f0 !important;
  transition: background-color 0.2s ease !important;
  font-size: 0.9rem !important;
  color: #555 !important;
}

.lms-activity-item:last-child {
  border-bottom: none !important;
}

.lms-activity-item:hover {
  background: #f8f9fa !important;
}

.lms-activity-item--active,
.lms-activity-item--current {
  background: #e6f4fa !important;
  color: #0d75a3 !important;
  font-weight: 600 !important;
  border-left: 4px solid #0d75a3 !important;
  padding-left: calc(1rem - 4px) !important;
}

/* Status icons */
.lms-lesson-item__icon,
.lms-activity-item__icon {
  margin-right: 0.5rem !important;
  font-size: 1rem !important;
}

/* Completed status */
.lms-lesson-item--completed .lms-lesson-item__icon,
.lms-activity-item--completed .lms-activity-item__icon {
  color: #28a745 !important;
}

/* In progress status */
.lms-lesson-item--in-progress .lms-lesson-item__icon,
.lms-activity-item--in-progress .lms-activity-item__icon {
  color: #0d75a3 !important;
}

/* Locked status - lessons avec accès refusé par lms_access_control */

.lms-lesson-item--not-started:not(.lms-lesson-item--current) {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.lms-lesson-item--not-started:not(.lms-lesson-item--current):hover {
  border-color: #e9ecef !important;
  box-shadow: none !important;
}

.lms-lesson-item--not-started:not(.lms-lesson-item--current) .lms-lesson-header {
  cursor: not-allowed !important;
}

.lms-lesson-item--not-started:not(.lms-lesson-item--current) .lms-lesson-header:hover {
  background: #f8f9fa !important;
}