/* Journal Editor Styles */
#journal-container {
  position: relative;
}

/* Notebook Lines Background with red margin line */
.journal-editor-wrapper {
  background-image: /* Red vertical margin line */
    linear-gradient(
      to right,
      transparent 0,
      transparent 63px,
      rgba(239, 68, 68, 0.3) 63px,
      rgba(239, 68, 68, 0.3) 65px,
      transparent 65px
    ),
    /* Horizontal ruled lines */
      repeating-linear-gradient(
        transparent,
        transparent 31px,
        rgb(53 120 186 / 25%) 31px,
        rgba(241, 245, 249, 0.2) 32px
      );
  background-size:
    100% 100%,
    100% 32px;
  background-position:
    0 0,
    0 0;
  background-attachment: local, local;
}

/* Hide scrollbar for journal wrapper */
.journal-editor-wrapper {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.journal-editor-wrapper::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Dark mode notebook lines */
@media (prefers-color-scheme: dark) {
  .journal-editor-wrapper {
    background-image: /* Red vertical margin line */
      linear-gradient(
        to right,
        transparent 0,
        transparent 63px,
        rgba(239, 68, 68, 0.3) 63px,
        rgba(239, 68, 68, 0.3) 65px,
        transparent 65px
      ),
      /* Horizontal ruled lines */
        repeating-linear-gradient(
          transparent,
          transparent 31px,
          rgb(53 120 186 / 20%) 31px,
          rgba(241, 245, 249, 0.2) 32px
        );
    background-size:
      100% 100%,
      100% 32px;
    background-position:
      0 0,
      0 0;
    background-attachment: local, local;
  }
}

/* Hide Trix toolbar for clean notebook experience */
.journal-editor trix-toolbar {
  display: none !important;
}

/* Journal Editor Trix Content */
.journal-editor trix-editor {
  min-height: 100vh;
  padding: 0;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  line-height: 2rem; /* 32px to match the line spacing */
  font-size: 1rem;
  cursor: text;
}

/* Remove Trix editor focus styles */
.journal-editor trix-editor:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Style Trix content for better readability */
.journal-editor trix-editor .attachment__caption {
  display: none;
}

/* Mode Switch Styles */
.mode-switch {
  display: flex;
  gap: 0.25rem;
  background-color: rgb(241, 245, 249); /* slate-100 */
  border-radius: 0.5rem;
  padding: 0.25rem;
}

@media (prefers-color-scheme: dark) {
  .mode-switch {
    background-color: rgb(51, 65, 85); /* slate-700 */
  }
}

.mode-switch-btn {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  text-decoration: none;
}

.mode-switch-btn.active {
  background-color: white;
  color: rgb(15, 23, 42); /* slate-900 */
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

@media (prefers-color-scheme: dark) {
  .mode-switch-btn.active {
    background-color: rgb(30, 41, 59); /* slate-800 */
    color: rgb(241, 245, 249); /* slate-100 */
  }
}

.mode-switch-btn:not(.active) {
  color: rgb(100, 116, 139); /* slate-500 */
}

.mode-switch-btn:not(.active):hover {
  color: rgb(15, 23, 42); /* slate-900 */
}

@media (prefers-color-scheme: dark) {
  .mode-switch-btn:not(.active) {
    color: rgb(148, 163, 184); /* slate-400 */
  }

  .mode-switch-btn:not(.active):hover {
    color: rgb(226, 232, 240); /* slate-200 */
  }
}

/* Autosave Indicator */
[data-journal-autosave-target="saveIndicator"] {
  transition: opacity 0.3s ease;
}

[data-journal-autosave-target="saveIndicator"].opacity-0 {
  opacity: 0;
}

[data-journal-autosave-target="saveIndicator"].opacity-100 {
  opacity: 1;
}

/* Journal Content Styling */
.journal-editor-content {
  max-width: 56rem; /* 896px - similar to medium blog post width */
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  background: transparent !important;
}

/* Make wrapper clickable with text cursor */
.journal-editor-wrapper {
  cursor: text;
}

/* Align text baseline with notebook lines */
.journal-editor trix-editor div,
.journal-editor trix-editor p {
  line-height: 2rem; /* 32px to match notebook lines */
  margin: 0;
  padding: 0;
}

/* First line alignment adjustment */
.journal-editor trix-editor > div:first-child {
  padding-top: 0;
}

/* Ensure paragraphs maintain consistent spacing */
.journal-editor trix-editor br {
  line-height: 2rem;
}

/* Text alignment support via inline styles from Trix */
.journal-editor trix-editor [style*="text-align: left"] {
  text-align: left !important;
}

.journal-editor trix-editor [style*="text-align: center"] {
  text-align: center !important;
}

.journal-editor trix-editor [style*="text-align: right"] {
  text-align: right !important;
}

/* Also support class-based alignment for backwards compatibility */
.journal-editor trix-editor .text-left {
  text-align: left;
}

.journal-editor trix-editor .text-center {
  text-align: center;
}

.journal-editor trix-editor .text-right {
  text-align: right;
}

/* Editor.js Styles - Enforce 32px line height */
.codex-editor {
  min-height: 100vh;
  font-size: 1rem;
  line-height: 32px !important;
  background: transparent !important;
}

.codex-editor__redactor {
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

.ce-block__content,
.ce-toolbar__content {
  max-width: 100%;
  margin: 0;
}

.ce-paragraph {
  line-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1rem;
  min-height: 32px !important;
  background: transparent !important;
}

/* Ensure all text content is exactly 32px per line */
.ce-paragraph p,
.ce-paragraph div,
.ce-paragraph span {
  line-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Editor.js toolbar */
.ce-toolbar__content {
  @apply max-w-full;
}

.ce-toolbar__plus {
  @apply text-[mediumpurple];
}

.ce-toolbar__plus:hover {
  @apply bg-[mediumpurple]/10;
}

/* Light mode toolbar styling */
.ce-inline-toolbar,
.ce-conversion-toolbar,
.ce-settings,
.ce-toolbar__settings-btn {
  @apply bg-neutral-50 border-neutral-200 shadow-md;
}

.ce-popover {
  @apply bg-neutral-50 border-neutral-200 shadow-md;
}

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

.ce-inline-tool:hover,
.ce-conversion-tool:hover,
.ce-settings__button:hover {
  @apply bg-neutral-100;
}

/* Dark mode for Editor.js */
@media (prefers-color-scheme: dark) {
  .ce-block--selected .ce-block__content {
    @apply bg-neutral-700/15;
  }

  .ce-inline-toolbar,
  .ce-conversion-toolbar,
  .ce-settings,
  .ce-toolbar__settings-btn {
    @apply bg-neutral-800 border-neutral-700 shadow-lg;
  }

  .ce-popover {
    @apply bg-neutral-800 border-neutral-700 shadow-lg;
  }

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

  .ce-inline-tool:hover,
  .ce-conversion-tool:hover,
  .ce-settings__button:hover {
    @apply bg-neutral-700;
  }
}

/* Remove Editor.js default margins */
.ce-block:first-of-type {
  @apply pt-0;
}

.ce-block {
  @apply p-0 m-0;
  min-height: 32px !important;
}

/* Align all block content with notebook lines */
.ce-block__content {
  min-height: 32px !important;
  line-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Headers in Editor.js - Aligned with notebook stripes */
h1.ce-header,
h2.ce-header,
h3.ce-header,
h4.ce-header {
  @apply m-0 p-0 font-bold;
  margin: 0 !important;
  padding: 0 !important;
}

/* H1 - Spans 2 notebook lines (64px) */
h1.ce-header {
  font-size: 1.5rem !important;
  line-height: 64px !important;
  height: 64px !important;
  min-height: 64px !important;
}

/* H2 - Spans 2 notebook lines (64px) */
h2.ce-header {
  font-size: 1.25rem !important;
  line-height: 64px !important;
  height: 64px !important;
  min-height: 64px !important;
}

/* H3 - Spans 1 notebook line (32px) */
h3.ce-header {
  font-size: 1.125rem !important;
  line-height: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
}

/* H4 - Spans 1 notebook line (32px) */
h4.ce-header {
  font-size: 1rem !important;
  line-height: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
}

/* Lists in Editor.js - Strict 32px height per item */
.cdx-list {
  @apply m-0 p-0;
  line-height: 32px !important;
}

.cdx-list__item {
  @apply p-0;
  line-height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
}

/* Ensure list item content aligns with notebook lines */
.cdx-list__item-body {
  line-height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Nested lists should also follow the same pattern */
.cdx-list .cdx-list {
  line-height: 32px !important;
  margin: 0 !important;
}

.cdx-list .cdx-list__item {
  line-height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
}

/* List item text content */
.cdx-list__item-content,
.cdx-list__item-children {
  line-height: 32px !important;
  margin: 0 !important;
}

/* Quotes in Editor.js - Strict 32px height */
.cdx-quote {
  @apply m-0 pl-4 border-l-[3px] border-l-[mediumpurple];
  line-height: 32px !important;
}

.cdx-quote__text {
  line-height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.cdx-quote__caption {
  line-height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
}

/* Ensure all inline elements follow 32px line height */
.codex-editor br {
  line-height: 32px !important;
  height: 32px !important;
}

/* Ensure all divs in editor content are 32px */
.codex-editor div {
  line-height: 32px !important;
}

/* Empty blocks should still maintain 32px height */
.ce-block:empty,
.ce-paragraph:empty {
  min-height: 32px !important;
  height: 32px !important;
}

/* Link tool in Editor.js */
.link-tool {
  line-height: 32px !important;
  min-height: 32px !important;
}

.link-tool__content {
  line-height: 32px !important;
}

.link-tool__title {
  line-height: 32px !important;
  min-height: 32px !important;
}

/* Code blocks and other special blocks */
.cdx-block {
  line-height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
}