.page-title { margin-bottom: .25rem; }
.subtitle { color: #6c757d; margin-bottom: 1.25rem; }
.summary-value { font-size: 1.75rem; font-weight: 700; }
.small-muted { font-size: .875rem; color: #6c757d; }

.app-header { z-index: 1030; }
.user-menu-dropdown {
  min-width: 250px;
  z-index: 1031;
}
.user-menu-trigger {
  max-width: min(55vw, 320px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-menu-logout {
  position: sticky;
  bottom: 0;
  background: #fff;
}
.sidebar-desktop { min-height: calc(100vh - 56px); position: sticky; top: 56px; }
.sidebar-shell { min-height: calc(100vh - 56px); }
.sidebar-link,
.sidebar-sublink,
.sidebar-toggle {
  border-radius: .5rem;
  color: #334155;
  margin-bottom: .25rem;
}
.sidebar-link.active,
.sidebar-sublink.active,
.sidebar-toggle.active {
  background: #e9f1ff;
  color: #0d6efd;
  font-weight: 600;
}
.sidebar-sublink { padding-left: 1rem; font-size: .9rem; }
.submenu { margin-left: .25rem; margin-bottom: .5rem; }

.sample-block { white-space: pre-wrap; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: .5rem; padding: 1rem; }
.answer-neutral,
.answer-correct,
.answer-student-wrong {
  border: 1px solid #dee2e6;
  border-radius: .5rem;
  padding: .5rem .75rem;
  margin-bottom: .5rem;
}
.answer-correct { background: #edfdf3; border-color: #abefc6; }
.answer-student-wrong { background: #fff1f3; border-color: #fda4af; }

.test-timer-sticky { position: sticky; top: 68px; z-index: 1020; }
.test-timer-progress { height: 1rem; }

.rendered-content h1,
.rendered-content h2,
.rendered-content h3 { margin-top: 1.25rem; }
.rendered-content pre { background: #f8f9fa; border-radius: .5rem; padding: .75rem; }
.rendered-content table { width: 100%; }

.kb-image {
  margin: 1rem 0;
  max-width: 100%;
  overflow: hidden;
}

.kb-image img {
  display: block;
  max-width: 100% !important;
  max-inline-size: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.kb-image figcaption {
  color: #6c757d;
  font-size: .875rem;
  margin-top: .35rem;
}

@media (max-width: 576px) {
  .user-menu-dropdown {
    min-width: 210px;
    max-width: calc(100vw - 1rem);
  }
}

.sidebar-desktop {
  width: 220px;
  max-width: 220px;
}

.learning-editor-shell {
  min-height: calc(100vh - 140px);
  overflow: visible;
}

.learning-editor-tabs {
  display: flex;
  gap: .5rem;
}

.learning-editor-pane {
  display: block;
  overflow: visible;
}

.learning-editor-shell .card-body {
  overflow: visible;
}

.learning-editor-scroll {
  max-height: none;
  overflow: visible;
}

.learning-markdown-source {
  min-height: 320px;
}

#quill-editor {
  min-height: 420px;
  max-height: calc(100vh - 320px);
  overflow-y: auto;
}

#quill-editor-wrap {
  width: 100%;
}

#quill-editor-wrap .ql-toolbar,
#quill-editor-wrap .ql-container {
  width: 100%;
  box-sizing: border-box;
}

#quill-editor-wrap .ql-container {
  height: auto;
}

#quill-editor-wrap .ql-editor {
  min-height: 420px;
  overflow-y: auto;
}

#quill-editor-wrap .ql-toolbar.ql-snow {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
}

.learning-topic-context {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  padding: .5rem .75rem;
  border: 1px solid #dee2e6;
  border-radius: .5rem;
  background: #fff;
  margin-bottom: .75rem;
}

.learning-title-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: flex-start;
}

.learning-title-main-row {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.learning-title-main-row .form-label {
  white-space: nowrap;
}

.learning-title-main-row .learning-title-input {
  width: min(50vw, 640px);
  flex: 0 0 min(50vw, 640px);
}

.learning-title-summary-row .learning-summary-dropdown {
  margin: 0;
}

.learning-title-summary-row .learning-summary-dropdown > summary {
  white-space: nowrap;
}

.learning-editor-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: #fff;
  border-top: 1px solid #dee2e6;
  padding: .75rem 1rem;
}

.learning-preview-scroll {
  max-height: calc(100vh - 240px);
  overflow-y: auto;
}

.learning-assets-panel {
  margin-top: .5rem;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: .5rem;
  padding: 1rem;
}

.learning-assets-dropdown > summary {
  cursor: pointer;
  font-weight: 600;
}

.learning-summary-dropdown > summary {
  cursor: pointer;
  font-weight: 600;
}

.learning-meta-row {
  display: flex;
  align-items: center;
  column-gap: 8ch;
  row-gap: .5rem;
  flex-wrap: wrap;
  white-space: nowrap;
  margin-top: 1rem;
  padding-top: .5rem;
  clear: both;
  position: relative;
  z-index: 1;
  background: #fff;
}

.learning-editor-actions .learning-meta-row {
  margin-top: 0;
  padding-top: 0;
  clear: none;
  background: transparent;
}

.page-meta-row {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(120px, 1fr);
  gap: 12px 16px;
  align-items: end;
  margin-top: 16px;
  clear: both;
}

.page-editor,
.ql-container {
  margin-bottom: 16px;
}

.learning-meta-status {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.learning-meta-status .form-select {
  min-width: 12rem;
  width: max-content;
}

.learning-meta-order {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.learning-meta-order .form-control,
.learning-order-input {
  width: calc(5ch + 2.25rem);
  min-width: calc(5ch + 2.25rem);
}

.department-create-form {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: nowrap;
}

.department-create-form .form-label {
  white-space: nowrap;
  flex: 0 0 auto;
}

.department-create-form .department-create-input {
  width: min(50vw, 640px);
  flex: 0 1 min(50vw, 640px);
}

.department-create-btn {
  white-space: nowrap;
  flex: 0 0 auto;
}

.topic-order-slug-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: nowrap;
}

.topic-inline-field {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.topic-inline-field .form-label {
  margin-bottom: 0;
  white-space: nowrap;
}

.topic-inline-field--order {
  flex: 0 0 auto;
}

.topic-inline-field--order .form-control {
  width: calc(5ch + 2.5rem);
  min-width: calc(5ch + 2.5rem);
}

.topic-inline-field--slug {
  flex: 1 1 auto;
}

@media (max-width: 991.98px) {
  .learning-editor-shell {
    min-height: auto;
  }

  .learning-editor-scroll,
  .learning-preview-scroll,
  #quill-editor {
    max-height: none;
  }

  .learning-editor-actions {
    position: static;
  }
}

@media (max-width: 575.98px) {
  .learning-title-summary-row {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
  }

  .learning-title-main-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: .25rem;
    align-items: start;
  }

  .learning-title-main-row .learning-title-input {
    width: 100%;
    flex: 1 1 auto;
  }

}