/* ──────────────────────────────────────────────────────────────────
   LearningDj — Global styles
   Tailwind handles layout/colors. This file adds:
   1. Task-description rich content rendering
   2. Utility overrides that Tailwind CDN can't easily express
   3. Component-specific polish
   ────────────────────────────────────────────────────────────────── */

/* ── Animation utilities ────────────────────────────────────────── */
.spin { animation: spin 0.8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.fade-in { animation: fadeIn 0.2s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Verdict colors (AI evaluation) ────────────────────────────── */
.verdict-pass      { color: #22c55e; font-weight: 600; }
.verdict-fail      { color: #ef4444; font-weight: 600; }
.verdict-uncertain { color: #f59e0b; font-weight: 600; }

/* ── CKEditor 5 dark mode overrides ────────────────────────────── */
.dark .ck.ck-editor__editable:not(.ck-editor__nested-editable) {
  background-color: #16161A;
  color: #F0F0F4;
  border-color: #27272A;
}
.dark .ck.ck-toolbar { background-color: #111117; border-color: #27272A; }
.dark .ck.ck-toolbar .ck.ck-button { color: #F0F0F4; }
.dark .ck.ck-toolbar .ck.ck-button:hover:not(.ck-disabled),
.dark .ck.ck-toolbar .ck.ck-button.ck-on { background-color: #27272A; }
.dark .ck.ck-toolbar__separator { background-color: #3F3F46; }
.dark .ck.ck-dropdown__panel,
.dark .ck.ck-list { background-color: #111117; border-color: #27272A; }
.dark .ck.ck-list__item .ck-button { color: #F0F0F4; }
.dark .ck.ck-list__item .ck-button:hover { background-color: #27272A; }

/* ── Markdown split pane (add_task) ─────────────────────────────── */
#md-split { min-height: 300px; }
#markdown  { height: 100%; min-height: 280px; }
#md-preview { min-height: 280px; }

/* ── Task description — rich content rendering ───────────────────
   Resets Tailwind preflight's strip of list-style, margins, etc.
   Applied to all .task-description containers.
   ────────────────────────────────────────────────────────────────── */
.task-description {
  line-height: 1.7;
  word-break: break-word;
}

.task-description ul {
  list-style-type: disc;
  padding-left: 1.6rem;
  margin: 0.75rem 0;
}
.task-description ol {
  list-style-type: decimal;
  padding-left: 1.6rem;
  margin: 0.75rem 0;
}
.task-description li {
  margin-bottom: 0.4rem;
}
.task-description li > ul,
.task-description li > ol {
  margin: 0.25rem 0;
}

.task-description h1,
.task-description h2,
.task-description h3,
.task-description h4 {
  font-weight: 700;
  margin: 1.4rem 0 0.6rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.task-description h1 { font-size: 1.5rem; }
.task-description h2 { font-size: 1.25rem; }
.task-description h3 { font-size: 1.1rem; border-bottom: 1px solid rgba(99,102,241,0.15); padding-bottom: 0.3rem; }
.task-description h4 { font-size: 1rem; }

.task-description p {
  margin-bottom: 0.85rem;
}

.task-description a {
  color: #6366f1;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.task-description a:hover { color: #818cf8; }

.task-description code {
  font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
  font-size: 0.85em;
  background: #EEF2FF !important;  /* indigo-50 */
  border: 1px solid #C7D2FE !important;
  color: #4338CA !important;        /* indigo-700 */
  border-radius: 5px;
  padding: 1px 6px;
}
.dark .task-description code {
  background: rgba(99, 102, 241, 0.18) !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
  color: #A78BFA !important;
}

.task-description pre {
  background: #0d0d12;
  color: #f8f8f2;              /* jasny tekst — widoczny niezależnie od motywu */
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin: 1rem 0;
  font-size: 0.85em;
}
.task-description pre code {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: inherit !important;
  font-size: inherit;
}

.task-description blockquote {
  border-left: 3px solid #6366f1;
  background: rgba(99,102,241,0.05);
  padding: 0.6rem 1rem;
  margin: 0.85rem 0;
  border-radius: 0 8px 8px 0;
  color: #71717A;
  font-style: italic;
}
.dark .task-description blockquote { color: #A1A1AA; }

.task-description table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.85rem 0;
  font-size: 0.9em;
  border-radius: 8px;
  overflow: hidden;
}
.task-description th {
  background: rgba(99,102,241,0.08);
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  border: 1px solid rgba(99,102,241,0.15);
}
.task-description td {
  padding: 7px 12px;
  border: 1px solid rgba(0,0,0,0.08);
}
.dark .task-description td { border-color: rgba(255,255,255,0.06); }

.task-description strong { font-weight: 700; }
.task-description em     { font-style: italic; }

.task-description hr {
  border: none;
  border-top: 1px solid rgba(99,102,241,0.15);
  margin: 1.5rem 0;
}

/* ── Attached task row (strikethrough w DataTables attach) ──────── */
tr.attached-task td { text-decoration: line-through; opacity: 0.45; }
tr.attached-task td a { text-decoration: line-through; }
tr.attached-task button[name="attach"] { display: none !important; }

/* ── Highlight.js code in modals / panels ────────────────────────── */
pre code.hljs {
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
}