/* Lesson Form Base Styles */
.edit-person-form.lesson-form {
  padding: var(--spacing-base);
  max-width: var(--content-max-width);
}

.lesson-form .form-section {
  margin-bottom: var(--spacing-base);
}

.lesson-form .form-section p {
  margin: 0;
  line-height: var(--leading-loose);
}

/* Try Section Styling */
.try-section {
  margin: var(--spacing-base) 0;
}

.try-checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.try-data {
  background-color: var(--color-table-stripe);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-base);
  padding: var(--spacing-base);
  margin-left: var(--spacing-lg);
}

.try-data table {
  width: 100%;
  border-collapse: separate;
  border-spacing: var(--spacing-base) var(--spacing-sm);
}

.try-data th {
  text-align: left;
  color: var(--color-text);
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  padding-bottom: var(--spacing-sm);
}

.try-data td {
  vertical-align: top;
}

.try-data select {
  width: 100%;
  padding: var(--spacing-md);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

/* Slide/Fade Toggle Transitions (editLesson try-data) */
.try-data {
  overflow: hidden;
  max-height: 500px;
  transition: max-height var(--transition-normal) ease,
              opacity var(--transition-normal) ease,
              padding var(--transition-normal) ease,
              margin var(--transition-normal) ease;
}

.try-data.slide-hidden {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  margin: 0;
}

.inline-try-data {
  transition: opacity var(--transition-normal) ease;
  opacity: 1;
}

.inline-try-data.fade-hidden {
  opacity: 0;
}

.try-data.no-transition,
.inline-try-data.no-transition {
  transition: none;
}

/* Group Class Styles */
.edit-person-form.group-class-form {
  padding: var(--spacing-base);
  max-width: var(--content-max-width);
}

.group-class-form .form-section {
  margin-bottom: var(--spacing-base);
}

.group-class-form .form-section p {
  margin: 0;
  line-height: var(--leading-loose);
}

/* Students Section */
.students-section {
  margin: var(--spacing-sm) 0;
  border: var(--border-normal) solid var(--color-border);
  border-radius: var(--radius-base);
  background-color: var(--color-background);
}

.students-section h3 {
  margin: 0;
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--color-table-header);
  border-bottom: var(--border-normal) solid var(--color-border);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.students {
  margin: 0;
  max-height: 450px;
  overflow-y: auto;
  padding: var(--spacing-xs);
}

/* Student List Styling */
.students ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.students li {
  padding: var(--spacing-xxs) var(--spacing-sm);
  line-height: var(--leading-snug);
}

.students li:hover {
  background-color: var(--color-table-header);
}

/* Custom Scrollbar */
.students::-webkit-scrollbar {
  width: 6px;
}

.students::-webkit-scrollbar-track {
  background: var(--color-table-stripe);
}

.students::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-sm);
}

.students::-webkit-scrollbar-thumb:hover {
  background: var(--color-secondary);
}

/* Form Field Sizing */
#id_date {
  width: var(--input-width-sm);
  padding: var(--spacing-md);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

#id_cost,
#id_type {
  padding: var(--spacing-md);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

/* Lesson Table Overrides */
#lesson-table tr.lessons.payments td {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  width: auto !important;
}

#lesson-table tr.lessons.payments ul,
#lesson-table tr.lessons.payments ul li,
#lesson-table tr.lessons.payments ul li * {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
}

#lesson-table tr.lessons.payments td[colspan="9"] {
  width: 100% !important;
  max-width: 100% !important;
}

/* Format notes for readability */
#lesson-table tr.lessons.payments ul {
  padding: var(--spacing-md) var(--spacing-lg) !important;
  margin: 0;
  list-style-position: inside;
}

#lesson-table tr.lessons.payments ul li {
  margin-bottom: var(--spacing-sm);
  line-height: var(--leading-relaxed);
}

/* Style the horizontal rule in notes */
#lesson-table tr.lessons.payments ul hr {
  margin: var(--spacing-md) 0;
  border: none;
  border-top: var(--border-thin) solid var(--color-border);
}

/* Program notes header spacing */
#lesson-table tr.lessons.payments ul li[style*="font-weight: bold"] {
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

/* Responsive Design */
@media (max-width: 768px) /* --breakpoint-md */ {
  .edit-person-form.lesson-form,
  .edit-person-form.group-class-form {
    margin: var(--spacing-sm);
    padding: var(--spacing-sm);
  }

  .try-data table {
    border-spacing: var(--spacing-sm) var(--spacing-xs);
  }

  .students-section {
    margin: var(--spacing-xs) 0;
  }

  .students {
    max-height: 300px;
  }
}

@media (max-width: 480px) /* --breakpoint-sm */ {
  .try-data {
    padding: var(--spacing-sm);
    margin-left: var(--spacing-base);
  }

  #lesson-table tr.lessons.payments ul {
    padding: var(--spacing-sm) var(--spacing-base) !important;
  }
}