/* EditorJS Custom Styles */

/* Editor Container */
.codex-editor {
  @apply text-foreground;
}

.codex-editor__redactor {
  @apply pb-48;
}

/* Blocks */
.ce-block__content,
.ce-toolbar__content {
  max-width: 100%;
}

.ce-block {
  @apply py-2;
}

.ce-block--selected .ce-block__content {
  @apply bg-accent/10;
}

/* Paragraph */
.ce-paragraph {
  @apply text-foreground leading-relaxed;
  line-height: 1.6em;
  padding: 0.4em 0;
}

.ce-paragraph[data-placeholder]:empty::before {
  @apply text-muted-foreground;
}

/* Headers */
.ce-header {
  @apply text-foreground font-bold;
  padding: 0.6em 0;
}

.ce-header[contentEditable=true][data-placeholder]::before {
  @apply text-muted-foreground;
}

/* Lists */
.cdx-list {
  @apply text-foreground;
}

.cdx-list__item {
  @apply leading-relaxed;
  padding: 0.3em 0;
  line-height: 1.6em;
}

.cdx-list--unordered {
  @apply list-disc list-inside;
}

.cdx-list--ordered {
  @apply list-decimal list-inside;
}

/* Code Block */
.ce-code__textarea {
  @apply bg-muted text-foreground font-mono text-sm border-border rounded-lg;
  min-height: 200px;
  padding: 1em;
  line-height: 1.6em;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

.ce-code__textarea:focus {
  @apply outline-none ring-2 ring-primary/50;
}

/* Image Tool */
.cdx-input {
  @apply bg-background text-foreground border border-border rounded-lg px-3 py-2;
  @apply focus:outline-none focus:ring-2 focus:ring-primary/50;
}

.image-tool__image {
  @apply rounded-lg;
}

.image-tool__image-picture {
  @apply rounded-lg overflow-hidden;
}

.image-tool__caption {
  @apply text-muted-foreground text-sm text-center mt-2;
}

.image-tool--filled .cdx-input {
  @apply text-foreground;
}

/* Toolbar */
.ce-toolbar__actions {
  @apply opacity-100;
}

.ce-toolbar__plus,
.ce-toolbar__settings-btn {
  @apply text-muted-foreground hover:text-foreground transition-colors;
}

.ce-toolbar__plus:hover,
.ce-toolbar__settings-btn:hover {
  @apply bg-accent;
}

/* Inline Toolbar */
.ce-inline-toolbar {
  @apply bg-card border border-border rounded-lg shadow-lg;
}

.ce-inline-tool {
  @apply text-foreground hover:bg-accent transition-colors;
}

.ce-inline-tool:hover {
  @apply bg-accent;
}

.ce-inline-tool--active {
  @apply bg-primary text-primary-foreground;
}

/* Popover */
.ce-popover {
  @apply bg-card border border-border rounded-lg shadow-lg;
}

.ce-popover__item {
  @apply text-foreground hover:bg-accent transition-colors;
}

.ce-popover__item:hover {
  @apply bg-accent;
}

.ce-popover__item--active {
  @apply bg-accent;
}

.ce-popover__item-icon {
  @apply text-muted-foreground;
}

/* Conversion Toolbar */
.ce-conversion-toolbar {
  @apply bg-card border border-border rounded-lg shadow-lg;
}

.ce-conversion-tool {
  @apply text-foreground hover:bg-accent transition-colors;
}

.ce-conversion-tool:hover {
  @apply bg-accent;
}

.ce-conversion-tool--focused {
  @apply bg-accent;
}

/* Settings */
.ce-settings {
  @apply bg-card border border-border rounded-lg shadow-lg;
}

.ce-settings__button {
  @apply text-foreground hover:bg-accent transition-colors;
}

.ce-settings__button:hover {
  @apply bg-accent;
}

/* Toolbox */
.ce-toolbox {
  @apply bg-card border border-border rounded-lg shadow-lg;
}

.ce-toolbox__button {
  @apply text-foreground hover:bg-accent transition-colors;
}

.ce-toolbox__button:hover {
  @apply bg-accent;
}

.ce-toolbox__button--active {
  @apply bg-accent;
}

/* Input */
.cdx-input {
  @apply bg-background text-foreground border border-border rounded-lg px-3 py-2;
  @apply focus:outline-none focus:ring-2 focus:ring-primary/50;
}

/* Button */
.cdx-button {
  @apply bg-primary text-primary-foreground rounded-lg px-4 py-2;
  @apply hover:bg-primary/90 transition-colors;
}

/* Editor Loading State */
.codex-editor--empty .ce-block:first-child {
  @apply pt-0;
}

/* Placeholder Styles */
.codex-editor [data-placeholder]:empty:before {
  @apply text-muted-foreground opacity-60;
}

/* Tune Settings (for Image tool) */
.cdx-settings-button {
  @apply text-foreground hover:bg-accent transition-colors;
}

.cdx-settings-button:hover {
  @apply bg-accent;
}

.cdx-settings-button--active {
  @apply bg-accent;
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
  .ce-toolbar__content,
  .ce-block__content {
    @apply px-0;
  }

  .ce-toolbar__plus,
  .ce-toolbar__settings-btn {
    @apply w-8 h-8;
  }
}