/* /static/css/public/courses.css */

/* --- Intro Blurb Section --- */
.blurb-headline {
  font-weight: 500;
  color: #424242; /* Dark grey for a strong but not harsh headline */
}

.blurb-text {
  font-size: 1.2rem;
  color: #757575; /* Softer grey for readability */
}

/* Style for the highlighted feature text */
.blurb-highlight {
  color: #F57C00; /* A strong, readable orange to match your theme */
  font-weight: 500; /* Makes the text slightly bolder */
}

/* Targets the divider specifically within the top banner */
#index-banner .divider {
  margin: 2rem 0; /* Adds vertical space around the divider */
}


/* --- Main Layout --- */
.main-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
  position: relative; /* Crucial for positioning the tree overlay */
}

.courses-card {
  width: 35%;
  min-width: 300px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.syllabi-card {
  position: absolute;
  top: 0;
  left: 38%;
  width: 60%;
  min-width: 300px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
}

/* --- Course List Styles --- */
.course-item {
  padding: 15px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
}

.course-item:hover {
  background-color: #e9e9e9;
}

.course-item.selected {
  background-color: #cce5ff;
  border-color: #007bff;
  font-weight: bold;
}

.course-item h5 {
  margin: 0 0 5px 0;
  font-size: 1.2rem;
  color: #333;
}

.course-item p {
  margin: 0;
  font-size: 0.9rem;
  color: #666;
}

/* --- Syllabi Display Styles --- */
.syllabi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.syllabi-header h4 {
  margin: 0;
  font-size: 1.3rem;
}

.close-btn {
  background: none;
  border: none;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
  color: #888;
  line-height: 1;
}

.close-btn:hover {
  color: #000;
}

.syllabus-item {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}
.syllabus-item:last-child {
  border-bottom: none;
}

.syllabus-name {
  font-weight: bold;
  color: #0056b3;
  cursor: pointer;
  padding: 5px;
  border-radius: 3px;
  transition: background-color 0.2s;
}

.syllabus-name:hover {
  text-decoration: underline;
  background-color: #f0f8ff;
}

.syllabus-name.selected {
  background-color: #0056b3;
  color: white;
  text-decoration: none;
}

.syllabus-item p {
  margin: 5px 0 0 5px;
  color: #555;
  font-size: 0.95rem;
}

/* --- Syllabus Tree Overlay Styles --- */
#syllabus-tree-container {
  position: absolute; /* Positioned relative to .main-content */
  background-color: #fdfdfd; /* Slightly off-white to stand out */
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow for overlay effect */
  z-index: 100; /* Ensures it lays on top of everything */
  padding: 20px;
  box-sizing: border-box; /* Include padding in width calculations */
  display: none; /* Initially hidden */
  /* No max-height or overflow properties */
}

.tree-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.tree-header h5 {
  margin: 0;
  font-size: 1.1rem;
  color: #333;
}

/* --- Tree Internals --- */
.syllabus-tree {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

.syllabus-tree li {
  padding-left: 20px;
  position: relative;
}

/* Lines for visual hierarchy */
.syllabus-tree li::before,
.syllabus-tree li::after {
  content: '';
  position: absolute;
  left: 0;
}
.syllabus-tree li::before {
  border-left: 1px solid #ccc;
  height: 100%;
  top: 0;
  width: 1px;
}
.syllabus-tree li:last-child::before {
  height: 18px;
}
.syllabus-tree li::after {
  border-bottom: 1px solid #ccc;
  height: 1px;
  top: 17px;
  width: 15px;
}

.tree-item {
  padding: 5px;
}

.tree-toggle {
  cursor: pointer;
  position: relative;
  padding-left: 18px;
}

/* Caret for expand/collapse */
.tree-toggle::before {
  content: '►'; /* Collapsed state */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8em;
  transition: transform 0.2s ease;
}

li.collapsed > .tree-toggle::before {
  transform: translateY(-50%) rotate(0deg);
}

li.collapsed > .tree-children {
  display: none;
}

/* Expanded state */
li:not(.collapsed) > .tree-toggle::before {
  transform: translateY(-50%) rotate(90deg);
}

/* --- Common Utility Styles --- */
.loader, .error, .no-syllabi {
  text-align: center;
  padding: 20px;
  font-size: 1.1rem;
  color: #777;
}

.error {
    color: #d9534f;
}