/* Tiptap Editor Styles */

.tiptap-editor-wrapper {
  @apply max-w-none;
}

/* Editor Content - Prose Styling */
.tiptap-editor {
  @apply outline-none;
}

.ProseMirror {
  @apply outline-none min-h-[300px] text-lg leading-relaxed text-slate-800;
}

/* Placeholder */
.ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  @apply text-slate-400 float-left h-0 pointer-events-none;
}

/* Headings */
.ProseMirror h1 {
  @apply text-4xl font-bold mt-8 mb-4 text-slate-900;
}

.ProseMirror h2 {
  @apply text-3xl font-bold mt-6 mb-3 text-slate-900;
}

.ProseMirror h3 {
  @apply text-2xl font-semibold mt-5 mb-2 text-slate-800;
}

/* Paragraphs */
.ProseMirror p {
  @apply my-3;
}

/* Text Formatting */
.ProseMirror strong {
  @apply font-bold text-slate-900;
}

.ProseMirror em {
  @apply italic;
}

.ProseMirror code {
  @apply bg-slate-100 text-rose-600 px-1.5 py-0.5 rounded text-sm font-mono;
}

/* Links */
.ProseMirror a {
  @apply text-amber-600 underline hover:text-amber-700 cursor-pointer;
}

/* Lists */
.ProseMirror ul {
  @apply list-disc list-outside ml-6 my-4 space-y-1;
}

.ProseMirror ol {
  @apply list-decimal list-outside ml-6 my-4 space-y-1;
}

.ProseMirror li {
  @apply my-1;
}

.ProseMirror li > p {
  @apply my-0;
}

/* Task Lists */
.ProseMirror ul[data-type="taskList"] {
  @apply list-none ml-0 space-y-2;
}

.ProseMirror ul[data-type="taskList"] li {
  @apply flex items-start gap-2;
}

.ProseMirror ul[data-type="taskList"] li > label {
  @apply flex items-center gap-2 flex-1;
}

.ProseMirror ul[data-type="taskList"] li > label > input[type="checkbox"] {
  @apply w-4 h-4 rounded border-slate-300 text-amber-600 focus:ring-amber-500 focus:ring-offset-0 cursor-pointer mt-1;
}

.ProseMirror ul[data-type="taskList"] li > label > div {
  @apply flex-1;
}

.ProseMirror ul[data-type="taskList"] li[data-checked="true"] > label > div {
  @apply line-through text-slate-400;
}

/* Code Blocks */
.ProseMirror pre {
  @apply bg-slate-800 text-slate-100 rounded-lg p-4 my-4 overflow-x-auto;
}

.ProseMirror pre code {
  @apply bg-transparent text-slate-100 p-0 text-sm font-mono block;
}

/* Blockquotes */
.ProseMirror blockquote {
  @apply border-l-4 border-slate-300 pl-4 italic text-slate-600 my-4;
}

/* Horizontal Rule */
.ProseMirror hr {
  @apply my-8 border-slate-300;
}

/* Highlight */
.ProseMirror mark {
  @apply bg-yellow-200 px-1 rounded;
}

/* Selection */
.ProseMirror ::selection {
  @apply bg-amber-200;
}

/* Focus */
.ProseMirror:focus {
  @apply outline-none;
}

/* Toolbar Active States */
button[data-format].is-active {
  @apply bg-amber-100 text-amber-700;
}

/* Callout Blocks */
.ProseMirror div[data-callout] {
  @apply my-4 p-4 border-l-4 rounded-r-lg;
}

.ProseMirror div[data-callout][data-type="info"] {
  @apply bg-blue-50 border-blue-500 text-blue-900;
}

.ProseMirror div[data-callout][data-type="warning"] {
  @apply bg-amber-50 border-amber-500 text-amber-900;
}

.ProseMirror div[data-callout][data-type="success"] {
  @apply bg-emerald-50 border-emerald-500 text-emerald-900;
}

.ProseMirror div[data-callout][data-type="error"] {
  @apply bg-red-50 border-red-500 text-red-900;
}

.ProseMirror div[data-callout] p {
  @apply my-1;
}

/* Slash Command Menu */
.slash-command-menu {
  @apply fixed z-50 bg-white border border-slate-200 rounded-xl shadow-xl p-2 min-w-[300px] max-h-[400px] overflow-y-auto;
}

.slash-command-item {
  @apply p-3 rounded-lg cursor-pointer transition-all;
}

.slash-command-item:hover {
  @apply bg-amber-50;
}

.slash-command-item.selected {
  @apply bg-amber-100;
}

.slash-command-item .title {
  @apply font-medium text-slate-900;
}

.slash-command-item .description {
  @apply text-xs text-slate-500;
}

/* Bilder im Editor */
.tiptap-editor .tiptap-image {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 1rem 0;
  cursor: default;
}

.tiptap-editor .tiptap-image.ProseMirror-selectednode {
  outline: 2px solid #f59e0b;
  outline-offset: 2px;
}