/* @import url('http://example.com/example_style.css'); */
@import url("https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css");

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/
.kwaray-portal {
  color: #232f3e;
  display: flex;
  flex-direction: row;
  min-height: 100vh;
  /* gap: 20px; */
}

.kwaray-portal .right_column-row-0-max-width-section-centering > .row-fluid {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.kwaray-portal__off-canvas {
  position: relative;
  display: flex;
  flex-direction: row;
  height: 100%;
  background-color: #fff;
  z-index: 9999;
  transition: 0.5s;
}

/*.kwaray-portal__off-canvas.off-canvas {
  left: -330px;
  transition: 0.5s;
}*/

.user-sidebar {
  position: relative;
  z-index: 100;
}

.kwaray-portal__off-canvas-content {
  width: 240px;
  padding: 20px 0 0;
}

.kwaray-portal__off-canvas-content .user-badge {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: calc(100vh - 130px);
}

.kwaray-portal__off-canvas-content .user-badge .user-badge__content {
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.kwaray-portal__off-canvas-content .user-badge .user-name {
  margin: 0 0 20px;
}

.kwaray-portal__off-canvas-content .user-badge .user-name a {
  position: relative;
  z-index: 100;
  padding: 10px;
  display: block;
  text-decoration: none;
  color: #009345;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.kwaray-portal__off-canvas-content .user-badge .user-name a i {
  margin-left: 5px;
}

.kwaray-portal__off-canvas-content .user-badge .user-image {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background: #e6e6e6;
  overflow: hidden;
}

.kwaray-portal__off-canvas-content .user-badge .user-image a {
  background-size: cover;
  display: block;
  width: 100%;
  height: 100%;
}

.kwaray-portal__off-canvas-navigation {
  width: 100%;
}

.kwaray-portal__off-canvas-navigation ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.kwaray-portal__off-canvas-navigation ul a {
}

.kwaray-portal__off-canvas-navigation a,
.user-role-switcher a {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 5px;
  padding: 10px 20px;
  text-decoration: none;
  color: #232f3e;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.2px;
}

.kwaray-portal__off-canvas-navigation a i,
.user-role-switcher a i {
  width: 20px;
  text-align: center;
}

.kwaray-portal__off-canvas-navigation a:hover,
.kwaray-portal__off-canvas-navigation a.active,
.user-role-switcher a:hover,
.user-role-switcher a.active {
  background-color: #dfebe5;
}

.user-role-switcher {
  width: 100%;
  border-top: 1px solid #eaeaea;
}

.kwaray-portal-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-start;
  min-height: 100vh;
  width: 100%;
  align-items: center;
  position: relative;
  padding: 0 20px;
  margin: 120px auto;
}

.kwaray-portal-container .dnd-section > .row-fluid {
  max-width: 100%;
}

.kwaray-portal-container .dnd-section .dnd-column {
  padding: 0;
  margin: 0;
}

/* Make the toolbar a fixed column that's 26px wide INCLUDING padding */
.column.toolbar {
  border-right: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  display: flex; /* so children align nicely */
  align-items: flex-start;
  flex: 0 0 auto; /* don't grow, don't shrink, size to contents */
  width: auto; /* let contents dictate the width */
}

/* Used for areas like the welcome message or page headings */
.kwaray-portal-header {
  display: flex;
  /* max-width: 1500px; */
  width: 100%;
}

/*.kwaray-portal-container .kwaray-portal-header {
  padding: 0 40px;
}*/

.kwaray-portal-header .dnd-section,
.one-column-layout .dnd-section {
  padding: 0;
}

.kwaray-portal-header .dnd-section .dnd-column {
  padding: 0;
}

/* The content columns take the rest */
.one-column-layout {
  display: flex;
  gap: 20px;
  width: 100%;
  min-width: 0;
  width: 100%;
}

.one-column-layout .kwaray-portal-header {
  padding: 0;
  margin-left: 0;
}

.two-column-layout {
  display: flex;
  flex: 1 1 auto;
  gap: 20px;
  /* margin: auto; */
  min-width: 0;
  width: 100%;
}

.column {
  width: 100%;
}

.column-sticky {
  position: sticky;
  top: 130px;
}

/* Right column fixed to 350px, left flexes */
.column.left-column {
  flex: 1 1 auto;
  min-width: 0;
}
.column.right-column {
  flex: 0 0 350px;
}

/* Partner grid rows */
.partner-dashboard-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.partner-dashboard-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.partner-dashboard-row-4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

/* Partner dashboard stat blocks */
.data-box .title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  color: #5e5e5e;
  background-color: #fafafa;
}

.data-box .title-bar h2 {
  font-size: 18px;
  color: #5e5e5e;
  margin: 0;
}

.data-box .data-box-contents {
  padding: 20px;
}

.data-box .stat-value {
  font-size: 48px;
  color: #000716;
  margin: 0;
  font-weight: 500;
  letter-spacing: -3px;
}

.data-box .stat-label {
  font-size: 14px;
  color: #000716;
  line-height: 1em;
}

/* Hamburger */
.kwaray-portal__hamburger {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 10px;
  margin: 15px 5px 0;
  border-radius: 10px;
  /* remove width: 26px if you want natural expansion */
}

.kwaray-portal__hamburger:hover {
  cursor: pointer;
  background-color: #e6e6e6;
}

.kwaray-portal__hamburger-line {
  height: 3px;
  background: #000;
  width: 26px; /* each bar width */
}

/* Inputs */
/* Upload Form */
.upload-form {
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #f8f9fa;
}

.kwaray-portal .form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

.kwaray-portal .form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.kwaray-portal .form-group.full-width {
  flex: 1 1 100%;
}

.kwaray-portal .form-group label {
  font-weight: 500;
  font-size: 11px;
  color: #959595;
}

.kwaray-portal .form-input,
.kwaray-portal .form-select,
.kwaray-portal .form-textarea,
.kwaray-portal .upload-input {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 14px;
  min-width: 100%;
  min-height: 45px;
  padding: 10px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  width: 100%;
}

.kwaray-portal .form-input:focus,
.kwaray-portal .form-select:focus,
.kwaray-portal .form-textarea:focus {
  outline: none;
  border-color: #009345;
}

.kwaray-portal .form-textarea {
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
}

.kwaray-portal .form-input::placeholder,
.kwaray-portal .form-textarea::placeholder {
  color: #999;
  font-style: italic;
}

/* Required field styling */
.required-indicator {
  color: #dc3545;
  font-weight: bold;
  margin-left: 2px;
}

.form-input[required],
.form-select[required],
.form-textarea[required] {
  border-left: 3px solid red;
}

.form-input[required]:focus,
.form-select[required]:focus,
.form-textarea[required]:focus {
  border-left-color: red;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.form-input[required].error,
.form-select[required].error,
.form-textarea[required].error {
  border-left-color: #dc3545;
  border-color: #dc3545;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
}

.form-required-legend {
  font-size: 12px;
  color: #666;
  margin-bottom: 15px;
  font-style: italic;
}

.form-required-legend .required-indicator {
  color: #dc3545;
  font-weight: bold;
}

.form-group.has-error .required-indicator {
  color: #dc3545;
}

.form-group.has-error label {
  color: #dc3545;
}

.form-input.error,
.form-select.error,
.form-textarea.error {
  border-color: #dc3545;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
}

.form-error-message {
  color: #dc3545;
  font-size: 12px;
  margin-top: 4px;
  display: none;
}

.form-group.has-error .form-error-message {
  display: block;
}

/* Upload Dropzone */
.upload-dropzone-container {
  margin-top: 10px;
}

.upload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  border: 2px dashed #354133;
  border-radius: 8px;
  background-color: #f8f9fa;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 200px;
}

.upload-dropzone:hover {
  border-color: #354133;
  background-color: #dfebdd;
}

.upload-dropzone.dragover {
  border-color: 354133;
  background-color: #dfebdd;
}

.upload-dropzone.required {
  border-left: 3px solid #009345;
}

.upload-dropzone.required.error {
  border-left-color: #dc3545;
}

.upload-dropzone.has-files {
  border-color: #28a745;
  background-color: #d4edda;
}

.upload-dropzone.has-files .upload-primary {
  color: #155724;
}

.upload-input {
  display: none;
}

.upload-icon {
  margin-bottom: 16px;
  color: #009345;
}

.upload-text {
  text-align: center;
}

.upload-primary {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.upload-secondary {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.upload-size {
  font-size: 12px;
  color: #999;
}

/* Selected Files Preview */
.selected-files-preview {
  margin-top: 15px;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #f8f9fa;
}

.selected-files-preview h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #333;
}

.selected-files-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.selected-file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #e9ecef;
}

.selected-file-item:last-child {
  border-bottom: none;
}

.file-info-left {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.file-name {
  font-weight: 500;
  color: #333;
  margin-bottom: 2px;
}

.file-details {
  font-size: 12px;
  color: #666;
}

.remove-file-btn {
  background: none;
  border: none;
  color: #dc3545;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 12px;
  transition: background-color 0.2s ease;
}

.remove-file-btn:hover {
  background-color: #f8d7da;
}

/* Form Actions */
.kwaray-portal .form-group.form-actions {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #e0e0e0;
}

.upload-submit-btn:disabled {
  background-color: #6c757d;
  border: 1px solid #6c757d;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Upload Progress and Results */
.upload-progress {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #fff;
}

.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #e9ecef;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}

.progress-fill {
  height: 100%;
  background-color: #009345;
  border-radius: 10px;
  transition: width 0.3s ease;
}

.progress-text {
  text-align: center;
  color: #333;
}

.upload-results {
  margin-top: 20px;
}

.upload-success {
  padding: 15px;
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  border-radius: 4px;
  color: #155724;
  margin-bottom: 10px;
}

.upload-error {
  padding: 15px;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  margin-bottom: 10px;
}

.success-message,
.error-message {
  margin: 0;
  font-weight: 500;
}

.success-list,
.error-list {
  margin: 10px 0 0 0;
  padding-left: 20px;
}

.success-list li,
.error-list li {
  margin-bottom: 4px;
}

/* Upload Modal Styles */
.upload-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.upload-modal-content {
  position: relative;
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 800px;
  width: 90%;
  max-height: 90vh;
  overflow: hidden;
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.upload-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #354233;
}

.upload-modal .upload-modal-content .upload-modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  font-family: futura-pt, sans-serif !important;
}

.upload-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
  padding: 4px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.upload-modal-close:hover,
.upload-modal-close:active,
.upload-modal-close:focus {
  background-color: #fff;
  color: #354233;
  transform: translateY(0);
  padding: 4px;
  border-radius: 4px;
}

.upload-modal-body {
  padding: 30px;
  max-height: calc(90vh - 80px);
  overflow-y: auto;
}

.upload-modal-body::-webkit-scrollbar {
  width: 8px;
}

.upload-modal-body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.upload-modal-body::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.upload-modal-body::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Modal form adjustments */
.upload-modal .upload-form {
  margin-bottom: 20px;
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: transparent;
}

.upload-modal .upload-dropzone {
  min-height: 150px;
}

/* Responsive modal */
@media (max-width: 768px) {
  .upload-modal-content {
    width: 95%;
    margin: 20px;
    max-height: calc(100vh - 40px);
  }

  .upload-modal-header {
    padding: 15px 20px;
  }

  .upload-modal-body {
    padding: 20px;
    max-height: calc(100vh - 120px);
  }

  .upload-modal .form-row {
    flex-direction: column;
  }
}

/* Modules */
.kwaray-portal h1,
.kwaray-portal h2,
.kwaray-portal h3,
.kwaray-portal h4,
.kwaray-portal h5,
.kwaray-portal h6 {
  font-family: futura-pt, sans-serif !important;
}

/* Global Styles */
.kwaray-portal h1,
.kwaray-portal h2,
.kwaray-portal h3,
.kwaray-portal h4,
.kwaray-portal h5,
.kwaray-portal h6 {
  color: #232f3e;
  font-weight: 500;
  font-family: futura-pt, sans-serif !important;
  font-size: 48px;
  letter-spacing: -0.2px;
}

.info-heading {
  font-family: futura-pt, sans-serif !important;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.2px;
  line-height: 1.5em;
}

/* Container Components */
.kwaray-container {
  background: #ffffff;
  box-shadow: 0 0 14px 0 rgba(0, 7, 22, 0.14);
  border: none;
  border-radius: 8px;
  font-family: futura-pt, sans-serif !important;
}

/* Button components */
.kwaray-button {
  font-family: futura-pt, sans-serif !important;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  color: #354233;
  padding: 6px 22px;
  text-transform: none;
  letter-spacing: -0.2px;
}

.kwaray-button:hover,
.kwaray-button:active,
.kwaray-button:focus {
  padding: 6px 22px !important;
  transform: translateY(0);
  text-transform: none;
  font-weight: 500;
  letter-spacing: -0.2px;
}

.kwaray-button-hollow {
  border: 1px solid #009345;
  background: none;
  color: #354233;
  border-radius: 30px;
}

.kwaray-button-hollow:hover,
.kwaray-button-hollow:focus,
.kwaray-button-hollow:active {
  border: 1px solid #009345;
  background: #009345;
  color: #ffffff;
  border-radius: 30px;
}

.kwaray-button-filled {
  background-color: #ea6514;
  color: #ffffff;
  border-radius: 30px;
}

.kwaray-button-filled:hover {
  background-color: #ea6514;
  color: #ffffff;
}

.kwaray-button-no-border {
  background: none;
  border: none;
  color: #009345;
  padding: 0;
}

.kwaray-button-no-border:hover {
  color: #232f3e;
}

/* Task List */
.task-list {
  margin: 16px 0;
  padding: 20px;
}

.manage-courses .task-list,
.manage-lessons .task-list,
.manage-learners .task-list,
.manage-events .task-list,
.manage-assignments .task-list,
.manage-certificates .task-list {
  padding: 0;
}

.task-list h2 {
  margin-bottom: 0;
}

.task-list span {
  display: inline-block;
}

.task-list .stat-value {
  font-size: 48px;
  line-height: 48px;
  margin-bottom: 30px;
}

.task-list .stat-label {
  font-size: 16px;
  line-height: 16px;
}

.task-list .tasks-cta {
  margin-top: 16px;
  text-align: center;
}

/* Enhanced Task List Table Styling */
.sortable-header {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 25px !important; /* Ensure space for sort indicator */
}

.sortable-header:hover {
  background-color: #f8f9fa;
}

.sort-indicator {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
  transition: opacity 0.2s;
  color: #666;
}

.sortable-header:hover .sort-indicator {
  opacity: 1;
}

.sortable-header.sort-asc .sort-indicator i:before {
  content: "\f0de"; /* fa-sort-up */
  color: #c82333;
}

.sortable-header.sort-desc .sort-indicator i:before {
  content: "\f0dd"; /* fa-sort-down */
  color: #c82333;
}

.sortable-header.sort-asc .sort-indicator,
.sortable-header.sort-desc .sort-indicator {
  opacity: 1;
}

.task-filters {
}

/* Search row styling */
.search-row {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-bottom: 20px;
  justify-content: space-between;
}

.search-row .search-left-col {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.search-row .pagination {
  display: flex;
  flex-direction: row;
}

.secondary-pagination {
  justify-content: flex-end;
  padding: 0 20px;
}

.search-row .pagination .pagination-btn {
  background-color: transparent;
  border-radius: 0;
  color: #b7b7b7;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0;
  padding: 5px 10px;
  line-height: 20px;
  font-size: 14px;
  border-color: transparent;
}

.search-row .pagination .pagination-btn:hover {
  transform: translateY(0);
  cursor: pointer;
  color: #000716;
}

.search-row .pagination .pagination-btn.active {
  color: #000716;
}

.search-row .pagination .pagination-ellipsis {
  color: #b7b7b7;
}

.search-row label {
  display: none;
}

.search-group {
  display: flex;
  flex-direction: column;
  max-width: 400px;
}

.search-group label {
  font-weight: 600;
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 12px;
  color: #666;
  font-size: 14px;
  z-index: 1;
  pointer-events: none;
}

.search-group input[type="text"] {
  padding: 10px 12px 10px 40px; /* Add left padding to make room for the icon */
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: white;
  font-size: 14px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  width: 100%;
  min-width: 400px;
}

.search-group input[type="text"]:focus {
  outline: none;
  border-color: #009345;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.search-group input[type="text"]::placeholder {
  color: #999;
  font-style: italic;
}

/* Filter dropdowns row */
.filter-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 15px;
  align-items: center;
}

.filter-range-group {
  padding: 15px;
}

.filter-range-group label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: #333;
  margin-bottom: 12px;
  text-align: center;
}

.filter-range-inputs {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.filter-range-inputs input {
  flex: 1;
  max-width: 80px;
  padding: 8px 10px;
  border: 2px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
  background-color: white;
  transition: all 0.2s ease;
  text-align: center;
  font-weight: 500;
}

.filter-range-inputs input:focus {
  outline: none;
  border-color: #009345;
  box-shadow: 0 0 0 3px rgba(0, 147, 69, 0.15);
  background-color: #fcfffe;
}

.filter-range-inputs input:hover:not(:focus) {
  border-color: #009345;
  background-color: #f8fff9;
}

.filter-range-inputs span {
  color: #666;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 4px;
}

/* Enhanced styling for date inputs */
.filter-range-inputs input[type="date"] {
  min-width: 120px;
  max-width: 100%;
  width: 100%;
  position: relative;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.filter-range-inputs input[type="date"]::-webkit-calendar-picker-indicator {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23009345" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>')
    no-repeat;
  background-size: 16px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin-left: auto;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.filter-range-inputs
  input[type="date"]:hover::-webkit-calendar-picker-indicator,
.filter-range-inputs
  input[type="date"]:focus::-webkit-calendar-picker-indicator {
  opacity: 1;
}

/* Enhanced styling for number inputs (progress) */
.filter-range-inputs input[type="number"] {
  min-width: 70px;
  max-width: 80px;
  -moz-appearance: textfield; /* Remove spinner in Firefox */
}

.filter-range-inputs input[type="number"]::-webkit-outer-spin-button,
.filter-range-inputs input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Add percentage symbol for progress inputs */
.filter-dropdown[data-filter="progress"] .filter-range-inputs {
  position: relative;
}

.filter-dropdown[data-filter="progress"]
  .filter-range-inputs
  input[type="number"] {
  padding-right: 24px;
}

.filter-dropdown[data-filter="progress"]
  .filter-range-inputs
  input[type="number"]::after {
  content: "%";
  position: absolute;
  right: 8px;
  color: #666;
  pointer-events: none;
}

/* Style for activity dropdown options */
.filter-dropdown[data-filter="activity"] .filter-dropdown-option {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 4px;
  margin: 2px 8px;
}

.filter-dropdown[data-filter="activity"] .filter-dropdown-option:hover {
  background-color: #e8f5e8;
  transform: translateX(2px);
}

.filter-dropdown[data-filter="activity"]
  .filter-dropdown-option
  input[type="checkbox"] {
  margin-right: 12px;
  accent-color: #009345;
  transform: scale(1.1);
}

.filter-dropdown[data-filter="activity"] .filter-dropdown-option label {
  flex: 1;
  cursor: pointer;
  font-weight: 500;
  margin: 0;
  font-size: 14px;
  color: #333;
  transition: color 0.2s;
}

.filter-dropdown[data-filter="activity"] .filter-dropdown-option:hover label {
  color: #009345;
}

/* Ensure dropdown menus are wide enough for range inputs */
.filter-dropdown[data-filter="progress"] .filter-dropdown-menu,
.filter-dropdown[data-filter="enrollment"] .filter-dropdown-menu {
  min-width: 300px;
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border: 1px solid #e0e0e0;
  overflow: hidden;
}

.filter-dropdown-group .filter-dropdown[data-filter="enrollment"] label {
  margin: 0;
  padding: 0;
  text-align: left;
  width: 100%;
}

.filter-dropdown[data-filter="enrollment"] .filter-range-inputs {
  flex-direction: column;
  gap: 5px;
  max-width: 100%;
  width: 100%;
}

.filter-dropdown[data-filter="activity"] .filter-dropdown-menu {
  min-width: 250px;
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border: 1px solid #e0e0e0;
  overflow: hidden;
}

/* Enhanced dropdown content styling */
.filter-dropdown-content {
  padding: 4px 0;
  background: white;
}

/* Add visual feedback for empty inputs */
.filter-range-inputs input:placeholder-shown {
  background-color: #fafafa;
  border-style: dashed;
}

.filter-range-inputs input:not(:placeholder-shown) {
  background-color: white;
  border-style: solid;
  font-weight: 600;
  color: #009345;
}

.filter-dropdown-group {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex: 1; /* This makes each item expand to fill available width */
  min-width: 150px;
  border: 1px solid #009345;
  position: relative;
  border-radius: 10px;
  justify-content: space-between;
}

.filter-dropdown-group label {
  font-weight: 500;
  font-size: 14px;
  color: #000716;
  padding: 5px 10px;
}

.filter-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1; /* Add this to make the dropdown expand within its group */
  min-width: 0; /* Allow the dropdown to shrink and enable text truncation */
}

.filter-dropdown-trigger {
  align-items: center;
  background-color: #ecf6f1;
  cursor: pointer;
  display: flex;
  flex: 1; /* This makes it expand to fill remaining space */
  gap: 10px;
  justify-content: space-between;
  min-height: 40px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  border-left: 1px solid #009345;
  border-right: 1px solid #009345;
  padding: 5px 15px;
  min-width: 0; /* Allow shrinking below content size */
}

.filter-dropdown-trigger:hover {
  border-color: #009345;
}

.filter-dropdown-trigger.active {
  border-color: #009345;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.filter-selected-text {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: #000716;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 8px;
  min-width: 0; /* This is crucial for text truncation in flex containers */
  max-width: 100%; /* Ensure it doesn't exceed its container */
}

.filter-dropdown-trigger i {
  color: #009345;
  transition: transform 0.2s;
}

.filter-dropdown-trigger.active i {
  transform: rotate(180deg);
}

.filter-clear-btn {
  background: #ecf6f1;
  border: none;
  padding: 8px;
  border-top-right-radius: 9px;
  border-bottom-right-radius: 9px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  cursor: pointer;
  color: #414d5c;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; /* Fixed width */
  flex-shrink: 0; /* Prevent shrinking */
  min-height: 40px;
  opacity: 0.5; /* Make it semi-transparent when no filters are applied */
  transition:
    opacity 0.2s,
    background-color 0.2s;
}

.filter-clear-btn:hover,
.filter-clear-btn:focus,
.filter-clear-btn:active {
  background-color: #ea6514;
  color: #fff;
  opacity: 1;
  transform: translateY(0);
  padding: 8px;
  border-top-right-radius: 9px;
  border-bottom-right-radius: 9px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  outline: none;
}

.filter-clear-btn.has-filters {
  opacity: 1; /* Full opacity when filters are applied */
}

.filter-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: none;
  max-height: 250px;
  min-width: 300px;
  overflow-y: auto;
}

.filter-dropdown-menu.show {
  display: block;
}

.filter-dropdown-content {
  padding: 8px 0;
}

.filter-dropdown-option {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.filter-dropdown-option:hover {
  background-color: #f8f9fa;
}

.filter-dropdown-option input[type="checkbox"] {
  margin-right: 8px;
  accent-color: #009345;
}

.filter-dropdown-option label {
  flex: 1;
  cursor: pointer;
  font-weight: normal;
  margin: 0;
  font-size: 14px;
}

.filter-actions {
  display: flex;
  align-items: flex-end;
}

.clear-filters-btn {
  padding: 6px 22px;
  background-color: #fff;
  color: #009345;
  border: 1px solid #009345;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  height: 40px;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
}

.clear-filters-btn:hover,
.clear-filters-btn:focus,
.clear-filters-btn:active {
  color: #fff;
  background-color: #ea6514;
  transform: translateY(0);
  font-size: 14px;
  font-weight: 500;
  padding: 6px 22px;
  border: 1px solid #ea6514;
  outline: none;
  text-transform: none;
  letter-spacing: 0;
}

.filter-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #666;
}

.task-count {
  font-weight: 600;
  color: #333;
}

/* Library (V2) filter bar overrides — left-aligned, inline row */
.library-filters {
  width: 100%;
}

.library-filters .filter-row {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  max-width: 1200px;
}

.library-filters .filter-dropdown-group {
  flex: 0 1 auto;
  min-width: 220px;
}

.library-filters .search-group {
  max-width: none;
}

.library-filters .search-group label {
  display: none;
}

.library-filters .search-group input[type="text"] {
  min-width: 0;
  width: 240px;
}

.library-filters .filter-summary {
  margin-top: 12px;
}

/* Course elements */
.kwaray-portal .course-card {
  max-width: 500px;
}

.kwaray-portal .course-card .item-header {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
}

.kwaray-portal .course-card .item-section {
  padding: 10px;
}

.kwaray-portal .course-card h3 {
  font-size: 14px;
  margin: 0;
  line-height: 22px;
  font-weight: 700;
}

.kwaray-portal .course-card .item-meta {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.2px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 30px;
  color: #959595;
}

.kwaray-portal .course-card .item-meta-item {
  min-width: 50px;
}

.kwaray-portal .course-card .live-indicator {
  background-color: #fde75d;
  color: #231f20;
  padding: 2px 7px;
  border-radius: 10px;
}

.kwaray-portal .course-card .item-actions {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.kwaray-portal .course-card .course-progress,
.kwaray-portal .my-training-plan.header .course-progress {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
}

.kwaray-portal .course-card .course-progress .progress-bar,
.kwaray-portal .my-training-plan.header .progress-bar {
  height: 12px;
  background-color: #eeeeee;
  margin-bottom: 0;
}

.kwaray-portal .my-training-plan.header .progress-bar {
  width: calc(100% - 120px);
}

.kwaray-portal .course-card .course-progress .progress-status,
.kwaray-portal .my-training-plan.header .progress-status {
  font-size: 14px;
  font-weight: 600;
  color: #000000;
}

.kwaray-portal .course-card .course-progress .progress-filled,
.kwaray-portal .my-training-plan.header .progress-filled {
  height: 100%;
  background: #ffe224;
  background: linear-gradient(
    90deg,
    rgba(255, 226, 36, 1) 0%,
    rgba(62, 161, 5, 1) 100%
  );
}

.kwaray-portal .course-info-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}

.kwaray-portal .course-info-column .course-metadata {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: baseline;
  gap: 100px;
  margin-bottom: 30px;
  font-size: 14px;
}

.kwaray-portal .course-info-column .course-metadata strong {
  display: block;
  color: #959595;
  font-size: 11px;
  line-height: 22px;
  letter-spacing: -0.2px;
  font-weight: 500;
}

.kwaray-portal .course-info-column .course-description p {
  font-size: 14px;
  line-height: 22px;
}

.kwaray-portal .course-info-column .item-actions {
  margin-bottom: 15px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.kwaray-portal .upcoming-list-container {
  list-style-type: none;
  padding: 0;
}

.kwaray-portal .upcoming-list-container li + li {
  border-top: 1px solid #eee;
  margin-top: 30px;
  padding-top: 30px;
}

.kwaray-portal .course-overview-item {
  padding: 20px;
}

.kwaray-portal .upcoming-single-course-list {
  padding: 0;
  margin: 0;
}

.kwaray-portal .upcoming-single-course-list .upcoming-list-container {
  margin-bottom: 20px;
}

/* .kwaray-portal .my-training-plan.header {
  margin-bottom: 20px;
} */

.kwaray-portal .my-courses-list {
  margin-top: 30px;
}

.kwaray-portal .my-training-plan h2,
.kwaray-portal .my-courses-list h2 {
  font-size: 20px;
  text-transform: uppercase;
  line-height: 1em;
}

.kwaray-portal .course-overview-columns {
  display: flex;
  flex-direction: row;
  gap: 40px;
}

.kwaray-portal .course-overview-columns .course-card {
  width: 350px;
}

.kwaray-portal .course-overview-columns .course-card img {
  width: 100%;
}

/* Responsive design for filters */
@media (max-width: 768px) {
  .filter-row {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-dropdown-group {
    min-width: auto;
    margin-bottom: 15px;
  }

  .search-group {
    max-width: none;
  }

  .filter-actions {
    margin-top: 0;
  }

  .filter-summary {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
}

/* Multi-select styling improvements */
.filter-group select[multiple] option {
  padding: 4px 8px;
}

.filter-group select[multiple] option:checked {
  background-color: #009345;
  color: white;
}

/* Search input styling */
.filter-group input[type="text"]::placeholder {
  color: #999;
  font-style: italic;
}

/* Actual Table */

.task-list .task-list__table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14px;
  border-radius: 8px;
  overflow: hidden;
}

.task-list .task-list__table thead {
  color: #232f3e;
  border-bottom: 1px solid #e9ebed;
}

.task-list .task-list__table thead th {
  border: none;
  border-left: 1px solid #e9ebed;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.2px;
  line-height: 1.5em;
  padding: 10px 30px 10px 15px;
  text-align: left;
  vertical-align: middle;
}

.task-list .task-list__table thead th:first-child,
.task-list .task-list__table tbody td:first-child {
  width: 200px; /* Set your desired width */
  min-width: 200px; /* Prevent it from shrinking below this */
  max-width: 200px; /* Prevent it from growing beyond this */
}

.task-list .task-list__table tbody tr {
  border-bottom: 1px solid #e9ebed;
  transition: background-color 0.2s ease;
}

.task-list .task-list__table tbody tr:hover {
  background-color: #f8f9fa;
}

.task-list .task-list__table tbody tr:nth-child(even) {
}

.task-list .task-list__table tbody tr:nth-child(even):hover {
  background-color: #f0f0f0;
}

.task-list .task-list__table tbody td {
  padding: 12px;
  vertical-align: middle;
  border-right: none;
  border-top: none;
  border-bottom: none;
  border-left: none;
}

.task-list .task-list__table tbody td a {
  color: #009345;
  text-decoration: none;
  font-weight: 500;
}

.task-list .task-list__table tbody td:last-child {
  border-right: none;
}

/* Column-specific styling for tasks */
.task-list .task-list__table .assignment-name {
  font-weight: 600;
  color: #333;
}

.manage-courses .task-list .task-list__table .assignment-name a:hover {
  text-decoration: underline;
}

.manage-courses .task-list .actions a,
.manage-lessons .task-list .actions a,
.manage-learners .task-list .actions a {
  margin-right: 10px;
}

.manage-courses .task-list .actions a:hover {
  color: #fff;
}

/* Name column expands; all other columns shrink to content */
.manage-courses .task-list__table thead th:first-child,
.manage-courses .task-list__table tbody td:first-child,
.manage-lessons .task-list__table thead th:first-child,
.manage-lessons .task-list__table tbody td:first-child {
  width: auto;
  min-width: 0;
  max-width: none;
}
.manage-courses .task-list__table .assignment-name,
.manage-lessons .task-list__table .assignment-name {
  width: 100%;
}
.manage-courses .task-list__table th:not(:first-child),
.manage-courses .task-list__table td:not(:first-child),
.manage-lessons .task-list__table th:not(:first-child),
.manage-lessons .task-list__table td:not(:first-child) {
  width: 1%;
  white-space: nowrap;
}

.task-list .task-list__table .course-name {
  color: #009345;
  font-weight: 500;
}

.task-list .task-list__table .status {
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;
}

/* Status-specific colors */
.task-list .task-list__table .status.pending {
  background-color: #fff3cd;
  color: #856404;
}

.task-list .task-list__table .status.in-review {
  background-color: #cce5ff;
  color: #004085;
}

.task-list .task-list__table .status.complete {
  background-color: #d4edda;
  color: #155724;
}

.task-list .task-list__table .status.needs-attention {
  background-color: #f8d7da;
  color: #721c24;
}

.task-list .task-list__table .learner-name {
  color: #333;
  font-weight: 500;
}

.task-list .task-list__table .feedback {
  color: #666;
  font-style: italic;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-list .task-list__table .attachments {
  text-align: center;
  color: #009345;
  font-weight: 500;
}

.task-list .task-list__table .attachments-count {
  display: inline-block;
  background-color: #009345;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  text-align: center;
}

/* Empty state styling */
.task-list .task-list__table .task-list__empty {
  background-color: #f8f9fa;
  height: 40px;
  border: 1px solid #e9ecef;
  animation: pulse 1.5s ease-in-out infinite;
}

.task-list .task-list__table .empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #666;
  font-style: italic;
  background-color: #f8f9fa;
}

/* Loading and Error States */
.task-list .task-list__table .loading-state {
  text-align: center;
  padding: 60px 20px;
  color: #666;
  background-color: #f8f9fa;
}

.task-list .task-list__table .loading-text {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.task-list .task-list__table .error-state {
  text-align: center;
  padding: 60px 20px;
  color: #dc3545;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
}

.task-list .task-list__table .error-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.task-list .task-list__table .error-content i {
  font-size: 24px;
  color: #dc3545;
}

.task-list .task-list__table .error-message {
  font-size: 16px;
  font-weight: 500;
  color: #721c24;
}

.task-list .task-list__table .retry-btn {
  padding: 8px 16px;
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.task-list .task-list__table .retry-btn:hover {
  background-color: #c82333;
  transform: translateY(0);
}

/* Update existing loading row animation */
.task-list .task-list__table .loading-row td {
  animation: none; /* Remove the pulse animation from the old loading state */
}

/* Remove the old empty skeleton rows since we're showing a proper loading state */
.task-list .task-list__table .task-list__empty {
  display: none;
}

/* Responsive design */
@media (max-width: 768px) {
  .task-list .task-list__table {
    font-size: 12px;
  }

  .task-list .task-list__table thead th,
  .task-list .task-list__table tbody td {
    padding: 8px 6px;
  }

  .task-list .task-list__table .feedback {
    max-width: 100px;
  }

  .task-list .task-list__table .action-buttons {
    flex-direction: column;
    gap: 4px;
  }
}

/* Delete course button */
.delete-course-btn {
  background: #f8d7da;
  color: #721c24;
  border: none;
  border-radius: 20px;
  padding: 6px 22px !important;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: background 0.2s;
}
.delete-course-btn:hover {
  background: #f5c6cb;
  padding: 6px 22px !important;
}

/* Delete / remove confirmation modals */
#delete-course-modal,
#delete-lesson-modal,
#delete-assessment-modal,
#delete-event-modal,
#delete-cert-modal,
#remove-learner-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9000;
  align-items: center;
  justify-content: center;
}
#delete-course-modal.is-open,
#delete-lesson-modal.is-open,
#delete-assessment-modal.is-open,
#delete-event-modal.is-open,
#delete-cert-modal.is-open,
#remove-learner-modal.is-open {
  display: flex;
}

/* Manage learners column widths */
.manage-learners .task-list__table thead th:first-child,
.manage-learners .task-list__table tbody td:first-child {
  width: auto;
  min-width: 0;
  max-width: none;
}
.manage-learners .task-list__table .assignment-name {
  width: 100%;
}
.manage-learners .task-list__table th:not(:first-child),
.manage-learners .task-list__table td:not(:first-child) {
  width: 1%;
  white-space: nowrap;
}

/* Pagination bar */
.manage-learners__pagination {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}
.manage-learners__pagination-info {
  flex: 1;
  font-size: 13px;
  color: #666;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Manage Learners — role-segmented sections (mirrors manage-learners.png)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Top toolbar: global search · role chips · upload */
.manage-learners .ml-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.manage-learners .ml-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d6dadf;
  border-radius: 30px;
  padding: 8px 16px;
  background: #fff;
  min-width: 200px;
}
.manage-learners .ml-search--global {
  flex: 1 1 320px;
  max-width: 440px;
}
.manage-learners .ml-search__icon {
  flex-shrink: 0;
  color: #9aa1a9;
}
.manage-learners .ml-search__input {
  border: none;
  outline: none;
  background: none;
  font-family: inherit;
  font-size: 14px;
  color: #1a1a2e;
  width: 100%;
}
.manage-learners .ml-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.manage-learners .ml-chip {
  border: 1px solid #d6dadf;
  background: #fff;
  color: #354233;
  border-radius: 30px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}
.manage-learners .ml-chip:hover {
  border-color: #009345;
}
.manage-learners .ml-chip.is-active {
  background: #009345;
  border-color: #009345;
  color: #fff;
}
.manage-learners .ml-toolbar__upload {
  margin-left: auto;
  white-space: nowrap;
}

/* Section card */
.manage-learners .ml-section {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 24px;
  overflow: visible;
}
.manage-learners .ml-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid #eef0f2;
  flex-wrap: wrap;
}
.manage-learners .ml-section__heading {
  display: flex;
  align-items: center;
  gap: 10px;
}
.manage-learners .ml-section__title {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0;
}
.manage-learners .ml-section__count {
  background: #eef3ef;
  color: #009345;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 13px;
  font-weight: 600;
  min-width: 22px;
  text-align: center;
}
.manage-learners .ml-section__tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.manage-learners .ml-section__tools .ml-search {
  flex: 0 1 220px;
  min-width: 150px;
  padding: 6px 14px;
}

/* Per-section pager */
.manage-learners .ml-pager {
  display: flex;
  align-items: center;
  gap: 6px;
}
.manage-learners .ml-pager__btn {
  border: 1px solid #d6dadf;
  background: #fff;
  color: #354233;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  line-height: 1;
  font-size: 16px;
  cursor: pointer;
  font-family: inherit;
}
.manage-learners .ml-pager__btn:hover:not(:disabled) {
  border-color: #009345;
  color: #009345;
}
.manage-learners .ml-pager__btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.manage-learners .ml-pager__info {
  font-size: 12px;
  color: #666;
  min-width: 78px;
  text-align: center;
}

.manage-learners .ml-add-btn {
  white-space: nowrap;
}

/* Gear / column-settings menu */
.manage-learners .ml-gear {
  position: relative;
}
.manage-learners .ml-gear__btn {
  border: 1px solid #d6dadf;
  background: #fff;
  color: #5a6470;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.manage-learners .ml-gear__btn:hover {
  border-color: #009345;
  color: #009345;
}
.manage-learners .ml-gear__menu {
  position: absolute;
  right: 0;
  top: 38px;
  z-index: 50;
  min-width: 190px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 6px;
}
.manage-learners .ml-gear__menu[hidden] {
  display: none;
}
.manage-learners .ml-gear__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  font-size: 13px;
  color: #1a1a2e;
  border-radius: 4px;
  cursor: pointer;
}
.manage-learners .ml-gear__item:hover {
  background: #f4f6f7;
}

/* Section table */
.manage-learners .ml-table-wrap {
  overflow-x: auto;
  padding: 0 8px 8px;
}
.manage-learners .ml-table {
  margin: 0 !important;
}
.manage-learners .ml-muted {
  color: #aaa;
}
.manage-learners .ml-actions {
  text-align: right;
  white-space: nowrap;
}
.manage-learners .ml-remove-btn {
  padding: 5px 16px !important;
  font-size: 13px;
}
.manage-learners .ml-empty-row td {
  text-align: center;
  color: #888;
  font-style: italic;
  padding: 28px 12px !important;
}

/* Window pager (server-side, 100 contacts per page) */
.manage-learners .ml-window-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}
.manage-learners .ml-window-pager__info {
  font-size: 13px;
  color: #666;
}

@media (max-width: 768px) {
  .manage-learners .ml-section__head {
    align-items: flex-start;
  }
  .manage-learners .ml-toolbar__upload {
    margin-left: 0;
  }
}

/* Learner name → detail-page link */
.manage-learners .ml-name-link {
  color: #009345;
  text-decoration: none;
  font-weight: 600;
}
.manage-learners .ml-name-link:hover {
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Learner Detail — single-learner profile page (portal-partner-manage-learner)
   ═══════════════════════════════════════════════════════════════════════════ */

.learner-detail {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Profile header */
.learner-detail .ld-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
}
.learner-detail .ld-avatar {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #009345;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.learner-detail .ld-identity {
  flex: 1;
  min-width: 0;
}
.learner-detail .ld-name {
  font-size: 26px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 8px;
}
.learner-detail .ld-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  color: #555;
}
.learner-detail .ld-meta__item {
  color: #555;
  text-decoration: none;
}
.learner-detail .ld-meta a.ld-meta__item:hover {
  color: #009345;
  text-decoration: underline;
}
.learner-detail .ld-role-badge {
  background: #eef3ef;
  color: #009345;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.learner-detail .ld-header__actions {
  flex-shrink: 0;
}

/* Stat tiles */
.learner-detail .ld-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.learner-detail .ld-stat {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.learner-detail .ld-stat__label {
  font-size: 13px;
  color: #666;
}
.learner-detail .ld-stat__value {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a2e;
}

/* Sections */
.learner-detail .ld-section {
  padding: 24px 28px;
}
.learner-detail .ld-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.learner-detail .ld-section .cc-section-title {
  margin: 0;
}
.learner-detail .ld-count {
  background: #eef3ef;
  color: #009345;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 13px;
  font-weight: 600;
  margin-left: 6px;
}
.learner-detail .ld-courses-table {
  margin: 12px 0 0 !important;
}
.learner-detail .ld-courses-table thead th:first-child,
.learner-detail .ld-courses-table tbody td:first-child {
  width: auto;
  min-width: 0;
  max-width: none;
}

/* Progress bar */
.learner-detail .ld-progress {
  display: inline-block;
  vertical-align: middle;
  width: 120px;
  height: 8px;
  background: #eef0f2;
  border-radius: 6px;
  overflow: hidden;
}
.learner-detail .ld-progress__bar {
  height: 100%;
  background: #009345;
  border-radius: 6px;
}
.learner-detail .ld-progress__label {
  margin-left: 10px;
  font-size: 13px;
  color: #555;
  vertical-align: middle;
}

.learner-detail .ld-muted {
  color: #aaa;
}
.learner-detail .ld-empty {
  color: #888;
  font-style: italic;
  padding: 8px 0;
}
.learner-detail .ld-placeholder {
  opacity: 0.85;
}
.learner-detail .ld-notfound {
  text-align: center;
  padding: 48px 28px;
}
.learner-detail .ld-notfound h2 {
  margin: 0 0 12px;
  color: #1a1a2e;
}
.learner-detail .ld-notfound p {
  color: #666;
  margin: 0 0 20px;
}

@media (max-width: 768px) {
  .learner-detail .ld-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Loading animation */
@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #009345;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Stats Dashboard */
.stats-dashboard {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  gap: 60px;
  padding: 40px;
}

.stats-dashboard__item {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 200px;
}

.stats-dashboard__item h2 {
  margin-bottom: 0;
}

.stats-dashboard__item span {
  display: block;
}

.stats-dashboard__item .stat-value {
  font-size: 48px;
  line-height: 48px;
  margin-bottom: 30px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #009345;
}

.stats-dashboard__item .stat-label {
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
}

/* Loading spinner for stat values */
.stat-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #009345;
  border-radius: 50%;
  animation: statSpin 1s linear infinite;
  margin: 0 auto;
}

@keyframes statSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .stats-dashboard {
    flex-direction: column;
    gap: 30px;
    padding: 30px 40px;
  }

  .stats-dashboard__item .stat-value {
    font-size: 40px;
    line-height: 40px;
    min-height: 40px;
    margin-bottom: 20px;
  }

  .stat-spinner {
    width: 28px;
    height: 28px;
    border-width: 2px;
  }
}

@media (max-width: 480px) {
  .stats-dashboard {
    padding: 20px 30px;
  }

  .stats-dashboard__item .stat-value {
    font-size: 36px;
    line-height: 36px;
    min-height: 36px;
  }

  .stat-spinner {
    width: 24px;
    height: 24px;
  }
}

/* =============================================================================
   ASSIGNMENTS SECTION
   ============================================================================= */

#assignmentsContent {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px 0;
}

.assignments-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #666;
}

.assignments-empty-state h3 {
  margin-bottom: 10px;
  color: #333;
}

.assignment-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.2px;
}

.assignment-list-item .kwaray-container {
  padding: 20px;
}

.assignment-header-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.assignment-header-row .assignment-title {
  font-size: 20px;
  letter-spacing: -0.36px;
  line-height: 24px;
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
}

.assignment-header-row .assignment-title .assignment-score {
  background-color: #fde75d;
  display: inline-block;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 11px;
  color: #231f20;
  font-weight: 500;
}

.assignment-description-row {
  margin: 20px 0;
}

.assignment-description-row .assignment-description {
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.2px;
}

.assignment-meta-row {
  display: flex;
  flex-direction: row;
  gap: 60px;
  align-items: flex-start;
}

.assignment-meta-item {
  display: flex;
  flex-direction: column;
}

.assignment-meta-row span {
  display: block;
}

.assignment-meta-row .meta-label {
  font-size: 11px;
  font-weight: 500;
  color: #959595;
  letter-spacing: -0.2px;
}

.assignment-attachments-row {
  margin-top: 20px;
}

.attachments-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
}

.attachments-list .attachment-item {
  background-color: #ecf6f1;
  padding: 10px;
  text-decoration: none;
  border-radius: 5px;
  color: #000716;
  flex: 1 1 calc(33.333% - 15px); /* 33.333% width minus gap adjustment */
  min-width: 0; /* Prevent flex items from overflowing */
  max-width: calc(33.333% - 15px);
  box-sizing: border-box;
}

.attachments-list .attachment-item:hover {
  background-color: #deece6;
}

.attachments-list .attachment-item .attachment-name {
  display: flex;
  flex-direction: row;
  gap: 20px;
  font-size: 14px;
  font-weight: 500;
  justify-content: space-between;
  align-items: center;
  color: #000716;
}

.attachments-list .attachment-item .attachment-meta {
  display: flex;
  flex-direction: column;
  color: #5f6b7a;
  font-size: 12px;
}

.no-attachments p {
  font-size: 14px;
}

/* Tooltips */
.stats-dashboard__item .tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip-container i:hover {
  cursor: pointer;
}

.tooltip {
  visibility: hidden;
  opacity: 0;
  width: 200px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 12px;
  position: absolute;
  z-index: 1000;
  bottom: 130%;
  left: 50%;
  margin-left: -100px;
  transition:
    opacity 0.3s,
    visibility 0.3s;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.4;
}

.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

.tooltip-container:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

/* =============================================================================
   TABS COMPONENT
   ============================================================================= */

.co-tabs {
}

.co-tablist {
  display: flex;
  border-bottom: 1px solid #e9ebed;
  margin-bottom: 10px;
}

.co-tablist button {
  border-radius: 0;
  color: #232f3e;
  text-transform: none;
  text-decoration: none;
  font-weight: normal;
  letter-spacing: normal;
  padding: 15px 30px;
  line-height: 1.2em;
  font-size: 16px;
}

.co-tablist button:hover,
.co-tablist button:focus,
.co-tablist button:active {
  background-color: transparent;
  color: #009345;
  transform: translateY(0);
  outline: none;
  border-bottom: 2px solid #009345;
}

.co-tab {
  background-color: transparent;
  padding: 15px 40px;
  cursor: pointer;
  border-right: 1px solid #e9ebed;
}

.co-tab[aria-selected="true"] {
  color: #009345;
  transform: translateY(0);
  outline: none;
  border-bottom: 2px solid #009345;
}

.co-panels {
  padding: 0;
  min-height: 500px;
}

.co-panel {
  display: none;
}

.co-panel.is-active {
  display: block;
}

.course-about {
  margin-top: 20px;
  padding: 20px;
}

.course-about,
.course-about p {
  font-size: 14px;
  font-weight: 500;
}

.course-about h3 {
  font-size: 20px;
  letter-spacing: -0.36px;
  line-height: 24px;
}

.course-about .course-overview-meta-row {
  display: flex;
  flex-direction: row;
  gap: 60px;
}

.course-about .course-overview-meta-item {
  width: 200px;
}

.course-about .course-overview-meta-item span {
  color: #959595;
  font-size: 11px;
  letter-spacing: -0.2px;
}

/* =============================================================================
   LIBRARY SECTION
   ============================================================================= */

.kwaray-section {
  margin-bottom: 60px;
}

.kwaray-section h2 {
  font-size: 20px;
  font-weight: 500;
}

.kwaray-course {
}

.kwaray-course__image {
}

.library__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.library__pagination {
  display: flex;
  gap: 5px;
  align-items: center;
}

.library__pagination-btn {
  background-color: transparent;
  border-color: transparent;
  border-radius: 0;
  color: #b7b7b7;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 20px;
  padding: 5px 10px;
  text-decoration: none;
  text-transform: uppercase;
}

.library__pagination-btn:hover:not(:disabled) {
  color: #000716;
  cursor: pointer;
  transform: translateY(0);
  background-color: transparent;
  padding: 5px 10px !important;
}

.library__pagination-btn.active,
.library__pagination-btn:active,
.library__pagination-btn:focus {
  background-color: transparent !important;
  color: #000716 !important;
  padding: 5px 10px !important;
  transform: translateY(0) !important;
  outline: none !important;
}

.library__pagination-btn:disabled {
  background-color: transparent;
  border-color: transparent;
  border-radius: 0;
  color: #b7b7b7;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 20px;
  padding: 5px 10px;
  text-decoration: none;
  text-transform: uppercase;
}

.library__pagination-btn:disabled:hover {
  transform: translateY(0);
}

.library__course_item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 800px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  padding: 19px;
  margin: 1px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}

.library__learning-path-item.library__course_item {
  width: 100%;
  max-width: 100%;
}

.library__course_item h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 22px;
}

.library__course_item p.library__course-card-type {
  color: #959595;
  font-size: 12px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 20px;
}

.library__learning-paths {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 20px;
}

.library__learning-path-content {
  display: flex;
  flex-direction: row;
  gap: 40px;
  font-size: 14px;
  line-height: 22px;
}

.library__learning-path-content p {
  font-size: 14px;
  line-height: 22px;
}

.library__course-card-image {
  min-width: 100%;
  width: 350px;
  height: 194px;
  border-radius: 8px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  object-fit: cover;
}

.library__learning-path-image {
  min-width: 400px;
  max-width: 570px;
}

.library__learning-path-meta {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 10px;
  gap: 10px;
}

/* Runtime Stripe price. Course cards inherit the meta-item <p> styling; the
   learning-path variant sits at the left of the button row. */
.library__price--path {
  margin: 0 auto 0 0;
  font-size: 14px;
  color: #000716;
}

/* Price label + value must render identically whether the actions block sits
   inside .library__course-card-content (on-demand) or outside it (live courses,
   where actions are pinned outside the content box). These class-scoped rules
   don't depend on the content-box descendant selectors. */
.library__course-card-meta-item span {
  font-size: 11px;
  color: #959595;
  line-height: 22px;
}

.library__course-card-meta-item .library__price {
  margin: 0;
  font-size: 14px;
  color: #000000;
  line-height: 22px;
}

.library__learning-path-price {
  font-size: 14px;
  font-weight: 500;
  color: #000000;
}

.library__learning-path-price span {
  font-size: 11px;
  font-weight: 500;
  color: #959595;
}

.library__learning-path-courses {
  list-style-type: none;
  padding: 0;
  margin: 20px 0 0 0;
}

.library__learning-path-courses li {
  padding: 6px 0;
  color: #009345;
  font-size: 14px;
}

.library__learning-path-courses li a {
  text-decoration: none;
  font-weight: 500;
  color: #009345;
  font-size: 14px;
}

.library__learning-path-courses li a:hover {
  text-decoration: underline;
}

.library__on-demand-courses {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
}

.library__on-demand-courses .library__course-card-image {
  min-width: 100%;
  height: auto;
}

.library__on-demand-courses h3 {
  margin: 10px 0;
}

.library__course-card-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  line-height: 22px;
  color: #000000;
  font-weight: 500;
  margin-bottom: 5px;
}

.library__course-card-content p {
  font-size: 14px;
  color: #000000;
  line-height: 22px;
  margin: 0;
}

.library__course-card-content span {
  font-size: 11px;
  color: #959595;
  line-height: 22px;
}

.library__course-card-meta {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 80px;
}

.library__course-card-actions {
  margin-top: 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
}

.kwaray-purchased-label {
  font-size: 14px;
  font-weight: 500;
  color: #ccc;
}

/* =============================================================================
   ACCORDION STYLE OVERRIDES
   ============================================================================= */
.accordion-header {
  position: relative;
  z-index: 10;
}
.accordion-header:not(:first-child) {
  margin-top: 30px;
}

.accordion-header:hover {
  cursor: pointer;
  user-select: none;
}

.accordion-header h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.accordion-chevron {
  font-size: 20px;
  color: #000;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.accordion-content {
  overflow-y: hidden;
  transition: all 0.3s ease;
  opacity: 1;
  margin-top: 20px;
}

.accordion-content.collapsed {
  max-height: 0 !important;
  opacity: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* An expanded panel drops the clip so absolutely-positioned children — filter
   dropdown menus, mainly — are not cut off at its edge. Added by JS after the
   open transition finishes and removed before collapsing, so `.collapsed` can
   still clip. Opt-in: nothing that does not set `is-open` is affected. */
.accordion-content.is-open {
  overflow: visible;
}

/* =============================================================================
   SWIPER STYLE OVERRIDES
   ============================================================================= */
#courses-swiper {
  overflow: hidden;
}

.swiper-slide {
  height: auto;
  margin: 10px 0;
}

.library__course_card {
  height: 100%;
}

@media (max-width: 768px) {
  .library__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   cc-* — Shared form / page chrome used by Create Course, Create Lesson, etc.
   ═══════════════════════════════════════════════════════════════════════════ */

.cc-page {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-width: 1400px;
  margin: auto;
  padding: 82px 24px 130px;
  color: #1a1a2e;
}

/* Step 2 runs full-bleed like the lesson builder: drop the width cap and hide
   the breadcrumb + page title so the form + live preview own the width. */
.cc-page--wide {
  max-width: none;
  /* Edge-to-edge, no trailing gap — the site footer sits directly below and
     provides its own clearance from the fixed wizard footer. */
  padding: 0;
  margin-bottom: 0;
  margin-top: 60px
}
.cc-page--wide .cc-breadcrumb,
.cc-page--wide .cc-title {
  display: none;
}

/* Breadcrumb */
.cc-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #555;
  margin-bottom: 10px;
}
.cc-breadcrumb a {
  color: #555;
  text-decoration: none;
}
.cc-breadcrumb a:hover {
  text-decoration: underline;
}
.cc-breadcrumb-sep {
  color: #aaa;
}
.cc-breadcrumb-current {
  color: #333;
}

/* Page title */
.cc-title {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 32px;
  color: #1a1a2e;
  line-height: 1.2;
}

/* ── Step progress tracker (lives in the sticky footer, .cc-footer) ──────────
   Compact horizontal stepper: numbered marker + label per step, with a
   connector line trailing every step but the last. States are set in HubL
   (course-step-footer.html): .is-done (passed), .is-active (current). */
.cc-footer-progress {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}
.cc-footer-title {
  font-size: 15px;
  font-weight: 700;
  color: #173a32;
  white-space: nowrap;
}
.cc-footsteps {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  flex-wrap: nowrap;
}
.cc-footstep {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
/* connector line trailing each step except the last */
.cc-footstep:not(:last-child)::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin: 0 12px;
  background: #9ba7b6;
  flex: 0 0 auto;
}
.cc-footstep.is-done:not(:last-child)::after {
  background: #1d8102;
}
.cc-footstep-marker {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  background: #fff;
  border: 2px solid #9ba7b6;
  color: #9ba7b6;
}
.cc-footstep.is-active .cc-footstep-marker,
.cc-footstep.is-done .cc-footstep-marker {
  background: #1d8102;
  border-color: #1d8102;
  color: #fff;
}
.cc-footstep-label {
  font-size: 12.5px;
  color: #9ba7b6;
  white-space: nowrap;
}
.cc-footstep.is-done .cc-footstep-label {
  color: #333;
}
/* completed steps are clickable — jump back to that step */
.cc-footstep.is-done[role="button"] {
  cursor: pointer;
}
.cc-footstep.is-done[role="button"]:hover .cc-footstep-label,
.cc-footstep.is-done[role="button"]:focus-visible .cc-footstep-label {
  color: #1d8102;
  text-decoration: underline;
}
.cc-footstep.is-done[role="button"]:focus-visible {
  outline: 2px solid #1d8102;
  outline-offset: 2px;
  border-radius: 4px;
}
.cc-footstep.is-active .cc-footstep-label {
  color: #1a1a2e;
  font-weight: 600;
}

/* Card */
.cc-card {
  background: #fff;
  border-left: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
  padding: 32px 36px;
  border-radius: 12px;
}

/* Section headings */
.cc-section-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px;
  color: #1a1a2e;
}
.cc-section-sub {
  font-size: 13px;
  color: #666;
  margin: 0 0 28px;
}
.cc-divider {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 32px 0;
}

/* Form fields */
.cc-field {
  margin-bottom: 20px;
}
.cc-field label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #1a1a2e;
}

/* Checkbox fields — checkbox sits in line with its label */
.cc-field--checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cc-field--checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
  cursor: pointer;
  accent-color: #1a1a2e;
}
.cc-field--checkbox label {
  display: inline;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

/* Text inputs */
.cc-input {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  color: #333;
  outline: none;
  font-family: inherit;
}
.cc-input--sm {
  width: 240px;
}
.cc-input--full {
  width: 100%;
  box-sizing: border-box;
}
.cc-input::placeholder {
  color: #aaa;
}
.cc-word-count {
  font-size: 12px;
  color: #888;
  margin-top: 4px;
}

/* Single-select */
.cc-select-wrap {
  position: relative;
  display: inline-block;
  width: 240px;
}
.cc-select-wrap select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 32px 8px 12px;
  font-size: 14px;
  color: #aaa;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  outline: none;
}
.cc-select-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #555;
  font-size: 11px;
}

/* Tags */
.cc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.cc-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 13px;
  color: #333;
  background: #fff;
}
.cc-tag-x {
  color: #666;
  font-size: 12px;
  line-height: 1;
  cursor: default;
}

/* Search multi-select */
.cc-search-wrap {
  position: relative;
  display: inline-block;
  width: 240px;
}
.cc-search-wrap input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 32px 8px 12px;
  font-size: 14px;
  color: #aaa;
  background: #fff;
  font-family: inherit;
  outline: none;
}
.cc-search-wrap input::placeholder {
  color: #aaa;
}
.cc-search-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #555;
  display: flex;
  align-items: center;
}

/* Outline button */
.cc-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #009345;
  border-radius: 20px;
  background: #fff;
  padding: 8px 16px;
  font-size: 14px;
  color: #009345;
  cursor: pointer;
  font-family: inherit;
}

/* Sticky footer — progress tracker (left) + save indicator & step nav (right) */
.cc-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #e0e0e0;
  padding: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  z-index: 200;
}
.cc-footer-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
/* Below ~1080px the labels crowd the buttons — show marker dots only. */
@media (max-width: 1080px) {
  .cc-footstep-label {
    display: none;
  }
  .cc-footstep:not(:last-child)::after {
    width: 16px;
    margin: 0 8px;
  }
}
/* On phones the tracker is dropped entirely so the actions get the row. */
@media (max-width: 600px) {
  .cc-footer-progress {
    display: none;
  }
  .cc-footer {
    justify-content: flex-end;
  }
  .cc-footer-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}
.cc-btn-cancel {
  border: none;
  border-radius: 4px;
  background: none;
  padding: 10px 20px;
  font-size: 14px;
  color: #009345;
  cursor: pointer;
  font-family: inherit;
}
.cc-btn-primary {
  border: none;
  border-radius: 20px;
  background: #e2590c;
  padding: 10px 20px;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  font-weight: 500;
  font-family: inherit;
}

/* Multi-select dropdown */
.cc-ms-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 240px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  color: #aaa;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  user-select: none;
  box-sizing: border-box;
}
.cc-ms-placeholder {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #aaa;
}
.cc-ms-wrap .cc-select-arrow {
  flex-shrink: 0;
  position: static;
  transform: none;
  pointer-events: none;
}
.cc-ms-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  z-index: 300;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-height: 240px;
  overflow-y: auto;
}
.cc-ms-dropdown.is-open {
  display: block;
}
.cc-ms-item {
  padding: 8px 12px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}
.cc-ms-item:hover {
  background: #f5f5f5;
}
.cc-ms-item.is-selected {
  background: #fff3ed;
  color: #e2590c;
}
.cc-ms-empty {
  padding: 8px 12px;
  font-size: 14px;
  color: #aaa;
}

/* Tabbed dropdown */
.cc-ms-tabs {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
  padding: 0 4px;
  position: sticky;
  top: 0;
  background: #fff;
}
.cc-ms-tab {
  border: none;
  background: none;
  padding: 8px 10px;
  font-size: 12px;
  color: #666;
  cursor: pointer;
  font-family: inherit;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.cc-ms-tab.is-active {
  color: #e2590c;
  border-bottom-color: #e2590c;
}
.cc-ms-list {
  padding: 4px 0;
}

/* Notification banner */
.cc-notification {
  display: none;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 20px;
}
.cc-notification--success {
  background: #e6f4ea;
  color: #1a6b2f;
}
.cc-notification--error {
  background: #fdecea;
  color: #b71c1c;
}

/* Inline field errors */
.cc-input--error {
  border-color: #c0392b !important;
}
.cc-field-error {
  display: block;
  font-size: 12px;
  color: #c0392b;
  margin-top: 4px;
}

/* ── File upload list (lesson material upload) ──────────────────────────── */
.cc-upload-btn-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cc-file-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}
.cc-file-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #f0faf4;
  border: 1px solid #c3e6cb;
  border-radius: 6px;
  padding: 8px 10px;
}
.cc-file-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #009345;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  margin-top: 2px;
}
.cc-file-info {
  flex: 1;
  min-width: 0;
}
.cc-file-name {
  font-size: 13px;
  font-weight: 500;
  color: #1a1a2e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-file-meta {
  font-size: 11px;
  color: #666;
  margin-top: 2px;
}
.cc-file-remove {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  line-height: 1;
}
.cc-file-remove:hover {
  color: #c0392b;
}

/* ── Thumbnail preview ───────────────────────────────────────────────────── */
.cc-thumbnail-preview {
  width: 270px;
  height: 180px;
  background: #e9e9e9;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #999;
  overflow: hidden;
  margin-top: 8px;
}
.cc-thumbnail-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── Step wizard: section visibility ──────────────────────────────────────── */
.cc-step-section {
  display: none;
}
.cc-step-section.is-active {
  display: block;
}

/* ─── Misc form chrome ──────────────────────────────────────────────────────── */
.cc-help-link {
  font-size: 12px;
  color: #009345;
  text-decoration: none;
  margin-left: 8px;
}
.cc-help-link:hover {
  text-decoration: underline;
}
.cc-textarea {
  resize: vertical;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
}

/* ─── Step 2: image upload ───────────────────────────────────────────────────── */
.cc-image-upload-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cc-image-preview {
  width: 160px;
  height: 100px;
  background: #f0f0f0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #aaa;
  overflow: hidden;
  text-align: center;
  padding: 4px;
}
.cc-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── Step 3: chapter accordion ─────────────────────────────────────────────── */
.cc-chapter {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  margin-bottom: 12px;
  background: #fff;
}
.cc-chapter-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  background: #f7f7f7;
  border-radius: 8px;
  user-select: none;
}
.cc-chapter-header.is-open {
  border-radius: 8px 8px 0 0;
}
.cc-chapter-toggle {
  font-size: 11px;
  color: #555;
  min-width: 12px;
}
.cc-chapter-title {
  font-weight: 600;
  font-size: 14px;
  flex: 1;
  color: #222;
}
.cc-chapter-title-input {
  font-weight: 600;
  font-size: 14px;
  flex: 1;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 2px 8px;
  color: #222;
}
.cc-chapter-meta {
  font-size: 12px;
  color: #888;
  display: flex;
  gap: 16px;
}
.cc-chapter-edit {
  color: #009345;
  font-size: 13px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: none;
}
.cc-chapter-body {
  padding: 16px;
  display: none;
}
.cc-chapter-body.is-open {
  display: block;
}

.cc-lesson-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
  color: #333;
}
.cc-lesson-row-name {
  font-weight: 500;
}
.cc-lesson-inline-edit {
  color: #009345;
  font-size: 12px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0 0 0 6px;
}
.cc-lesson-thumb {
  width: 80px;
  height: 55px;
  object-fit: cover;
  border-radius: 4px;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #aaa;
}
.cc-lesson-actions {
  display: flex;
  gap: 16px;
  padding: 8px 0;
}
.cc-lesson-add-btn {
  color: #009345;
  font-size: 13px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: none;
}
.cc-add-lesson-btn {
  color: #009345;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: none;
  padding: 10px 0 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.cc-add-lesson-btn:hover {
  text-decoration: underline;
}
.cc-lessons-empty {
  font-size: 13px;
  color: #aaa;
  padding: 8px 0;
}

/* ─── Step 4: preview ────────────────────────────────────────────────────────── */
.cc-preview-wrap {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  overflow: hidden;
  min-height: 400px;
  background: #f9f9f9;
}
.cc-preview-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  color: #aaa;
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Step 2: form (left) + live course-overview preview (right)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Two-column split — wraps step 2's form and preview. A separate wrapper (not
   #cc-step-2 itself) so the wizard's .cc-step-section display toggle is untouched. */
.cc-step2-split {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  align-items: start;
}
.cc-step2-split > .cc-card {
  margin: 0;
  min-width: 0;
  border-radius 0;
}
@media (max-width: 1024px) {
  .cc-step2-split {
    grid-template-columns: 1fr;
  }
}

/* Preview sticks in view at full viewport height while the form scrolls. */
.cc-step2-preview {
  min-width: 0;
  position: sticky;
  top: 0;
  align-self: start;
}

/* Contained "desk + sheet" frame — mirrors the step-3 builder canvas
   (grey desk, white floating page) so it clearly reads as a preview. */
.cc-preview-frame {
  background: #f4f5f6;
  padding: 18px;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.cc-preview-frame-label {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a938a;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cc-preview-sheet {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 7, 22, 0.12);
  overflow: hidden;
  max-width: 1400px;
}
@media (max-width: 1024px) {
  .cc-step2-preview {
    position: static;
  }
  .cc-preview-frame {
    height: auto;
    max-height: 70vh;
  }
}

/* ── WYSIWYG editor (portal-wysiwyg.js) ─────────────────────────────────────── */
.cc-wysiwyg {
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.cc-wysiwyg:focus-within { border-color: #009345; }
.cc-wysiwyg-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid #eee;
  background: #fafafa;
}
.cc-wz-btn {
  border: none;
  background: none;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #444;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}
.cc-wz-btn:hover { background: #eee; }
.cc-wz-sep { width: 1px; height: 18px; background: #ddd; margin: 0 4px; }
.cc-wysiwyg-area {
  min-height: 120px;
  max-height: 320px;
  overflow-y: auto;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  outline: none;
}
.cc-wysiwyg-area:empty:before {
  content: attr(data-placeholder);
  color: #aaa;
}
.cc-wysiwyg-area p { margin: 0 0 10px; }
.cc-wysiwyg-area p:last-child { margin-bottom: 0; }

/* ── Course overview preview body (.cop-*) ──────────────────────────────────
   Shared markup rendered both here (live, JS-filled) and on the real
   course-overview "About" tab (server-filled). Mirrors the course landing page
   visual style; namespaced cop-* to avoid the existing .course-about rules. */
.cop {
  color: #1a1a1a;
  font-size: 15px;
  line-height: 1.6;
}
.cop .is-empty {
  display: none !important;
}

/* Headings should use the body-copy font, not the theme's display face. The
   !important is required to beat an old theme rule that sets heading fonts with
   !important on the bare h1–h6 tags (class selectors + !important win here). */
.cop-title,
.cop-about-title,
.cop-learn-title,
.cop-components-title,
.cop-duo-title,
.cop-instructor-name,
.cc-section-title {
  font-family: inherit !important;
}

/* Hero — two columns: text/badges/purchase (left), video card (right) */
.cop-hero {
  display: grid;
  grid-template-columns: 35fr 65fr;
  gap: 36px;
  padding: 32px 32px 24px;
  align-items: start;
}
@media (max-width: 760px) {
  .cop-hero { grid-template-columns: 1fr; }
}
.cop-hero-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.cop-hero-right {
  min-width: 0;
}

.cop-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  color: #173a32;
}
.cop-title:empty::after {
  content: "Course title";
  color: #c7c7c7;
  font-weight: 700;
}
.cop-school {
  font-size: 18px;
  font-weight: 500;
  color: #2f9e8c;
  margin: 0;
}

/* Info badges */
.cop-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.cop-badge {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 12px;
  min-width: 108px;
}
.cop-badge-icon { display: inline-flex; }
.cop-badge-icon svg { width: 22px; height: 22px; }
.cop-badge-text {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: #26372f;
}
.cop-badge-i { display: inline-flex; color: #9aa7a0; }
.cop-badge-i svg { width: 13px; height: 13px; }
.cop-badge--type   { background: #d9f3e6; }
.cop-badge--type   .cop-badge-icon { color: #1c9b73; }
.cop-badge--level  { background: #fbf1cf; }
.cop-badge--level  .cop-badge-icon { color: #d99a24; }
.cop-badge--pillar { background: #ece2fb; }
.cop-badge--pillar .cop-badge-icon { color: #7c5bd0; }

/* Purchase button */
.cop-purchase {
  display: block;
  width: 100%;
  text-align: center;
  background: #f2665a;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 15px 24px;
  border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(242, 102, 90, 0.32);
}
.cop-purchase:hover { background: #e2564b; color: #fff; }

/* Video card */
.cop-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(120% 120% at 30% 22%, #2e5f50 0%, #143229 55%, #0c231d 100%);
  box-shadow: 0 18px 40px rgba(10, 30, 24, 0.28);
}
.cop-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
.cop-video-embed { position: absolute; inset: 0; z-index: 2; }
.cop-video-embed:empty { display: none; }
.cop-video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.cop-video-mute {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cop-video-mute svg { width: 18px; height: 18px; }
.cop-video-play {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.cop-play {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}
.cop-play svg { width: 34px; height: 34px; color: #1f7a68; margin-left: 4px; }
.cop-video-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 3;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0 16px;
}

/* About This Course (left card) + What You'll Learn (right card) */
.cop-about {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 8px 32px 28px;
  align-items: stretch;
}
.cop-about-card {
  flex: 1.6 1 360px;
  min-width: 0;
  background: #fff;
  border: 1px solid #eef1ee;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(20, 40, 33, 0.06);
  padding: 28px 30px;
}
.cop-about-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.cop-about-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: #17a67f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cop-about-icon svg { width: 22px; height: 22px; }
.cop-about-title {
  font-size: 24px;
  font-weight: 700;
  color: #173a32;
  margin: 0;
}

.cop-learn-card {
  flex: 1 1 260px;
  min-width: 0;
  background: linear-gradient(160deg, #12987a 0%, #0c7d63 100%);
  color: #fff;
  border-radius: 16px;
  padding: 26px 28px;
}
.cop-learn-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
}

/* Shared rich-text (WYSIWYG output) */
.cop-richtext {
  font-size: 14.5px;
  line-height: 1.7;
  color: #444;
  word-wrap: break-word;
}
.cop-richtext p { margin: 0 0 14px; }
.cop-richtext p:last-child { margin-bottom: 0; }
.cop-richtext strong, .cop-richtext b { color: #173a32; }
.cop-richtext a { color: #0c7d63; }

/* "What you'll learn" — white text; numbered lists become circled-number rows */
.cop-learn-body { color: rgba(255, 255, 255, 0.92); }
.cop-learn-body strong, .cop-learn-body b { color: #fff; }
.cop-learn-body a { color: #fff; text-decoration: underline; }
.cop-learn-body ol {
  list-style: none;
  counter-reset: cop-learn;
  margin: 0;
  padding: 0;
}
.cop-learn-body ol li {
  counter-increment: cop-learn;
  position: relative;
  padding-left: 40px;
  margin-bottom: 16px;
}
.cop-learn-body ol li:last-child { margin-bottom: 0; }
.cop-learn-body ol li::before {
  content: counter(cop-learn);
  position: absolute;
  left: 0;
  top: -1px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.cop-learn-body ul { margin: 0; padding-left: 20px; }

/* Course Components — four colored stat cards (static) */
.cop-components { padding: 8px 32px 28px; }
.cop-components-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.cop-components-title { font-size: 24px; font-weight: 700; color: #173a32; margin: 0; }
.cop-components-viewall {
  font-size: 13px;
  font-weight: 600;
  color: #0c9b7a;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.cop-components-viewall svg { width: 13px; height: 13px; }
.cop-components-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.cop-comp {
  position: relative;
  border-radius: 14px;
  padding: 20px 20px 22px;
  color: #fff;
  min-height: 148px;
  display: flex;
  flex-direction: column;
}
.cop-comp-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: auto;
}
.cop-comp-num { font-size: 38px; font-weight: 800; line-height: 1; margin-top: 18px; }
.cop-comp-label { font-size: 14px; font-weight: 500; opacity: 0.92; margin-top: 5px; }
.cop-comp-arrow { position: absolute; right: 16px; bottom: 14px; opacity: 0.9; display: inline-flex; }
.cop-comp-arrow svg { width: 18px; height: 18px; }
.cop-comp--green   { background: linear-gradient(145deg, #37bd82 0%, #138a63 100%); }
.cop-comp--blue    { background: linear-gradient(145deg, #3ba0e6 0%, #2062c8 100%); }
.cop-comp--indigo  { background: linear-gradient(145deg, #5a63ea 0%, #3a2fce 100%); }
.cop-comp--magenta { background: linear-gradient(145deg, #b23ce0 0%, #e0219a 100%); }
@media (max-width: 720px) {
  .cop-components-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* How to Engage + Learning Objectives — two equal cards side by side */
.cop-duo {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 8px 32px 28px;
  align-items: stretch;
}
.cop-duo-card {
  flex: 1 1 300px;
  min-width: 0;
  background: #fff;
  border: 1px solid #eef1ee;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(20, 40, 33, 0.06);
  padding: 26px 28px;
}
.cop-duo-title { font-size: 20px; font-weight: 700; color: #173a32; margin: 0 0 14px; }
.cop-duo-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: #444;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Instructor — photo panel (badge) beside name / title / bio */
.cop-instructor { padding: 8px 32px 28px; }
.cop-instructor-card {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid #eef1ee;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(20, 40, 33, 0.06);
  overflow: hidden;
  align-items: flex-start;
}
.cop-instructor-photo-panel {
  position: relative;
  flex: 0 0 clamp(220px, 34%, 320px);
  aspect-ratio: 9 / 16;   /* portraits are uploaded 9:16 — never crop the ratio */
  background: linear-gradient(160deg, #cfd4d8, #aeb4ba);
}
.cop-instructor-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cop-instructor-photo-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 42%);
  pointer-events: none;
}
.cop-instructor-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: #fff;
  color: #173a32;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
}
.cop-instructor-info { flex: 1.5 1 340px; min-width: 0; padding: 28px 32px; }
.cop-instructor-name { font-size: 28px; font-weight: 700; color: #173a32; margin: 0 0 6px; }
.cop-instructor-title { font-size: 15px; font-weight: 600; color: #2f9e8c; margin: 0 0 18px; }
.cop-instructor-bio {
  font-size: 14px;
  line-height: 1.7;
  color: #444;
  word-wrap: break-word;
}

/* Empty hint (wizard only, shown by JS when nothing is filled in yet) */
.cop-empty-hint {
  padding: 44px 26px;
  text-align: center;
  color: #aaa;
  font-size: 14px;
}

/* ─── Lesson modal ───────────────────────────────────────────────────────────── */
.cc-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc-modal {
  background: #fff;
  border-radius: 8px;
  padding: 32px;
  width: 600px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}
.cc-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.cc-modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #666;
  line-height: 1;
}
.cc-modal-close:hover {
  color: #333;
}
.cc-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}

/* ─── Modal tabs ─────────────────────────────────────────────────────────────── */
.cc-modal-tabs {
  display: flex;
  border-bottom: 2px solid #e8e8e8;
  margin: -8px 0 20px;
}
.cc-modal-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  border-radius: 0;
  padding: 8px 20px;
  font-size: 14px;
  font-family: inherit;
  color: #888;
  cursor: pointer;
}
.cc-modal-tab:hover {
  transform: none;
  color: #fff;
}
.cc-modal-tab:active {
  color: #fff;
  border-bottom-color: #009345;
  padding: 8px 20px !important;
}
.cc-modal-tab.is-active {
  color: #fff;
  border-bottom-color: #009345;
  font-weight: 600;
  background-color: #009345;
}
.cc-modal-tab:hover:not(.is-active) {
  color: #555;
}

/* ─── Modal select list ──────────────────────────────────────────────────────── */
.cc-modal-search {
  margin-bottom: 8px;
}
.cc-select-list {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
}
.cc-select-list-item {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.4;
  border-bottom: 1px solid #f0f0f0;
}
.cc-select-list-item:last-child {
  border-bottom: none;
}
.cc-select-list-item:hover {
  background: #f5f5f5;
}
.cc-select-list-item.is-selected {
  background: #e8f4ee;
  color: #007a39;
  font-weight: 500;
}
.cc-select-list-empty {
  padding: 20px;
  color: #888;
  font-size: 14px;
  text-align: center;
  margin: 0;
}

/* ─── Footer button additions ────────────────────────────────────────────────── */
.cc-btn-back {
  background: none;
  border: 1px solid #ccc;
  border-radius: 100px;
  padding: 10px 28px;
  font-size: 14px;
  cursor: pointer;
  color: #333;
}
.cc-btn-back:hover {
  border-color: #999;
}
.cc-btn-secondary {
  background: none;
  border: 1px solid #009345;
  color: #009345;
  border-radius: 100px;
  padding: 10px 28px;
  font-size: 14px;
  cursor: pointer;
}
.cc-btn-secondary:hover {
  background: #f0faf5;
}

/* ─── Certificate split-button ───────────────────────────────────────────────── */
.cc-cert-split {
  position: relative;
  display: inline-flex;
}
.cc-cert-split__create {
  border-radius: 4px 0 0 4px !important;
  border-right: none !important;
}
.cc-cert-split__toggle {
  border-radius: 0 4px 4px 0 !important;
  padding: 0 10px !important;
  min-width: unset !important;
  display: flex;
  align-items: center;
}
#cc-cert-dropdown-toggle:hover,
#cc-cert-dropdown-toggle:focus,
#cc-cert-dropdown-toggle:active {
  padding: 0 10px !important;
}
.cc-cert-split__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 100;
  max-height: 220px;
  overflow-y: auto;
}
.cc-cert-split__item {
  padding: 9px 14px;
  cursor: pointer;
  font-size: 14px;
}
.cc-cert-split__item:hover {
  background: #f5f5f5;
}
.cc-cert-split__empty,
.cc-cert-split__loading {
  padding: 9px 14px;
  font-size: 13px;
  color: #888;
}

/* ─── Chapter accordion (v2 class names) ────────────────────────────────────── */
.cc-chapters-container {
  margin: 20px 0;
}

.cc-chapter-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}
.cc-chapter-row.is-open {
  border-radius: 6px 6px 0 0;
}
.cc-chapter-title-text {
  font-weight: 700;
  font-size: 14px;
  flex: 1;
  min-width: 0;
}
.cc-chapter-stat {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
}
.cc-chapter-ctrl {
  margin-left: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: #aaa;
  padding: 0 2px;
}
.cc-chapter-ctrl:hover {
  color: #c0392b;
}
.cc-chapter-ctrl.rename:hover {
  color: #333;
}
.cc-chapter-footer {
  display: flex;
  gap: 20px;
  padding: 10px 16px;
  border-top: 1px solid #f0f0f0;
}
.cc-chapter-footer .cc-link-btn {
  font-size: 13px;
  font-weight: 500;
}

/* ─── Lesson content blocks builder ─────────────────────────────────────────── */
.cc-blocks-section {
  margin-top: 4px;
}
.cc-blocks-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}
.cc-blocks-empty {
  font-size: 13px;
  color: #888;
  padding: 16px;
  border: 1px dashed #e0e0e0;
  border-radius: 6px;
  background: #fafafa;
  text-align: center;
}
.cc-blocks-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cc-blocks-toolbar .cc-select-wrap {
  flex: 1;
  min-width: 0;
}

.cc-block {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}
.cc-block-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
}
.cc-block-title {
  font-weight: 700;
  font-size: 13px;
  color: #222;
}
.cc-block-spacer {
  flex: 1;
}
.cc-block-ctrl {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: #888;
  padding: 2px 6px;
  border-radius: 4px;
}
.cc-block-ctrl:hover {
  background: #ececec;
  color: #333;
}
.cc-block-ctrl.cc-block-delete:hover {
  color: #c0392b;
}
.cc-block-body {
  padding: 14px;
}
.cc-block-body .cc-field {
  margin-bottom: 12px;
}
.cc-block-error {
  color: #c0392b;
  font-size: 12px;
  margin: 4px 0 10px;
}
.cc-block-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 4px;
}
.cc-block-status {
  font-size: 12px;
  color: #009345;
}
.cc-block-save {
  padding: 6px 14px;
  font-size: 13px;
}

/* ─── Assessment question + choice builder ──────────────────────────────────── */
/* Question cards reuse the .cc-block* classes above. These cover the toolbar,
   list, empty state, nested choices, and inline checkboxes. */
.cc-questions-section {
  margin-top: 4px;
}
.cc-questions-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}
.cc-questions-empty {
  font-size: 13px;
  color: #888;
  padding: 16px;
  border: 1px dashed #e0e0e0;
  border-radius: 6px;
  background: #fafafa;
  text-align: center;
}
.cc-questions-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cc-questions-toolbar .cc-select-wrap {
  flex: 1;
  min-width: 0;
}

.cc-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #333;
  margin: 4px 0 12px;
  cursor: pointer;
}
.cc-checkbox input {
  width: auto;
  margin: 0;
}

.cc-choices-field {
  margin-top: 4px;
}
.cc-choices-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.cc-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #fafbfc;
  border: 1px solid #eee;
  border-radius: 6px;
}
.cc-choice .cc-input {
  flex: 1;
  min-width: 0;
}
.cc-choice .cc-checkbox {
  margin: 0;
  white-space: nowrap;
}
.cc-choice-delete {
  flex: 0 0 auto;
}
.cc-add-choice {
  padding: 6px 12px;
  font-size: 13px;
}

.cc-q-error {
  color: #c0392b;
  font-size: 12px;
  margin: 4px 0 10px;
}
.cc-q-status {
  font-size: 12px;
  color: #009345;
}
.cc-q-save {
  padding: 6px 14px;
  font-size: 13px;
}

/* ─── Lesson entries (v2 class names) ───────────────────────────────────────── */
.cc-lesson-entry {
  border-bottom: 1px solid #f0f0f0;
  padding: 20px 16px;
  cursor: grab;
}
.cc-lesson-entry:last-of-type {
  border-bottom: none;
}
.cc-lesson-entry.cc-dragging {
  opacity: 0.4;
}
.cc-lesson-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.cc-lesson-cell-name {
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-lesson-image-row {
  margin-top: 8px;
  margin-bottom: 10px;
}
.cc-lesson-image-row img {
  width: 160px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
  background: #e8e8e8;
  display: block;
}
.cc-lesson-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  align-items: start;
}
.cc-lesson-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.cc-lesson-assignment-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cc-assignment-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 10px;
  border-radius: 12px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  font-size: 12px;
  color: #3730a3;
}
.cc-assignment-tag-remove {
  background: none;
  border: none;
  padding: 0 2px;
  font-size: 14px;
  line-height: 1;
  color: #6366f1;
  cursor: pointer;
  font-family: inherit;
}
.cc-assignment-tag-remove:hover {
  color: #dc2626;
}
.cc-assignment-tag-remove:disabled {
  opacity: 0.4;
  cursor: default;
}
.cc-lesson-event-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cc-event-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 10px;
  border-radius: 12px;
  background: #f0fdf4;
  border: 1px solid #86efac;
  font-size: 12px;
  color: #166534;
}
.cc-event-tag-remove {
  background: none;
  border: none;
  padding: 0 2px;
  font-size: 14px;
  line-height: 1;
  color: #16a34a;
  cursor: pointer;
  font-family: inherit;
}
.cc-event-tag-remove:hover {
  color: #dc2626;
}
.cc-event-tag-remove:disabled {
  opacity: 0.4;
  cursor: default;
}
.cc-lesson-assessment-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cc-assessment-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 10px;
  border-radius: 12px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  font-size: 12px;
  color: #9a3412;
}
.cc-assessment-tag-remove {
  background: none;
  border: none;
  padding: 0 2px;
  font-size: 14px;
  line-height: 1;
  color: #ea580c;
  cursor: pointer;
  font-family: inherit;
}
.cc-assessment-tag-remove:hover {
  color: #dc2626;
}
.cc-assessment-tag-remove:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ─── Link button ────────────────────────────────────────────────────────────── */
.cc-link-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #2e7d32;
  font-size: 12px;
  padding: 3px 0;
  white-space: nowrap;
}
.cc-link-btn:hover {
  text-decoration: underline;
  background-color: transparent;
  transform: none;
  color: #2e7d32;
  outline: none;
}
.cc-link-btn.muted {
  color: #aaa;
}
.cc-link-btn:active {
  padding: 3px 0 !important;
  outline: none;
}

.cc-link-btn:focus {
  text-decoration: underline;
  background-color: transparent;
  transform: none;
  color: #2e7d32;
  outline: none;
}

/* Step-2 instructor select: "+ Add new instructor" / "× Remove instructor" row */
.cc-instructor-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}
.cc-instructor-actions .cc-link-btn {
  margin-top: 0;
}

/* Destructive variant — "Remove instructor" under the step-2 instructor select */
.cc-instructor-remove {
  margin-top: 6px;
  color: #c0392b;
}
.cc-instructor-remove:hover,
.cc-instructor-remove:focus {
  color: #a93226;
}
.cc-instructor-remove:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ─── Select-existing lesson dropdown ───────────────────────────────────────── */
.cc-existing-lesson-wrap {
  position: relative;
}
.cc-existing-lesson-wrap select {
  min-width: 220px;
  padding: 4px 8px;
  font-size: 13px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* ─── Drag-handle dots ───────────────────────────────────────────────────────── */
.cc-drag-dots {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: 10px;
  cursor: grab;
  flex-shrink: 0;
  align-self: center;
}
.cc-drag-dots span {
  width: 4px;
  height: 4px;
  background: #c0c0c0;
  border-radius: 1px;
  display: block;
}

/* ─── Lesson list & drop zone ────────────────────────────────────────────────── */
.cc-lesson-list {
  min-height: 48px;
}
.cc-lesson-drop-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  color: #bbb;
  font-size: 13px;
  border: 2px dashed #e0e0e0;
  border-radius: 4px;
  margin: 6px 16px;
}
.cc-lesson-list.drag-over .cc-lesson-drop-placeholder,
.cc-lesson-list.drag-over {
  border: 2px dashed #2e7d32;
  background: #f0f7f0;
  border-radius: 4px;
}

/* ─── CSV learner upload ─────────────────────────────────────────────────────── */
.csv-upload {
  max-width: 100%;
}

.csv-upload__hint {
  font-size: 14px;
  color: #555;
  margin: 0 0 8px;
}

.csv-upload__template-link {
  display: inline-block;
  font-size: 13px;
  color: #009345;
  text-decoration: none;
  margin-bottom: 24px;
}
.csv-upload__template-link:hover {
  text-decoration: underline;
}

/* Dropzone */
.csv-upload__dropzone {
  border: 2px dashed #ccc;
  border-radius: 10px;
  background: #fafafa;
  padding: 48px 24px;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.csv-upload__dropzone:hover,
.csv-upload__dropzone.drag-over {
  border-color: #009345;
  background: #f0faf5;
}
.csv-upload__dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.csv-upload__icon {
  width: 40px;
  height: 40px;
  color: #aaa;
  margin-bottom: 4px;
}
.csv-upload__dropzone-label {
  font-size: 15px;
  font-weight: 500;
  color: #333;
  margin: 0;
}
.csv-upload__dropzone-sub {
  font-size: 13px;
  color: #aaa;
  margin: 0;
}
.csv-upload__file-btn {
  display: inline-block;
  padding: 8px 20px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  transition: border-color 0.2s;
}
.csv-upload__file-btn:hover {
  border-color: #009345;
  color: #009345;
}
.csv-upload__file-input {
  display: none;
}

/* Selected file pill */
.csv-upload__file-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 14px;
  background: #f0faf5;
  border: 1px solid #b7dfc8;
  border-radius: 8px;
  font-size: 14px;
}
.csv-upload__file-name {
  flex: 1;
  font-weight: 500;
  color: #1a1a2e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.csv-upload__file-remove {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: #888;
  cursor: pointer;
  padding: 0 2px;
  flex-shrink: 0;
}
.csv-upload__file-remove:hover {
  color: #c0392b;
}

/* Preview */
.csv-upload__preview {
  margin-top: 28px;
}
.csv-upload__preview-title {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0 0 4px;
}
.csv-upload__preview-count {
  font-size: 13px;
  color: #666;
  margin: 0 0 12px;
}
.csv-upload__preview-scroll {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid #e9ebed;
  border-radius: 8px;
}
.csv-upload__table {
  margin: 0;
  border-radius: 0;
}

/* Error banner */
.csv-upload__error {
  margin-top: 16px;
  padding: 12px 16px;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 8px;
  font-size: 14px;
  color: #721c24;
}

/* ─── Certificate Builder (cb-*) ───────────────────────────────────────────── */

.cc-certificate-builder {
  padding: 0;
}

.cb-builder {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cb-builder-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.cb-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #009345;
  margin-bottom: 6px;
}
.cb-heading {
  font-size: 22px;
  font-weight: 700;
  color: #233147;
  letter-spacing: -0.5px;
  line-height: 1;
}
.cb-subtext {
  font-size: 13px;
  color: #656871;
  margin-top: 6px;
  max-width: 500px;
}
.cb-header-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Workspace */
.cb-workspace {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.cb-canvas-area {
  flex: 1;
  min-width: 0;
}

/* Upload zone */
.cb-upload-zone {
  border: 2px dashed #d1d5dc;
  border-radius: 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  cursor: pointer;
  transition: all 0.18s;
  min-height: 420px;
  padding: 40px;
  text-align: center;
}
.cb-upload-zone.cb-drag-over {
  border-color: #009345;
  background: #ecf6f0;
}
.cb-upload-icon {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: #e9ebed;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}
.cb-upload-title {
  font-size: 16px;
  font-weight: 600;
  color: #233147;
  margin-bottom: 6px;
}
.cb-upload-sub {
  font-size: 13px;
  color: #656871;
}

/* Canvas */
.cb-canvas-wrap {
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 0 4px rgba(65, 77, 92, 0.2),
    0 1px 14px rgba(0, 7, 22, 0.14);
  line-height: 0;
  max-width: 100%;
}
.cb-canvas {
  position: relative;
  display: block;
  cursor: default;
  user-select: none;
  line-height: 0;
}
.cb-canvas-img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 320px);
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.cb-grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 147, 69, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 147, 69, 0.04) 1px, transparent 1px);
  background-size: 10% 10%;
}
.cb-drop-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.cb-drop-hint-inner {
  background: rgba(255, 255, 255, 0.88);
  border-radius: 10px;
  padding: 12px 20px;
  backdrop-filter: blur(4px);
  text-align: center;
}
.cb-drop-hint-title {
  font-size: 14px;
  font-weight: 600;
  color: #233147;
}
.cb-drop-hint-sub {
  font-size: 12px;
  color: #656871;
  margin-top: 4px;
}

/* Canvas field chips */
.cb-canvas-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid transparent;
  backdrop-filter: blur(4px);
  cursor: grab;
  user-select: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  z-index: 5;
  transition:
    box-shadow 0.15s,
    border-color 0.15s,
    background 0.15s;
}
.cb-canvas-chip.is-selected {
  z-index: 10;
}
.cb-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cb-chip-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.cb-chip-remove {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid #d1d5dc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #656871;
  font-size: 9px;
  font-weight: 700;
  transition: all 0.15s;
  margin-left: 4px;
  flex-shrink: 0;
}
.cb-chip-remove:hover {
  background: #dc3545;
  border-color: #dc3545;
  color: #fff;
}
.cb-preview-text {
  position: absolute;
  font-size: 16px;
  font-weight: 600;
  color: #2a2a2a;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  pointer-events: none;
  white-space: nowrap;
}

/* Right panel */
.cb-panel {
  width: 264px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cb-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  overflow: visible;
}
.cb-card-header {
  padding: 14px 20px 12px;
  border-bottom: 1px solid #d1d5dc;
}
.cb-card-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #656871;
  display: block;
}
.cb-card-sub {
  font-size: 12px;
  color: #656871;
  margin-top: 4px;
  display: block;
}
.cb-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cb-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cb-label {
  font-size: 12px;
  font-weight: 600;
  color: #233147;
}
.cb-input {
  width: 100%;
  height: 36px;
  border-radius: 6px;
  border: 1.5px solid #d1d5dc;
  padding: 0 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #0f1418;
  outline: none;
  transition: border-color 0.15s;
}
.cb-input:focus {
  border-color: #009345;
}

/* Type selector */
.cb-type-selector {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cb-type-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  border: 1.5px solid #d1d5dc;
  background: #fff;
  transition: all 0.15s;
  font-size: 12px;
  color: #0f1418;
}
.cb-type-option:hover {
  background: #e9ebed;
}
.cb-type-option.cb-type-active {
  border-color: #009345;
  background: #ecf6f0;
  font-weight: 600;
  color: #233147;
}
.cb-radio-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #d1d5dc;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.15s;
}
.cb-type-active .cb-radio-dot {
  border-color: #009345;
}
.cb-radio-inner {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #009345;
}

/* Multi-select */
.cb-multiselect {
  position: relative;
}
.cb-ms-trigger {
  height: 36px;
  border-radius: 6px;
  border: 1.5px solid #d1d5dc;
  padding: 0 32px 0 12px;
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  background: #fff;
  position: relative;
  font-size: 13px;
  transition: border-color 0.15s;
}
.cb-ms-trigger:hover,
.cb-ms-trigger.is-open {
  border-color: #009345;
}
.cb-ms-summary {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #656871;
}
.cb-ms-summary.has-selection {
  color: #0f1418;
  font-weight: 500;
}
.cb-ms-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.15s;
  pointer-events: none;
}
.cb-ms-arrow.is-open {
  transform: translateY(-50%) rotate(180deg);
}
.cb-ms-dropdown {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 200;
  background: #fff;
  border-radius: 8px;
  border: 1.5px solid #d1d5dc;
  box-shadow: 0 4px 16px rgba(0, 7, 22, 0.12);
  max-height: 200px;
  overflow-y: auto;
}
.cb-ms-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid #e9ebed;
  transition: background 0.1s;
  font-size: 12px;
  color: #0f1418;
}
.cb-ms-option:last-child {
  border-bottom: none;
}
.cb-ms-option:hover {
  background: #e9ebed;
}
.cb-ms-option.is-checked {
  background: #ecf6f0;
  font-weight: 600;
  color: #233147;
}
.cb-ms-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 2px solid #d1d5dc;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.12s;
}
.cb-ms-option.is-checked .cb-ms-checkbox {
  border-color: #009345;
  background: #009345;
}
.cb-ms-empty {
  padding: 16px;
  font-size: 12px;
  color: #656871;
  text-align: center;
}

/* Palette */
.cb-palette {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cb-palette-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 100px;
  border: 2px solid transparent;
  background: #fff;
  cursor: grab;
  user-select: none;
  transition:
    opacity 0.2s,
    box-shadow 0.15s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  white-space: nowrap;
}
.cb-palette-chip.is-placed {
  background: #e9ebed;
  cursor: default;
  opacity: 0.45;
  box-shadow: none;
}
.cb-palette-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cb-palette-label {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.cb-palette-placed-tag {
  font-size: 10px;
  color: #656871;
  margin-left: 2px;
}
.cb-palette-footer {
  padding: 0 16px 14px;
}

/* Positions */
.cb-positions-empty {
  padding: 16px 20px;
  color: #656871;
  font-size: 13px;
}
.cb-position-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  border-bottom: 1px solid #d1d5dc;
}
.cb-position-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cb-position-label {
  font-size: 12px;
  font-weight: 600;
  color: #233147;
  flex: 1;
}
.cb-position-coords {
  font-size: 11px;
  color: #656871;
  background: #e9ebed;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.cb-positions-actions {
  padding: 12px 20px;
}

/* Status card */
.cb-status-card {
  border-radius: 10px;
  padding: 12px 16px;
  border: 1px solid #b3dfc6;
  background: #ecf6f0;
}
.cb-status-title {
  font-size: 12px;
  font-weight: 600;
  color: #006830;
  margin-bottom: 4px;
}
.cb-status-body {
  font-size: 11px;
  color: #3a7a50;
  line-height: 1.5;
}

/* Buttons */
.cb-btn-primary {
  height: 32px;
  padding: 0 20px;
  border-radius: 100px;
  background: #ea6514;
  color: #fff;
  border: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
}
.cb-btn-primary:hover {
  opacity: 0.88;
}
.cb-btn-outline {
  height: 32px;
  padding: 0 16px;
  border-radius: 100px;
  border: 1.5px solid #233147;
  background: transparent;
  color: #233147;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition:
    background 0.15s,
    color 0.15s;
}
.cb-btn-outline:hover,
.cb-btn-outline.is-active {
  background: #233147;
  color: #fff;
}
.cb-btn-ghost {
  height: 32px;
  padding: 0 16px;
  border-radius: 100px;
  border: 1.5px solid #d1d5dc;
  background: transparent;
  color: #656871;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.cb-btn-ghost:hover {
  background: #e9ebed;
}
.cb-btn-sm {
  height: 28px;
  font-size: 11px;
  width: 100%;
}
.cb-btn-green-outline {
  width: 100%;
  height: 32px;
  border-radius: 100px;
  border: 1.5px solid #009345;
  background: transparent;
  color: #009345;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.cb-btn-green-outline:hover {
  background: #ecf6f0;
}

/* ============================================================================
   LESSON VIEWER  —  portal-lesson.html + js/portal-lesson-viewer.js
   Hero video, lesson content blocks, assessment, completion, and the
   course-content (chapter/lesson) accordion. Kept here so the layout can be
   reused across lesson-style pages.
   ============================================================================ */

/* ── Lesson Viewer ───────────────────────────────────────────────────── */
.lesson-viewer-wrapper {
  font-family: inherit;
  color: #1a1a1a;
  background: #fff;
}
.lv-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.lv-breadcrumb-bar {
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  padding: 10px 0;
}
.lv-breadcrumb {
  font-size: 13px;
  color: #888;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.lv-breadcrumb a {
  color: #555;
  text-decoration: none;
}
.lv-breadcrumb a:hover {
  text-decoration: underline;
}
.lv-bc-sep {
  color: #bbb;
}
.lv-bc-current {
  color: #1a1a1a;
  font-weight: 500;
}

.lv-header {
  background: #fff;
  padding: 22px 0 6px;
}
.lv-title {
  font-size: 30px;
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.2;
}
.lv-course-name {
  font-size: 16px;
  font-weight: 600;
  color: #009345;
  margin: 0 0 4px;
}
.lv-meta {
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* Hero video — rounded player on the page background */
.lv-hero-video {
  background: #fff;
  padding: 18px 0 8px;
}
.lv-hero-frame {
  width: 100%;
  aspect-ratio: 16/9;
  background: #1a2540;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
.lv-hero-frame .lv-embed,
.lv-hero-frame .lv-video-el {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
  border: none;
}

.lv-content-section {
  padding: 40px 0 64px;
}
.lv-intro {
  font-size: 18px;
  line-height: 1.65;
  color: #4a5751;
  margin: 0 0 32px;
  padding-left: 18px;
  border-left: 3px solid #009345;
}
.lv-intro > :first-child { margin-top: 0; }
.lv-intro > :last-child { margin-bottom: 0; }

/* Resources — files uploaded in the lesson builder, pinned above the blocks */
.lv-resources {
  margin: 0 0 32px;
}
.lv-resource-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lv-resource {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 12px 16px;
  text-decoration: none;
  color: #1a1a1a;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.lv-resource:hover {
  border-color: #009345;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.lv-resource-icon {
  display: flex;
  align-items: center;
  color: #009345;
  flex-shrink: 0;
}
.lv-resource-name {
  font-size: 15px;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lv-resource-meta {
  font-size: 12.5px;
  color: #959595;
  flex-shrink: 0;
}
.lv-resource-dl {
  display: flex;
  align-items: center;
  color: #959595;
  flex-shrink: 0;
}
.lv-resource:hover .lv-resource-dl {
  color: #009345;
}

.lv-blocks {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* Blocks render flat — no card chrome (border/padding removed by design). */
.lv-block {
  background: #fff;
  border-radius: 8px;
}
.lv-block-headline {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px;
}
.lv-rt {
  font-size: 15px;
  line-height: 1.7;
  color: #333;
}
.lv-rt p + p {
  margin-top: 12px;
}
.lv-caption {
  font-size: 13px;
  color: #888;
  margin: 10px 0 0;
}

.lv-media .lv-embed,
.lv-media .lv-video-el {
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
  border-radius: 6px;
  display: block;
}
.lv-figure {
  margin: 0;
}
.lv-img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}
/* Image block with a click-through (cta_url). Block-level so wrapping the image
   in an anchor doesn't change its layout or pick up link text styling. */
.lv-img-link {
  display: block;
  text-decoration: none;
}
.lv-align-left .lv-figure {
  text-align: left;
}
.lv-align-right .lv-figure {
  text-align: right;
}
.lv-align-full .lv-img {
  width: 100%;
}

/* Empty image/video placeholder — shown until the block has a value (mostly in
   the builder). Dashed box with a centered icon + label. */
.lv-media-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 200px;
  padding: 32px 24px;
  border: 1.5px dashed #d5d9dd;
  border-radius: 8px;
  background: #fafbfc;
  color: #9aa2ab;
  text-align: center;
}
.lv-media-placeholder-icon {
  display: flex;
  color: #b3b9c0;
}
.lv-media-placeholder-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* media + text */
.lv-mt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: center;
}
.lv-mt-right .lv-mt-grid {
  direction: rtl;
}
.lv-mt-right .lv-mt-grid > * {
  direction: ltr;
}
.lv-mt-full .lv-mt-grid {
  grid-template-columns: 1fr;
}
.lv-cta {
  display: inline-block;
  margin-top: 14px;
  background: #009345;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 22px;
}
.lv-cta:hover {
  background: #007a39;
  color: #fff;
}
.lv-cta--sm {
  padding: 6px 16px;
  font-size: 13px;
}

/* flip card */
.lv-flip {
  perspective: 1200px;
  cursor: pointer;
  outline: none;
}
.lv-flip-inner {
  position: relative;
  transition: transform 0.5s;
  transform-style: preserve-3d;
  min-height: 160px;
}
.lv-flip.is-flipped .lv-flip-inner {
  transform: rotateY(180deg);
}
.lv-flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fafafa;
}
.lv-flip-back {
  transform: rotateY(180deg);
  background: #f1faf4;
}
.lv-flip-hint {
  font-size: 12px;
  color: #aaa;
  margin-top: 12px;
}

/* callout */
.lv-block--callout {
  display: flex;
  gap: 14px;
  /* callouts keep their own chrome now that the base .lv-block card
     border/padding is gone — the variant rules supply the accent color */
  padding: 20px 24px;
  border-left: 4px solid transparent;
}
.lv-callout-title {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
}
.lv-callout--tip {
  border-left-color: #2e7d32;
  background: #f1f8f2;
}
.lv-callout--warning {
  border-left-color: #e6a700;
  background: #fff8e6;
}
.lv-callout--takeaway {
  border-left-color: #1565c0;
  background: #eef5fd;
}
.lv-callout-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
}
.lv-callout--tip .lv-callout-icon {
  background: #2e7d32;
}
.lv-callout--warning .lv-callout-icon {
  background: #e6a700;
}
.lv-callout--takeaway .lv-callout-icon {
  background: #1565c0;
}

/* accordion (content block) — keeps its own card border now that the base
   .lv-block chrome is gone (the collapsed header needs a visible boundary) */
.lv-block--accordion {
  padding: 0;
  overflow: hidden;
  border: 1px solid #e6e6e6;
}
.lv-acc-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  background: #009345; /* site button green — explicit colors so the global
                          theme's <button> styles can't wash the text out */
  color: #fff;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
}
.lv-acc-header:hover {
  background: #007a39;
}
.lv-acc-title {
  flex: 1;
  color: #fff;
}
.lv-acc-chevron {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.85);
  transition: transform 0.2s;
}
.lv-block--accordion.is-open .lv-acc-chevron {
  transform: rotate(90deg);
}
.lv-acc-body {
  display: none;
  padding: 0 24px 20px;
}
.lv-block--accordion.is-open .lv-acc-body {
  display: block;
}

/* ── Two-column lesson shell (rendered by js/lesson-render.js partials).
   Shared between the builder canvas and the learner page: big title,
   "course · chapter" sub-line, then a grid — left: lesson details +
   course-content accordion; right: the lesson body. ─────────────────────── */
/* ── Learner lesson page (lvp-*) — portal-course-lessons.html ────────────────
   White sheet on a gray canvas, mirroring the builder's .lb-canvas/.lb-page
   so the learner page looks exactly like the step-3 preview. */
.lvp-canvas {
  background: #fff;
  padding: 32px 16px 48px;
}
.lvp-page {
  max-width: 1240px;
  margin: 80px auto 0;
  background: #fff;
  padding: 0 40px 60px;
}
/* Sidebar (details + course content) sticks while the lesson body scrolls.
   Scoped to the learner page — the builder canvas has its own scroll regions.
   top clears the site's fixed sticky header; the column scrolls internally
   when taller than the viewport. */
.lvp-page .lv-shell-side {
  position: sticky;
  top: 85px;
  max-height: calc(100vh - 105px);
  overflow-y: auto;
}
@media (max-width: 900px) {
  /* stacked single-column layout — sticky sidebar would cover content */
  .lvp-page .lv-shell-side {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}
.lvp-loading {
  color: #888;
  font-size: 14px;
  padding: 24px 0;
}
.lvp-events {
  margin: 0 0 8px;
}
/* sidebar rows read as clickable — mirrors .lb-page .lv-lesson-row in the builder */
.lvp-page .lv-chapter-header {
  border-radius: 0;
}
.lvp-page .lv-lesson-row {
  cursor: pointer;
}
.lvp-page .lv-lesson-row:hover {
  background: #f7faf8;
}
@media (max-width: 700px) {
  .lvp-canvas { padding: 16px 8px 32px; }
  .lvp-page { padding: 24px 18px 40px; border-radius: 12px; }
}

/* ── Learner event card (shared with the V4 module + builder canvas) ─────────
   Copy of "Kwaray Course - V4.module/module.css" / lesson-builder.css —
   keep the three in sync. Rendered by LessonRender.renderEventCard. */
.cohort-associated-event {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin: 2rem 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cohort-associated-event:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.cohort-associated-event__header {
  background: #009345;
  background: linear-gradient(30deg, #009345 0%, hsla(150, 61%, 48%, 1) 100%);
  color: white;
  padding: 1.5rem;
  position: relative;
}
.cohort-associated-event__header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}
.event-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  position: relative;
  z-index: 1;
}
.cohort-associated-event__content {
  padding: 1.5rem;
}
.cohort-associated-event__text {
  margin-bottom: 1.5rem;
}
.cohort-associated-event__text p {
  color: #4a5568;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.event-detail {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #6b7280;
  font-size: 0.875rem;
}
.event-detail svg {
  color: #9ca3af;
  flex-shrink: 0;
}
.cohort-associated-event__actions {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
}
.zoom-join-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #ff595b;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}
.zoom-join-button:hover:not(.disabled) {
  background: #009345;
  transform: translateY(-1px);
  color: #fff;
}
.zoom-join-button.disabled {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
}
.zoom-join-button svg {
  flex-shrink: 0;
}

.lv-shell-head {
  margin-bottom: 4px;
}
.lv-shell-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  color: #1a1a1a;
  margin: 0 0 6px;
}
.lv-shell-sub {
  font-size: 15px;
  color: #666;
  margin: 0 0 24px;
}
.lv-shell-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}
.lv-shell-side,
.lv-shell-main {
  min-width: 0;
}
@media (max-width: 900px) {
  .lv-shell-grid {
    grid-template-columns: 1fr;
  }
}

/* lesson details card (shell sidebar) */
.lv-details {
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 14px 16px 12px;
  margin-bottom: 26px;
  background: #fff;
}
.lv-details-title {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 8px;
}
.lv-details-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  padding: 3px 0;
}
.lv-details-label {
  color: #888;
}
.lv-details-value {
  color: #1a1a1a;
  font-weight: 600;
  text-align: right;
}

/* course-content accordion inside the shell sidebar — the accordion itself
   reuses the learner lv-chapter* / lv-lesson-row styles below; these compact
   it to sidebar density */
.lv-shell-side .lv-course-content {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.lv-shell-side .lv-cc-heading {
  font-size: 18px;
  margin: 0 0 12px;
}
.lv-shell-side .lv-chapter-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.lv-shell-side .lv-chapter-header {
  padding: 11px 12px;
  gap: 8px;
}
.lv-shell-side .lv-chapter-meta {
  gap: 10px;
}
.lv-shell-side .lv-chapter-meta span {
  font-size: 11px;
  text-transform: uppercase;
  color: #777;
}
.lv-shell-side .lv-chapter-progress {
  padding: 10px 12px 2px;
}
.lv-shell-side .lv-lesson-row {
  padding: 10px 12px;
  gap: 10px;
}
.lv-shell-side .lv-lesson-name {
  font-size: 13px;
}
.lv-shell-side .lv-lesson-duration {
  font-size: 12px;
}

/* "Lesson overview" video section (static URL slot above the blocks) */
.lv-overview {
  margin: 0 0 26px;
}
.lv-section-title {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 12px;
}
.lv-overview .lv-hero-frame {
  background: #1c2622;
}
.lv-overview .lv-caption {
  margin-top: 8px;
}

/* ── Rows / columns layout (lesson builder; rendered by js/lesson-render.js).
   Shared between the builder canvas and the learner page — builder chrome
   (lb-*) must never restyle these. ─────────────────────────────────────── */
.lv-rows {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.lv-cols {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
  align-items: start;
}
.lv-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* quote / button / divider (lesson builder block types) — not cards */
.lv-block--quote,
.lv-block--button,
.lv-block--divider {
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
}
.lv-block--quote {
  border-left: 3px solid #009345;
  padding: 4px 0 4px 16px;
}
.lv-block--quote .lv-quote {
  margin: 0;
}
.lv-block--quote .lv-rt {
  font-family: calluna, Georgia, serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: #232f3e;
}
.lv-block--button.lv-align-left {
  text-align: left;
}
.lv-block--button.lv-align-center {
  text-align: center;
}
.lv-block--button.lv-align-right {
  text-align: right;
}
.lv-cta--button {
  margin-top: 0;
  background: #ea6514;
}
.lv-cta--button:hover {
  background: #cc540c;
}
.lv-divider {
  border: none;
  height: 1px;
  background: #e9ebed;
  margin: 8px 0;
}
.lv-align-center .lv-figure {
  text-align: center;
}

/* assessment + completion (JS-rendered) */
.lv-assessment {
  margin-top: 32px;
}
.lv-completion {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.lv-complete-status {
  font-size: 14px;
  color: #2e7d32;
  font-weight: 600;
}

.lv-btn {
  font-size: 14px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 24px;
  cursor: pointer;
  border: 1px solid transparent;
  display: inline-block;
  text-decoration: none;
}
.lv-btn-primary {
  background: #009345;
  color: #fff;
  border-color: #009345;
}
.lv-btn-primary:hover {
  background: #007a39;
}
.lv-btn-primary:disabled {
  background: #bbb;
  border-color: #bbb;
  cursor: default;
}
.lv-btn-outline {
  background: #fff;
  color: #444;
  border-color: #ccc;
}
.lv-btn-outline:hover {
  background: #f5f5f5;
}

/* quiz */
.lv-quiz {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 24px;
}
.lv-quiz-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px;
}
.lv-quiz-sub {
  font-size: 13px;
  color: #888;
  margin: 0 0 20px;
}
.lv-q {
  padding: 18px 0;
  border-top: 1px solid #f0f0f0;
}
.lv-q:first-of-type {
  border-top: none;
}
.lv-q-prompt {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 12px;
}
.lv-q-prompt .lv-q-points {
  font-weight: 400;
  color: #999;
  font-size: 13px;
}
.lv-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  margin-bottom: 8px;
  cursor: pointer;
}
.lv-opt:hover {
  background: #fafafa;
}
.lv-opt input {
  margin-top: 3px;
}
.lv-input,
.lv-textarea {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 10px;
  font: inherit;
}
.lv-textarea {
  min-height: 90px;
  resize: vertical;
}
.lv-match-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.lv-match-left {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
}
.lv-match-row select {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
}
.lv-q-feedback {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
}
.lv-q-feedback.is-correct {
  color: #2e7d32;
}
.lv-q-feedback.is-wrong {
  color: #c0392b;
}
.lv-q-feedback.is-manual {
  color: #1565c0;
}
.lv-q-explain {
  margin-top: 6px;
  font-size: 13px;
  color: #555;
}
.lv-quiz-actions {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.lv-quiz-error {
  color: #c0392b;
  font-size: 14px;
}
.lv-result-banner {
  padding: 16px 20px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 18px;
}
.lv-result-banner.is-pass {
  background: #e8f5e9;
  color: #2e7d32;
}
.lv-result-banner.is-fail {
  background: #fdecea;
  color: #c0392b;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Slide-based quiz (qz-*) — js/quiz-player.js
   One question per slide · segmented progress · reveal-then-next.
   Supersedes the .lv-quiz form above (kept until every surface migrates).
   ═══════════════════════════════════════════════════════════════════════════ */
.qz-card {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 24px 28px;
}
.qz-loading,
.qz-empty {
  color: #888;
  font-size: 14px;
  padding: 24px 0;
}
.qz-busy .qz-slide {
  opacity: 0.6;
  pointer-events: none;
}

/* header */
.qz-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.qz-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}
.qz-count {
  font-size: 13px;
  color: #888;
  flex-shrink: 0;
}

/* segmented progress — one segment per question */
.qz-progress {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
}
.qz-progress-seg {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: #e6e6e6;
}
.qz-progress-seg.is-done {
  background: #009345;
}
.qz-progress-seg.is-current:not(.is-done) {
  background: #b5dfc9;
}

/* slide */
.qz-prompt {
  font-size: 17px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 16px;
  line-height: 1.5;
}
.qz-required {
  color: #c0392b;
}
.qz-help {
  font-size: 13px;
  color: #777;
  margin: -8px 0 14px;
}
.qz-hint {
  text-align: center;
  font-size: 13px;
  color: #999;
  margin: 16px 0 4px;
}

/* answer option rows */
.qz-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fafafa;
  padding: 14px 16px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 15px;
  color: #1a1a1a;
  transition: border-color 0.12s, background 0.12s;
}
.qz-opt:hover:not(.is-locked) {
  border-color: #999;
  background: #f5f5f5;
}
.qz-opt.is-selected {
  border-color: #009345;
  background: #f0faf4;
}
.qz-opt.is-locked {
  cursor: default;
  pointer-events: none;
}
.qz-opt.is-correct {
  border-color: #2e7d32;
  background: #e8f5e9;
}
.qz-opt.is-wrong {
  border-color: #c0392b;
  background: #fdecea;
}
.qz-opt-radio {
  width: 18px;
  height: 18px;
  border: 2px solid #bbb;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  background: #fff;
}
.qz-opt.is-selected .qz-opt-radio,
.qz-opt.is-correct .qz-opt-radio {
  border-color: #009345;
}
.qz-opt.is-selected .qz-opt-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #009345;
}
.qz-opt.is-wrong .qz-opt-radio {
  border-color: #c0392b;
}
.qz-opt.is-wrong.is-selected .qz-opt-radio::after {
  background: #c0392b;
}
/* multi-select rows keep a square marker */
.qz-opt--multi .qz-opt-radio {
  border-radius: 4px;
}
.qz-opt--multi .qz-opt-radio::after {
  border-radius: 2px;
}
.qz-opt-label {
  flex: 1;
}

/* text inputs */
.qz-input,
.qz-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  margin-bottom: 12px;
  outline: none;
}
.qz-input:focus,
.qz-textarea:focus {
  border-color: #009345;
}
.qz-input.is-correct {
  border-color: #2e7d32;
  background: #e8f5e9;
}
.qz-input.is-wrong {
  border-color: #c0392b;
  background: #fdecea;
}

/* matching rows */
.qz-match-row {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
}
.qz-match-row.is-correct {
  border-color: #2e7d32;
  background: #e8f5e9;
}
.qz-match-row.is-wrong {
  border-color: #c0392b;
  background: #fdecea;
}
.qz-match-left {
  font-weight: 600;
  font-size: 14px;
  flex: 1;
}
.qz-match-picked {
  font-size: 14px;
  color: #555;
}
.qz-match-select {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}

/* check / submit button inside a slide */
.qz-check {
  margin-top: 4px;
}

/* feedback + explanation */
.qz-feedback {
  font-size: 14px;
  font-weight: 700;
  margin: 14px 0 0;
}
.qz-feedback.is-correct { color: #2e7d32; }
.qz-feedback.is-wrong   { color: #c0392b; }
.qz-feedback.is-manual  { color: #1565c0; }
.qz-explain {
  margin-top: 10px;
  padding: 12px 14px;
  background: #f7f9f8;
  border-left: 3px solid #009345;
  border-radius: 0 6px 6px 0;
  font-size: 14px;
  color: #444;
  line-height: 1.55;
}

/* footer */
.qz-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 24px;
}
.qz-footer--result {
  justify-content: flex-start;
}
.qz-error {
  color: #c0392b;
  font-size: 13.5px;
  flex: 1;
  text-align: center;
}
.qz-error--boot {
  display: block;
  text-align: left;
  padding: 16px;
}

/* result slide */
.qz-result-banner {
  padding: 16px 20px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
}
.qz-result-banner.is-pass {
  background: #e8f5e9;
  color: #2e7d32;
}
.qz-result-banner.is-fail {
  background: #fdecea;
  color: #c0392b;
}
.qz-result-banner.is-manual {
  background: #e8f0fd;
  color: #1565c0;
}
.qz-result-score {
  font-size: 15px;
  color: #333;
  margin: 0 0 8px;
}
.qz-result-note {
  font-size: 13.5px;
  color: #777;
  margin: 0 0 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Assignment card (asg-*) — js/assignment-card.js
   Shared by the learner lesson page (interactive) and the course-builder
   canvas preview (static). Prompt + dropzone/text box + status badge.
   ═══════════════════════════════════════════════════════════════════════════ */
.lv-assignments {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 32px;
}
.asg-card {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 24px 28px;
}
.asg-busy {
  opacity: 0.65;
  pointer-events: none;
}
.asg-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.asg-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}
.asg-status {
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 16px;
  white-space: nowrap;
}
.asg-status--awaiting  { background: #f1f2f4; color: #6b7280; }
.asg-status--review    { background: #e8f0fd; color: #1565c0; }
.asg-status--attention { background: #fdecea; color: #c0392b; }
.asg-status--complete  { background: #e8f5e9; color: #2e7d32; }

.asg-prompt {
  font-size: 15px;
  line-height: 1.65;
  color: #333;
  margin-bottom: 18px;
}
.asg-score {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 10px;
}
.asg-feedback {
  background: #f7f9f8;
  border-left: 3px solid #009345;
  border-radius: 0 6px 6px 0;
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: 14px;
  color: #444;
  line-height: 1.55;
}
.asg-feedback-label {
  display: block;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #009345;
  margin-bottom: 6px;
}

/* dropzone */
.asg-dropzone {
  border: 2px dashed #ccc;
  border-radius: 10px;
  background: #fafafa;
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.asg-dropzone:hover,
.asg-dropzone.is-dragover {
  border-color: #009345;
  background: #f0faf4;
}
.asg-dropzone.is-locked {
  cursor: default;
  pointer-events: none;
  opacity: 0.55;
}
.asg-dz-icon {
  font-size: 22px;
  color: #009345;
  margin-bottom: 8px;
}
.asg-dz-text {
  font-size: 14.5px;
  color: #555;
  margin: 0 0 6px;
}
.asg-dz-browse {
  color: #009345;
  font-weight: 700;
  text-decoration: underline;
}
.asg-dz-hint {
  font-size: 12.5px;
  color: #999;
  margin: 0;
}

/* long-form text answer */
.asg-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  line-height: 1.55;
  outline: none;
  margin-bottom: 12px;
}
.asg-textarea:focus {
  border-color: #009345;
}
.asg-textarea.is-locked,
.asg-textarea:disabled {
  background: #f7f7f7;
  color: #666;
}

.asg-locked-note {
  font-size: 13px;
  color: #2e7d32;
  font-weight: 600;
  margin: 12px 0 0;
}
.asg-error {
  color: #c0392b;
  font-size: 13.5px;
  margin-top: 10px;
}
.asg-error:empty,
.asg-success:empty {
  display: none;
}
.asg-success {
  color: #2e7d32;
  font-size: 13.5px;
  font-weight: 600;
  margin-top: 10px;
}

/* ── Course content (every lesson in this course) ────────────────────── */
.lv-course-content {
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid #ededed;
}
.lv-cc-heading {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 18px;
}
.lv-chapters {
  border: 1px solid #e3e3e3;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.lv-chapter {
  border-bottom: 1px solid #e3e3e3;
}
.lv-chapter:last-child {
  border-bottom: none;
}

/* Chapter header — gray bar, caret on the left, inline metadata */
.lv-chapter-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: #f5f5f5;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.lv-chapter-header:hover {
  background: #ededed;
}
.lv-chapter-caret {
  font-size: 13px;
  color: #555;
  flex-shrink: 0;
  transition: transform 0.2s;
  line-height: 1;
  width: 12px;
  text-align: center;
}
.lv-chapter--open .lv-chapter-caret {
  transform: rotate(90deg);
}
.lv-chapter-title {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  flex: 1;
}
.lv-chapter-meta {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}
.lv-chapter-meta span {
  font-size: 12.5px;
  color: #555;
  white-space: nowrap;
}

.lv-chapter-body {
  display: none;
  background: #fff;
}
.lv-chapter--open .lv-chapter-body {
  display: block;
}
.lv-empty {
  color: #888;
  font-size: 13px;
  padding: 14px 20px;
}

/* Per-chapter progress bar */
.lv-chapter-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 4px;
}
.lv-chapter-progress-label {
  font-size: 12px;
  font-weight: 700;
  color: #009345;
  min-width: 34px;
}
.lv-chapter-progress-track {
  flex: 1;
  height: 6px;
  background: #e9e9e9;
  border-radius: 3px;
  overflow: hidden;
}
.lv-chapter-progress-fill {
  height: 100%;
  background: #009345;
  border-radius: 3px;
  transition: width 0.3s;
}

/* Lesson rows */
.lv-lesson-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 20px;
  border-top: 1px solid #f0f0f0;
}
.lv-lesson-name {
  font-size: 14px;
  font-weight: 500;
  color: #222;
  text-decoration: none;
  flex: 1;
}
a.lv-lesson-name:hover {
  color: #009345;
  text-decoration: underline;
}
.lv-lesson-row.is-current {
  background: #f1faf4;
}
.lv-lesson-row.is-current .lv-lesson-name {
  font-weight: 700;
  color: #009345;
}
.lv-lesson-duration {
  font-size: 12.5px;
  color: #888;
  white-space: nowrap;
  flex-shrink: 0;
}
.lv-lesson-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}
.lv-lesson-link {
  font-size: 13px;
  font-weight: 600;
  color: #009345;
  text-decoration: none;
  white-space: nowrap;
}
.lv-lesson-link:hover {
  color: #007a39;
  text-decoration: underline;
}
.lv-lesson-tag {
  font-size: 12.5px;
  font-weight: 700;
  color: #009345;
  white-space: nowrap;
}
.lv-lesson-done {
  font-size: 13px;
  font-weight: 600;
  color: #2e7d32;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .lv-mt-grid {
    grid-template-columns: 1fr;
  }
  .lv-title {
    font-size: 23px;
  }
  .lv-chapter-meta {
    gap: 12px;
  }
  .lv-chapter-meta span.lv-meta-time {
    display: none;
  }
  .lv-lesson-row {
    flex-wrap: wrap;
    gap: 6px 14px;
  }
  .lv-lesson-name {
    flex-basis: 100%;
  }
  /* multi-column layout rows stack on small screens (overrides the inline
     grid-template-columns lesson-render.js sets) */
  .lv-cols {
    grid-template-columns: 1fr !important;
  }
}

/* ── Shared logged-out gate (lesson / syllabus / other portal pages) ──── */
.logged-out-message {
  text-align: center;
  padding: 40px 0;
  margin: 60px 0;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ============================================================================
   LEARNER CSV IMPORTER (li-*) — portal-partner-create-learner.html
   Column-mapping, preview, progress, and results UI for the partner CSV import.
   Paired with js/portal-learner-import.js.
   ============================================================================ */
.li-section {
  margin-top: 28px;
}
.li-section-title {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0 0 4px;
}
.li-section-hint {
  font-size: 13px;
  color: #666;
  margin: 0 0 14px;
  line-height: 1.5;
}

/* Column mapping */
.li-map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 20px;
}
.li-map-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.li-map-label {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a2e;
}
.li-map-req {
  color: #c0392b;
}
.li-map-select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #d1d5dc;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: #333;
  background: #fff;
  cursor: pointer;
}
.li-map-select:focus {
  outline: none;
  border-color: #009345;
}
.li-map-select:disabled {
  background: #f3f3f3;
  color: #888;
  cursor: default;
}

/* Bad cell highlight (invalid email / error detail) */
.li-cell-bad {
  color: #c0392b;
}

/* Progress */
.li-progress-track {
  height: 8px;
  background: #e9ebed;
  border-radius: 4px;
  overflow: hidden;
  margin: 6px 0 8px;
}
.li-progress-fill {
  height: 100%;
  background: #009345;
  border-radius: 4px;
  width: 0;
  transition: width 0.25s ease;
}
.li-progress-label {
  font-size: 13px;
  color: #555;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* Results */
.li-results-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.li-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  background: #eef0f2;
  color: #555;
}
.li-pill--ok {
  background: #ecf6f0;
  color: #009345;
}
.li-pill--bad {
  background: #f8d7da;
  color: #c0392b;
}
.li-pill--muted {
  background: #eef0f2;
  color: #888;
}

@media (max-width: 600px) {
  .li-map-grid {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Partner branding editor (portal-partner-edit-branding)
   ════════════════════════════════════════════════════════════════════════════ */

/* Color rows — native picker + hex text */
.cc-color-rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.cc-color-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cc-color-picker {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
/* Trim the native swatch chrome so the color fills the control */
.cc-color-picker::-webkit-color-swatch-wrapper {
  padding: 3px;
}
.cc-color-picker::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}
.cc-color-picker::-moz-color-swatch {
  border: none;
  border-radius: 4px;
}
.cc-color-row__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.cc-color-row__meta label {
  font-size: 13px;
  font-weight: 500;
  color: #1a1a2e;
}
.cc-color-hex {
  width: 120px;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* Combined swatch panel */
.cc-swatch-heading {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0 0 12px;
}
.cc-swatch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}
.cc-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 92px;
}
.cc-swatch__chip {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.03);
}
.cc-swatch.is-empty .cc-swatch__chip {
  background:
    linear-gradient(
        45deg,
        #eee 25%,
        transparent 25%,
        transparent 75%,
        #eee 75%,
        #eee
      )
      0 0/16px 16px,
    linear-gradient(45deg, #eee 25%, #fff 25%, #fff 75%, #eee 75%, #eee) 8px
      8px/16px 16px;
  border-style: dashed;
}
.cc-swatch__name {
  font-size: 12px;
  color: #555;
}
.cc-swatch__hex {
  font-size: 11px;
  color: #888;
  font-variant-numeric: tabular-nums;
}

/* Live header preview strip */
.cc-brand-preview {
  display: flex;
  align-items: center;
  min-height: 72px;
  padding: 14px 20px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background: #f4f5f7;
}
.cc-brand-preview.is-themed {
  border-color: transparent;
}
.cc-brand-preview__logo {
  max-height: 44px;
  max-width: 220px;
  width: auto;
  height: auto;
}
.cc-brand-preview__empty {
  font-size: 13px;
  color: #888;
}

/* Logo editor */
.cc-logo-editor {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.cc-logo-current {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 110px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fafbfc;
  overflow: hidden;
}
.cc-logo-current__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
.cc-logo-current__empty {
  font-size: 13px;
  color: #aaa;
}
.cc-logo-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.cc-logo-controls input[type="file"] {
  font-size: 13px;
  color: #555;
}
.cc-logo-hint {
  font-size: 12px;
  color: #888;
  margin: 0;
}
.cc-logo-staged {
  font-size: 12px;
  color: #1a6b2f;
  margin: 0;
  font-weight: 500;
}

@media (max-width: 600px) {
  .cc-color-rows {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   INSTRUCTOR DASHBOARD (idb-*) — portal-instructor-dashboard.html

   One accordion row per course the contact instructs; each expanded panel is
   the Rosters tab of "Custom Modules/Portal Modules/Course Overview.module",
   cloned from the instructor-roster-template.html partial.

   Almost everything inside a panel already has styles above and is reused as
   is: .stats-dashboard, .task-list / .task-list__table, .sortable-header, the
   .filter-* family, .pagination, .learner-name, .empty-state, the loading and
   error states, .loading-spinner, .tooltip-container, and .upload-modal-header
   (which the learner tooltip borrows). The accordion mechanics come from the
   ACCORDION STYLE OVERRIDES block above. What follows is only what is new: the
   list chrome, the header extras, and the learner tooltip — the one component
   that lived solely in the module's own module.css.
   ============================================================================= */

.idb-course-list {
  display: flex;
  flex-direction: column;
}

/* ─── One card per course ─────────────────────────────────────────────────────
   The card is the whole <section>, so the title and the roster it expands to
   share a single surface. The roster tab was authored for a tab shell that
   already supplied that chrome, so its own .kwaray-container is stripped below
   rather than nested inside this one.

   No overflow:hidden here to clip the corners — .filter-dropdown-menu is
   absolutely positioned several levels down and a menu opened near the bottom
   of a short table would be cut off. Nothing inside paints its own background,
   so the radius is respected without clipping. */
.idb-course {
  background: #ffffff;
  box-shadow: 0 0 14px 0 rgba(0, 7, 22, 0.14);
  border-radius: 8px;
}

/* The shared .accordion-header:not(:first-child) rule cannot space these — each
   header IS the first child of its own section — so the gap lives here. */
.idb-course + .idb-course {
  margin-top: 30px;
}

/* List-level loading / empty / error card. */
.idb-status {
  padding: 30px 20px;
  text-align: center;
}

.idb-status h3 {
  margin: 0 0 8px;
}

.idb-status p {
  margin: 0 auto;
  max-width: 560px;
  color: #666;
}

.idb-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 24px;
  border-radius: 8px;
  /* Reserved even when collapsed so toggling does not shift the row by 1px. */
  border-bottom: 1px solid transparent;
}

/* Divider under the title, only while the panel is open. Driven off the
   aria-expanded the toggle already maintains, rather than off .collapsed on the
   panel — a border there would survive max-height:0 and leave a stray hairline
   under a shut card. */
.idb-accordion-header[aria-expanded="true"] {
  border-bottom-color: #ebebeb;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Inset, so the ring hugs the card edge instead of floating outside it. */
.idb-accordion-header:focus-visible {
  outline: 2px solid #009345;
  outline-offset: -2px;
}

/* The heading shares the header row with the "Open course overview" link, so
   its default block margins would knock the two out of alignment.

   The size is set here rather than left to the theme's global h2, which is
   relative (1.5em) and so drifts with whatever the surrounding font-size
   happens to be. The chevron (20px) and the learner-count badge (14px) carry
   their own sizes and are unaffected. */
.idb-accordion-header h2 {
  margin: 0;
  font-size: 24px;
}

.idb-course__title {
  overflow-wrap: anywhere;
}

.idb-course__count {
  font-size: 14px;
  font-weight: 500;
  color: #666;
  white-space: nowrap;
}

/* Sits inside the header but is a link, not a toggle — the JS ignores clicks
   that land on it. */
.idb-course__link {
  font-size: 14px;
  font-weight: 500;
  color: #009345;
  text-decoration: none;
  white-space: nowrap;
}

.idb-course__link:hover {
  text-decoration: underline;
}

/* ─── Panel layout ─── ported from Course Overview.module/module.css:68-83,
   where these were scoped to #roster-content / .roster-filters.

   The panel sits flush under the header inside the shared card: the divider
   above already separates them, so .accordion-content's 20px margin would only
   push a gap into the middle of the card. */
.idb-course__panel {
  margin-top: 0;
}

/* The roster template still ships the .kwaray-container the tabbed original
   needed. Inside the course card it would be a card within a card, so it is
   demoted to a plain wrapper and keeps only its layout role. */
.idb-course__panel .kwaray-container {
  background: none;
  box-shadow: none;
  border-radius: 0;
}

/* Separates the stat tiles from the filters + table below, standing in for the
   gap the two used to get from being separate cards. */
.idb-course__panel .stats-dashboard {
  border-bottom: 1px solid #ebebeb;
}

.idb-roster-filters {
  padding: 20px 20px 0;
}

.idb-course__panel .task-list {
  margin-top: 0;
  margin-bottom: 0;
}

.idb-course__panel .task-list .task-list__table {
  margin-top: 0;
}

/* Last thing in the card — .search-row's 20px margin would sit on top of this
   padding and leave a dead band above the bottom edge. */
.idb-course__panel .secondary-pagination {
  padding: 0 20px 20px;
  margin-bottom: 0;
}

/* ─── Filter selectors as cards ───────────────────────────────────────────────
   The shared control (portal.css:1338-1454) is a green-outlined box with a pale
   green #ecf6f1 fill. Here it takes the .kwaray-container treatment instead —
   white, soft shadow, 8px radius — so it reads as a raised control on the
   panel. Scoped to the dashboard on purpose: the same classes drive the filter
   bars on My Tasks, Gradebook, Course Overview, Stripe Invoices and Library v2,
   which keep the outlined styling.

   Do NOT add overflow:hidden to the group to clip these corners — the
   absolutely-positioned .filter-dropdown-menu lives inside it and would be
   clipped away. The child radii are set to match instead. */
.idb-course__panel .filter-dropdown-group {
  background: #ffffff;
  box-shadow: 0 0 14px 0 rgba(0, 7, 22, 0.14);
  border: none;
  border-radius: 8px;
}

.idb-course__panel .filter-dropdown-trigger {
  background-color: transparent;
  border-left: none;
  border-right: none;
}

/* The blue ring was a Bootstrap leftover that only ever read as "open" next to
   the green borders. With those gone it is the sole open-state cue, so it
   follows the brand green. */
.idb-course__panel .filter-dropdown-trigger.active {
  box-shadow: 0 0 0 2px rgba(0, 147, 69, 0.25);
}

.idb-course__panel .filter-clear-btn {
  background: transparent;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* The base :hover/:focus/:active rules match at the same specificity as the
   rule above but are declared earlier, so the transparent fill would win and
   swallow the orange. Restated one level deeper to keep it. */
.idb-course__panel .filter-clear-btn:hover,
.idb-course__panel .filter-clear-btn:focus,
.idb-course__panel .filter-clear-btn:active {
  background-color: #ea6514;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* The status options are built as <label class="filter-dropdown-option"> with
   the checkbox nested inside — an id/for pair would collide across panels — so
   the label text is a <span> rather than the <label> the base rule targets. */
.filter-dropdown-option > span {
  flex: 1;
  cursor: pointer;
  font-weight: normal;
  margin: 0;
  font-size: 14px;
}

.idb-course__panel .learner-name.clickable {
  color: #009345;
}

.idb-course__panel .learner-name.clickable:hover {
  cursor: pointer;
  text-decoration: underline;
}

/* =============================================================================
   LEARNER TOOLTIP COMPONENT
   Ported from Course Overview.module/module.css:89-364. Deliberately NOT
   scoped to .idb-course__panel: the tooltip is appended to <body>, outside the
   panel that opened it.
   ============================================================================= */

.learner-tooltip {
  position: fixed;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  max-width: 75%;
  min-width: 400px;
  max-height: 60vh;
  z-index: 1000;
  opacity: 0;
  transform: translateY(-10px) scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease;
  display: flex;
  flex-direction: column;
}

.learner-tooltip .upload-modal-header {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
}

.learner-tooltip .upload-modal-header h3 {
  color: #fff;
  font-family: futura-pt, sans-serif !important;
  font-size: 20px;
  font-weight: 500;
  margin: 0;
}

.tooltip-content {
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
}

.tooltip-content::-webkit-scrollbar {
  width: 8px;
}

.tooltip-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.tooltip-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.tooltip-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.assignments-summary {
  margin-bottom: 16px;
  padding-bottom: 8px;
  flex-shrink: 0;
}

.assignments-summary .summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.assignment-count {
  font-weight: 600;
  color: #333;
  font-size: 14px;
  flex: 1;
}

.view-all-assignments-link {
  color: #009345;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: color 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.view-all-assignments-link:hover {
  color: #354133;
  text-decoration: underline;
}

.assignment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
  padding: 10px 0 0;
  border-top: 1px solid #ebebeb;
}

.assignment-header {
  width: 100%;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}

.assignment-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  flex: 1;
  line-height: 1.4;
}

.assignment-status {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.no-assignments {
  text-align: center;
  color: #666;
  font-style: italic;
  padding: 40px 20px;
  margin: 0;
  background: #f8f9fa;
  border-radius: 6px;
  border: 2px dashed #dee2e6;
}

/* Assignment status colors */
.assignment-status.status-completed,
.assignment-status.status-complete {
  background-color: #d4edda;
  color: #155724;
}

.assignment-status.status-graded {
  background-color: #e2d9f3;
  color: #563d7c;
}

.assignment-status.status-submitted {
  background-color: #fff3cd;
  color: #856404;
}

.assignment-status.status-in_progress {
  background-color: #d1ecf1;
  color: #0c5460;
}

.assignment-status.status-in_review {
  background-color: #ffeaa7;
  color: #8e5000;
}

.assignment-status.status-awaiting_submission {
  background-color: #f8d7da;
  color: #721c24;
}

.assignment-status.status-unknown {
  background-color: #f8f9fa;
  color: #6c757d;
}

/* Assignment item border colors */
.assignment-item[data-status="completed"],
.assignment-item[data-status="complete"] {
  border-left-color: #28a745;
}

.assignment-item[data-status="graded"] {
  border-left-color: #6f42c1;
}

.assignment-item[data-status="submitted"] {
  border-left-color: #ffc107;
}

.assignment-item[data-status="in_progress"] {
  border-left-color: #17a2b8;
}

.assignment-item[data-status="in_review"] {
  border-left-color: #fd7e14;
}

.assignment-item[data-status="unknown"] {
  border-left-color: #6c757d;
}

/* Assignment links */
.assignments-list .assignment-link {
  color: #000;
  text-decoration: none;
  transition: color 0.2s ease;
  font-size: 14px;
  font-family: futura-pt, sans-serif;
  font-weight: 500;
}

.assignments-list .assignment-link:hover {
  color: #009345;
  text-decoration: underline;
}

/* Five tiles get tight beside the portal sidebar — same tightening the module
   applied to #roster-content (module.css:484-494). */
@media (max-width: 1024px) {
  .idb-course__panel .stats-dashboard {
    gap: 20px;
    padding: 20px 30px;
  }

  .idb-course__panel .stats-dashboard__item .stat-value {
    font-size: 36px;
    line-height: 36px;
  }
}

@media (max-width: 767px) {
  .idb-accordion-header {
    align-items: flex-start;
  }

  .idb-roster-filters {
    padding: 15px 15px 0;
  }

  .idb-course__panel .secondary-pagination {
    padding: 0 15px 15px;
  }

  .learner-tooltip {
    min-width: 0;
    max-width: 92%;
  }
}