/* Course Page Styles */

/* Hero Section - Enhanced */
.course-hero {
  background: linear-gradient(135deg, rgba(99,102,241,.08) 0%, rgba(139,92,246,.08) 100%);
  padding: 120px 0 60px;
  position: relative;
  overflow: hidden;
}

.course-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%236366f1' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

/* Stat Boxes in Hero */
.stat-box {
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.stat-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(99,102,241,.03) 0%, rgba(139,92,246,.03) 100%);
  opacity: 0;
  transition: opacity .3s;
}

.stat-box:hover::before {
  opacity: 1;
}

.stat-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(99,102,241,.15);
}

.stat-box .stat-value {
  background: linear-gradient(135deg, var(--bs-primary), var(--bs-info));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Stat Divider */
.stat-divider {
  width: 1px;
  height: 40px;
  background: var(--bs-border-color);
  align-self: center;
}

/* Achievements Grid */
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 16px;
  background: rgba(99,102,241,.02);
  border-radius: 12px;
  border: 1px dashed var(--bs-border-color);
}

.achievement-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 8px;
  border-radius: 10px;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: help;
  position: relative;
  background: rgba(99,102,241,.03);
  opacity: 0.4;
}

.achievement-item i {
  font-size: 1.5rem;
  color: var(--bs-secondary);
  transition: all .3s;
}

.achievement-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--bs-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.achievement-item.unlocked {
  opacity: 1;
  background: linear-gradient(135deg, rgba(255,193,7,.15) 0%, rgba(255,152,0,.15) 100%);
  animation: achievement-unlock .5s ease;
}

.achievement-item.unlocked i {
  color: var(--bs-warning);
  text-shadow: 0 0 10px rgba(255,193,7,.4);
}

.achievement-item.unlocked .achievement-label {
  color: var(--bs-warning);
}

@keyframes achievement-unlock {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* Module Cards */
.module-card {
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  border-left: 4px solid var(--bs-border-color);
  overflow: hidden;
}

.module-card:hover {
  border-left-color: var(--bs-primary);
  box-shadow: 0 10px 40px rgba(99,102,241,.15);
}

.module-card.completed {
  border-left-color: var(--bs-success);
}

.module-card.completed .card-header {
  background: rgba(25,135,84,.05);
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.module-header h4 {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Topic Items - Main trackable items */
.topic-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  margin: 4px 0;
  border-radius: 10px;
  transition: all .2s ease;
  gap: 12px;
  background: rgba(99,102,241,.02);
  border: 1px solid transparent;
}

.topic-item:hover {
  background: rgba(99,102,241,.08);
  border-color: rgba(99,102,241,.1);
}

.topic-item.completed {
  background: rgba(25,135,84,.05);
  border-color: rgba(25,135,84,.1);
}

.topic-item.completed .topic-text {
  color: var(--bs-success);
}

.topic-item.completed .topic-link {
  color: var(--bs-secondary);
}

.topic-link {
  color: var(--bs-body-color);
  text-decoration: none;
  flex: 1;
  transition: color .2s;
  font-weight: 500;
}

.topic-link:hover {
  color: var(--bs-primary);
}

/* Subtopic Items - Visual indicator only, no tracking */
.subtopic-item {
  display: flex;
  align-items: center;
  padding: 8px 16px 8px 56px;
  gap: 8px;
  transition: all .2s;
  position: relative;
}

.subtopic-item::before {
  content: '';
  position: absolute;
  left: 32px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--bs-border-color);
}

.subtopic-item:last-of-type::before {
  bottom: 50%;
}

.subtopic-item:hover {
  background: rgba(99,102,241,.03);
}

.subtopic-text {
  color: var(--bs-secondary);
  font-size: .875rem;
  display: flex;
  align-items: center;
}

.subtopic-text::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--bs-border-color);
  border-radius: 50%;
  margin-right: 10px;
  flex-shrink: 0;
}

/* Check Button - Modern style */
.check-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 2px solid var(--bs-border-color);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  position: relative;
}

.check-btn:hover {
  border-color: var(--bs-primary);
  background: rgba(99,102,241,.1);
  transform: scale(1.1);
}

.check-btn.checked {
  border-color: var(--bs-success);
  background: var(--bs-success);
  color: white;
}

.check-btn.checked:hover {
  background: #157347;
  border-color: #157347;
}

.check-btn i {
  font-size: 11px;
  opacity: 0;
  transition: all .2s;
  transform: scale(0.5);
}

.check-btn.checked i {
  opacity: 1;
  transform: scale(1);
}

/* Assignment Items */
.assignment-item {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(255,193,7,.08) 0%, rgba(255,152,0,.08) 100%);
  border-radius: 10px;
  margin-top: 12px;
  gap: 12px;
  transition: all .2s ease;
  border: 1px solid rgba(255,193,7,.15);
}

.assignment-item:hover {
  background: linear-gradient(135deg, rgba(255,193,7,.12) 0%, rgba(255,152,0,.12) 100%);
  transform: translateX(4px);
  box-shadow: 0 4px 15px rgba(255,193,7,.15);
}

.assignment-item.completed {
  background: linear-gradient(135deg, rgba(25,135,84,.08) 0%, rgba(32,168,103,.08) 100%);
  border-color: rgba(25,135,84,.15);
}

.assignment-item.completed .assignment-text {
  color: var(--bs-success);
}

.assignment-link {
  color: var(--bs-warning);
  text-decoration: none;
  flex: 1;
  font-weight: 600;
  transition: color .2s;
}

.assignment-link:hover {
  color: #e5a200;
}

.assignment-item.completed .assignment-link {
  color: var(--bs-success);
}

/* Progress Indicator */
.progress-indicator {
  width: 100%;
  height: 10px;
  background: var(--bs-border-color);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #a855f7);
  background-size: 200% 100%;
  border-radius: 5px;
  transition: width .5s cubic-bezier(0.4, 0, 0.2, 1);
  animation: shimmer 2s infinite linear;
}

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

/* Sidebar */
.sidebar {
  position: sticky;
  top: 100px;
}

.toc-link {
  color: var(--bs-secondary);
  text-decoration: none;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  font-size: .875rem;
  border-left: 3px solid transparent;
  transition: all .2s;
  border-radius: 0 8px 8px 0;
  margin-bottom: 2px;
}

.toc-link:hover {
  color: var(--bs-primary);
  border-left-color: var(--bs-primary);
  background: rgba(99,102,241,.08);
}

.toc-link.active {
  color: var(--bs-primary);
  border-left-color: var(--bs-primary);
  background: rgba(99,102,241,.1);
  font-weight: 500;
}

.toc-link.module-complete {
  color: var(--bs-success);
  border-left-color: var(--bs-success);
}

.toc-link .toc-check {
  margin-left: auto;
  color: var(--bs-success);
  opacity: 0;
  transition: all .2s;
  transform: scale(0);
}

.toc-link.module-complete .toc-check {
  opacity: 1;
  transform: scale(1);
}

/* Progress Stats */
.progress-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.stat-item {
  text-align: center;
  padding: 16px 12px;
  background: linear-gradient(135deg, rgba(99,102,241,.08) 0%, rgba(139,92,246,.08) 100%);
  border-radius: 12px;
  border: 1px solid rgba(99,102,241,.1);
}

.stat-item .stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-item .stat-label {
  font-size: .75rem;
  color: var(--bs-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* Reset Button */
.reset-btn {
  font-size: .8rem;
  opacity: 0.6;
  transition: all .2s;
}

.reset-btn:hover {
  opacity: 1;
  color: var(--bs-danger) !important;
}

/* Module Progress in Header */
.module-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  color: var(--bs-secondary);
  background: rgba(99,102,241,.05);
  padding: 6px 12px;
  border-radius: 20px;
}

.module-progress .progress-text {
  font-weight: 600;
  color: var(--bs-body-color);
}

.module-progress .mini-progress {
  width: 60px;
  height: 6px;
  background: var(--bs-border-color);
  border-radius: 3px;
  overflow: hidden;
}

.module-progress .mini-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 3px;
  transition: width .3s ease;
}

.module-card.completed .module-progress .mini-progress-fill {
  background: var(--bs-success);
}

/* Progress Card Enhancement */
#progressCard {
  border: 1px solid rgba(99,102,241,.15);
}

#progressCard .text-center i {
  background: linear-gradient(135deg, rgba(99,102,241,.1) 0%, rgba(139,92,246,.1) 100%);
  padding: 20px;
  border-radius: 50%;
}

/* Completion celebration animation */
@keyframes celebrate {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.module-card.just-completed {
  animation: celebrate 0.5s ease;
}

/* Section Icons */
.section-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--bs-primary), var(--bs-info));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.section-icon i {
  font-size: 1.5rem;
  color: white;
}

/* Sidebar Icons */
.sidebar-icon {
  width: 32px;
  height: 32px;
  background: rgba(99,102,241,.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-icon i {
  font-size: 1rem;
  color: var(--bs-primary);
}

/* Help Icon Wrapper */
.help-icon-wrapper {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(139,92,246,.15));
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.help-icon-wrapper i {
  font-size: 2rem;
  color: var(--bs-primary);
}

/* Learning Objectives */
.learning-objectives {
  list-style: none;
  padding: 0;
  margin: 0;
}

.learning-objectives li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(99,102,241,.08);
  transition: all .2s;
}

.learning-objectives li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.learning-objectives li:hover {
  padding-left: 8px;
}

.learning-objectives i {
  font-size: 1.1rem;
  margin-top: 2px;
  flex-shrink: 0;
  transition: transform .2s;
}

.learning-objectives li:hover i {
  transform: scale(1.1);
}

.learning-objectives span {
  flex: 1;
  color: var(--bs-body-color);
  line-height: 1.6;
  font-size: 0.95rem;
}

/* Enhanced Progress Stats for Hero Card */
.progress-stats {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0;
  margin-bottom: 20px;
  align-items: center;
}

.stat-item {
  text-align: center;
  padding: 16px 12px;
  background: rgba(99,102,241,.03);
  border-radius: 10px;
  transition: all .3s;
}

.stat-item:hover {
  background: rgba(99,102,241,.08);
  transform: translateY(-2px);
}

/* Improved Cards */
.glass-card {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(99,102,241,.12);
  border-color: rgba(99,102,241,.2);
}

/* Sidebar Improvements */
.sidebar {
  position: sticky;
  top: 100px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .module-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .module-progress {
    width: 100%;
    justify-content: space-between;
  }
  
  .subtopic-item {
    padding-left: 40px;
  }
  
  .subtopic-item::before {
    left: 24px;
  }
  
  .achievements-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 12px;
  }
  
  .achievement-item {
    padding: 8px 4px;
  }
  
  .achievement-item i {
    font-size: 1.2rem;
  }
  
  .achievement-label {
    font-size: 0.6rem;
  }
  
  .stat-box {
    margin-bottom: 0.75rem;
  }
}