/* Admin course manager: Курстар → курс → бөлімдер → сабақтар */
.course-grid-admin {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.ca-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--test-line);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}
.ca-card.is-archived { opacity: 0.75; }
.ca-card-link { display: block; color: inherit; }
.ca-card-link:hover strong { color: var(--test-blue); }
.ca-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #eef0fb;
}
.ca-cover--empty {
  display: grid;
  place-items: center;
  color: #d4ff3a;
  background:
    linear-gradient(#ffffff12 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, #ffffff12 1px, transparent 1px) 0 0 / 22px 22px,
    #34409d;
}
.ca-cover--empty svg { width: 44px; height: 44px; stroke-width: 1.8; }
.ca-card-body { display: grid; gap: 4px; padding: 14px 16px 6px; }
.ca-card-body strong { font-size: 17px; overflow-wrap: anywhere; }
.ca-card-body small { color: var(--test-muted); font-size: 13px; }
.ca-card-text {
  display: -webkit-box;
  margin-top: 4px;
  color: var(--test-muted);
  font-size: 13px;
  line-height: 1.45;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ca-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding: 10px 16px 16px;
}
.course-order { display: inline-flex; gap: 4px; flex-shrink: 0; }
.course-order .test-icon-button:disabled { opacity: 0.3; cursor: default; }
.course-archive { margin-top: 28px; }
.course-archive > summary { margin-bottom: 14px; color: var(--test-muted); font-weight: 600; cursor: pointer; }

/* Course page */
.course-hero {
  display: grid;
  grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin: 8px 0 24px;
}
.course-hero-cover .ca-cover--large { border-radius: 18px; }
.course-hero-cover-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.course-upload { position: relative; cursor: pointer; }
.course-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.course-upload:focus-within { outline: 3px solid #959ee0; outline-offset: 3px; }
.course-hero-text h1 { margin: 2px 0 8px; font-size: clamp(26px, 3vw, 34px); overflow-wrap: anywhere; }
.course-hero-text p { margin: 0 0 6px; line-height: 1.5; }
.course-hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }

.course-section { margin-bottom: 16px; }
.course-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.course-section-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.course-section-head .test-menu { margin-left: 0; }
.course-section-index {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  height: 32px;
  border-radius: 10px;
  background: #34409d;
  color: #d4ff3a;
  font-weight: 700;
}
.course-lessons { display: grid; gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; }
.course-lesson {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--test-line);
  border-radius: 14px;
  background: #fbfbff;
}
.course-lesson .course-order { flex-direction: column; }
.course-lesson .course-order .test-icon-button { width: 30px; height: 24px; }
.course-lesson-main { flex: 1; min-width: 0; display: grid; gap: 6px; }
.course-lesson-main > a { font-weight: 600; color: var(--test-ink); overflow-wrap: anywhere; }
.course-lesson-main > a:hover { color: var(--test-blue); }
.course-lesson-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.course-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 99px;
  background: #eef0fb;
  color: var(--test-muted);
  font-size: 12px;
  font-weight: 600;
}
.course-chip svg { width: 13px; height: 13px; }
.course-chip.is-ok { background: #e3f5ec; color: #16704a; }
.course-chip.is-warn { background: #fff1dc; color: #87530c; }
.course-chip.is-open { background: #34409d; color: #fff; }
.course-chip.is-open svg { color: #d4ff3a; }
.course-chip.is-hidden { background: #fff4dc; color: #6f4a08; }
.course-empty { margin: 0 0 10px; color: var(--test-muted); font-size: 14px; }
.course-add-section { margin-top: 4px; }
.course-dialog textarea { width: 100%; resize: vertical; font: inherit; }

@media (max-width: 760px) {
  .course-hero { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .course-lesson { align-items: flex-start; }
}

/* Section tree: sub-sections sit inside their parent, a step to the right. */
.course-section--depth-2 { margin-left: 28px; border-left: 4px solid #d4ff3a; }
.course-section--depth-3 { margin-left: 56px; border-left: 4px solid #c9cdf0; }
.course-section--depth-2 .course-section-index, .course-section--depth-3 .course-section-index {
  flex-basis: auto;
  min-width: 32px;
  padding: 0 8px;
  background: #eef0fb;
  color: #34409d;
}
/* Lesson kinds: stop lesson (video + test) and analysis / extra lesson. */
.course-lesson.is-stop { border-left: 4px solid #34409d; }
.course-lesson.is-plain { border-left: 4px solid #d4ff3a; background: #fff; }
.course-chip.is-stop { background: #34409d; color: #fff; }
.course-chip.is-stop svg { color: #d4ff3a; }
.course-chip.is-plain { background: #f3ffd0; color: #435000; }
.course-chip.is-task { background: #e8eaff; color: #2a358f; }
.lesson-kind { display: grid; gap: 8px; margin: 4px 0 12px; padding: 0; border: 0; }
.lesson-kind legend { margin-bottom: 6px; font-weight: 600; }
.lesson-kind-option {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--test-line);
  border-radius: 12px;
  cursor: pointer;
}
.lesson-kind-option:has(input:checked) { border-color: #34409d; background: #f4f5ff; }
.lesson-kind-option input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: #34409d; }
.lesson-kind-option span { display: grid; gap: 2px; }
.lesson-kind-option small { color: var(--test-muted); font-size: 13px; line-height: 1.4; }
.lesson-task-text[hidden] { display: none !important; }
@media (max-width: 760px) {
  .course-section--depth-2 { margin-left: 12px; }
  .course-section--depth-3 { margin-left: 24px; }
}