/* src/courses/data-structures-algorithms/DataStructuresAlgorithms.css */
.course-overview { padding: 2rem; max-width: 1200px; margin: 0px auto; }
.course-overview-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 2px solid rgb(229, 231, 235); }
.course-overview-header h1 { font-size: 2.5rem; color: rgb(31, 41, 55); font-weight: 700; margin: 0px; }
.complete-btn { padding: 0.75rem 1.5rem; background-color: rgb(102, 126, 234); color: white; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 6px; cursor: pointer; font-size: 1rem; font-weight: 500; transition: 0.2s; white-space: nowrap; }
.complete-btn:hover:not(:disabled) { background-color: rgb(85, 104, 211); opacity: 0.9; }
.complete-btn.completed { background-color: rgb(16, 185, 129); cursor: default; }
.complete-btn:disabled { cursor: not-allowed; }
.course-overview-content { display: flex; flex-direction: column; gap: 3rem; }
.course-overview-content section { background: white; padding: 2rem; border-radius: 12px; border: 1px solid rgb(229, 231, 235); box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px; }
.course-overview-content h2 { font-size: 1.75rem; color: rgb(31, 41, 55); font-weight: 600; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 2px solid rgb(102, 126, 234); }
.course-description p { font-size: 1.1rem; color: rgb(75, 85, 99); line-height: 1.8; margin: 0px; }
.importance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.importance-item { padding: 1.5rem; background: rgb(249, 250, 251); border-radius: 8px; border-left: 4px solid rgb(102, 126, 234); }
.importance-item h3 { font-size: 1.25rem; color: rgb(31, 41, 55); margin-bottom: 0.75rem; font-weight: 600; }
.importance-item p { font-size: 1rem; color: rgb(107, 114, 128); line-height: 1.6; margin: 0px; }
.real-world-applications ul { list-style: none; padding: 0px; margin: 0px; }
.real-world-applications li { padding: 1rem; margin-bottom: 0.75rem; background: rgb(249, 250, 251); border-radius: 6px; border-left: 3px solid rgb(16, 185, 129); font-size: 1.05rem; color: rgb(55, 65, 81); line-height: 1.7; }
.real-world-applications li strong { color: rgb(31, 41, 55); font-weight: 600; }
.topics-list { display: flex; flex-direction: column; gap: 1.5rem; }
.topic-group { border: 1px solid rgb(229, 231, 235); border-radius: 8px; overflow: hidden; }
.topic-main { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem; background: white; border-bottom: 1px solid rgb(243, 244, 246); }
.topic-number { width: 40px; height: 40px; border-radius: 8px; background: rgb(102, 126, 234); color: white; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 600; flex-shrink: 0; }
.topic-info { flex: 1 1 0%; }
.topic-info h3 { font-size: 1.25rem; color: rgb(31, 41, 55); margin-bottom: 0.5rem; font-weight: 600; }
.topic-info p { font-size: 1rem; color: rgb(107, 114, 128); line-height: 1.6; margin: 0px; }
.subtopics-list { background: rgb(249, 250, 251); padding: 1rem 1.5rem 1rem 4rem; }
.subtopic-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; margin-bottom: 0.75rem; background: white; border-radius: 6px; border: 1px solid rgb(229, 231, 235); }
.subtopic-item:last-child { margin-bottom: 0px; }
.subtopic-number { width: 32px; height: 32px; border-radius: 6px; background: rgb(156, 163, 175); color: white; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 600; flex-shrink: 0; }
.subtopic-info { flex: 1 1 0%; }
.subtopic-info h4 { font-size: 1.05rem; color: rgb(55, 65, 81); margin-bottom: 0.375rem; font-weight: 500; }
.subtopic-info p { font-size: 0.95rem; color: rgb(107, 114, 128); line-height: 1.5; margin: 0px; }