/* Custom styles for Markdown lists */

/* Vertical spacing for main lists - Override Tailwind prose styles */
.markdown-content > ul,
.markdown-content > ol,
.markdown-preview > ul,
.markdown-preview > ol,
.prose.markdown-content > ul,
.prose.markdown-content > ol {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

/* Unordered lists - Blue checkmarks */
.markdown-content ul,
.markdown-preview ul {
  list-style: none !important;
  padding-left: 0;
}

.markdown-content ul > li,
.markdown-preview ul > li {
  position: relative;
  padding-left: 1.5rem;
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.markdown-content ul > li::before,
.markdown-preview ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 1rem;
  height: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.0004 3.60022L5.40039 10.2002L2.40039 7.20022' stroke='%237277FD' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* Ordered lists - Green numbered circles */
.markdown-content ol,
.markdown-preview ol {
  list-style: none !important;
  padding-left: 0;
  counter-reset: list-counter;
}

.markdown-content ol > li,
.markdown-preview ol > li {
  position: relative;
  padding-left: 3.5rem;
  counter-increment: list-counter;
  margin-bottom: 1rem;
}

.markdown-content ol > li::before,
.markdown-preview ol > li::before {
  content: counter(list-counter);
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #86efac; /* Green-300 */
  color: #166534; /* Green-800 */
  font-weight: 600;
  font-size: 0.875rem;
}

/* Nested lists adjustments - less spacing than main lists */
.markdown-content ul ul,
.markdown-content ol ol,
.markdown-content ul ol,
.markdown-content ol ul,
.markdown-preview ul ul,
.markdown-preview ol ol,
.markdown-preview ul ol,
.markdown-preview ol ul {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.markdown-content ul ul > li::before,
.markdown-preview ul ul > li::before {
  opacity: 0.6; /* Lighter check for nested items */
  width: 0.875rem;
  height: 0.875rem;
}

.markdown-content ol ol > li::before,
.markdown-preview ol ol > li::before {
  background-color: #bbf7d0; /* Green-200 for nested */
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.75rem;
}