/* =========================================================
   apps/mentorias — Custom styles on top of Tailwind CDN
   ========================================================= */

/* Smooth page transitions */
#app {
  transition: opacity 0.15s ease-in-out;
}
#app.loading {
  opacity: 0;
}

/* Markdown rendered content */
.markdown-body h1 { @apply text-2xl font-bold mt-6 mb-3 text-gray-900; }
.markdown-body h2 { @apply text-xl font-semibold mt-5 mb-2 text-gray-800; }
.markdown-body h3 { @apply text-lg font-semibold mt-4 mb-2 text-gray-800; }
.markdown-body p  { @apply mb-3 leading-relaxed text-gray-700; }
.markdown-body ul { @apply list-disc pl-5 mb-3 text-gray-700; }
.markdown-body ol { @apply list-decimal pl-5 mb-3 text-gray-700; }
.markdown-body li { @apply mb-1; }
.markdown-body a  { @apply text-brand-600 underline hover:text-brand-800; }
.markdown-body blockquote {
  @apply border-l-4 border-brand-300 pl-4 italic text-gray-600 my-3;
}
.markdown-body pre {
  @apply bg-gray-100 rounded p-3 overflow-x-auto my-3 text-sm font-mono;
}
.markdown-body code {
  @apply bg-gray-100 rounded px-1 text-sm font-mono;
}
.markdown-body pre code {
  @apply bg-transparent p-0;
}
.markdown-body table {
  @apply w-full border-collapse mb-3 text-sm;
}
.markdown-body th {
  @apply bg-gray-100 border border-gray-300 px-3 py-2 text-left font-semibold;
}
.markdown-body td {
  @apply border border-gray-300 px-3 py-2;
}
.markdown-body hr {
  @apply border-gray-200 my-4;
}

/* Comment card expand animation */
.comment-card-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.comment-card-body.expanded {
  max-height: 9999px;
  transition: max-height 0.5s ease-in;
}

/* File uploader drop zone */
.drop-zone {
  transition: border-color 0.2s, background 0.2s;
}
.drop-zone.drag-over {
  @apply border-brand-500 bg-brand-50;
}

/* Tab active state (used in admin panel and page-editor) */
.tab-btn.active {
  @apply border-b-2 border-brand-600 text-brand-700 font-semibold;
}

/* Spinner utility */
.spinner {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Badge colours for project status */
.badge-pending   { @apply bg-yellow-100 text-yellow-800; }
.badge-active    { @apply bg-green-100 text-green-800; }
.badge-archived  { @apply bg-gray-100 text-gray-600; }
.badge-private   { @apply bg-red-100 text-red-700; }
.badge-public    { @apply bg-blue-100 text-blue-700; }