/*
 * Prepson Scholar styles.
 *
 * Written as plain CSS because Prepson loads Tailwind via CDN at runtime,
 * which does NOT process `@apply` directives in <style> blocks. Utility
 * classes work inline in HTML; custom classes with @apply do not. This
 * file defines the shared Scholar look with real CSS properties.
 *
 * Colours match the Prepson brand: primary #6366F1 (indigo-500), hover
 * #4F46E5 (indigo-600), text #111827, borders #E5E7EB.
 */

/* ---------------------------------------------------------------- */
/* Buttons                                                          */
/* ---------------------------------------------------------------- */

.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
}

.btn-primary {
  background: #6366F1;
  color: #ffffff;
}
.btn-primary:hover:not(:disabled) {
  background: #4F46E5;
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-secondary {
  background: #ffffff;
  color: #1f2937;
  border-color: #d1d5db;
}
.btn-secondary:hover:not(:disabled) {
  background: #f3f4f6;
  border-color: #9ca3af;
}
.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-ghost {
  background: transparent;
  color: #4b5563;
  padding: 0.375rem 0.75rem;
}
.btn-ghost:hover:not(:disabled) {
  background: #f3f4f6;
  color: #111827;
}

.btn-danger {
  background: #ffffff;
  color: #b91c1c;
  border-color: #fecaca;
}
.btn-danger:hover:not(:disabled) {
  background: #fef2f2;
  border-color: #fca5a5;
}

/* ---------------------------------------------------------------- */
/* Cards                                                            */
/* ---------------------------------------------------------------- */

.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1.25rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.stat-tile {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 1rem;
}

/* ---------------------------------------------------------------- */
/* Chips (small pills)                                              */
/* ---------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  border: 1px solid transparent;
}

.chip-ok {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

.chip-warn {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}

.chip-neutral {
  background: #f3f4f6;
  color: #374151;
  border-color: #e5e7eb;
}

/* ---------------------------------------------------------------- */
/* Prose body (chapter rendering, etc.)                             */
/* ---------------------------------------------------------------- */

.prose-body {
  color: #1f2937;
  line-height: 1.65;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.prose-body h1,
.prose-body h2,
.prose-body h3,
.prose-body h4 {
  font-weight: 600;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}
.prose-body h1 { font-size: 1.25rem; }
.prose-body h2 { font-size: 1.125rem; }
.prose-body h3 { font-size: 1rem; }
.prose-body h4 { font-size: 0.9375rem; }

/* ---------------------------------------------------------------- */
/* Toasts                                                           */
/* ---------------------------------------------------------------- */

.toast {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  font-size: 0.875rem;
  max-width: 24rem;
  border: 1px solid transparent;
  animation: scholar-toast-in 0.2s ease-out;
}
.toast-ok {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}
.toast-err {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
.toast-info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

@keyframes scholar-toast-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

/* ---------------------------------------------------------------- */
/* Tables inside cards (admin lists) — scoped so we don't override  */
/* other Prepson pages that also load this file.                    */
/* ---------------------------------------------------------------- */

.card table {
  width: 100%;
  border-collapse: collapse;
}
.card table th {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #4b5563;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.5rem 0.75rem;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}
.card table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #f3f4f6;
  font-size: 0.875rem;
  color: #1f2937;
  vertical-align: top;
}
.card table tbody tr:hover {
  background: #f9fafb;
}

/* ---------------------------------------------------------------- */
/* Focus rings for inputs — subtle brand indigo                     */
/* ---------------------------------------------------------------- */

.card input:focus,
.card select:focus,
.card textarea:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: #6366F1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* ---------------------------------------------------------------- */
/* Layout helpers                                                   */
/* ---------------------------------------------------------------- */

.no-underline-link { text-decoration: none; }
.text-primary { color: #6366F1; }
.hover\:text-primary:hover { color: #6366F1; }

/* ---------------------------------------------------------------- */
/* Section headings inside cards get a brand indigo accent          */
/* ---------------------------------------------------------------- */

.card > h3:first-child,
.card > .flex:first-child > h3 {
  color: #4338CA;
  letter-spacing: -0.01em;
}

/* Section headings on the admin/workspace pages get a subtle accent bar */
.scholar-section-heading {
  position: relative;
  padding-left: 0.75rem;
  color: #1f2937;
}
.scholar-section-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15rem;
  bottom: 0.15rem;
  width: 3px;
  border-radius: 2px;
  background: #6366F1;
}