/* Notion-like Editor Styles */

.notion-editor .ProseMirror {
  outline: none;
  min-height: calc(100vh - 200px);
  font-size: 16px;
  line-height: 1.6;
}

.notion-editor .ProseMirror:focus {
  outline: none;
}

/* Placeholder styles */
.notion-editor .ProseMirror h1.is-empty::before {
  content: attr(data-placeholder);
  float: left;
  color: #adb5bd;
  pointer-events: none;
  height: 0;
  font-weight: 700;
}

.notion-editor .ProseMirror p.is-empty:first-child::before,
.notion-editor .ProseMirror p.is-editor-empty::before {
  content: attr(data-placeholder);
  float: left;
  color: #adb5bd;
  pointer-events: none;
  height: 0;
}

/* Title (H1) styling - large like Notion */
.notion-editor .ProseMirror h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

/* Heading styles */
.notion-editor .ProseMirror h2 {
  font-size: 1.75rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.notion-editor .ProseMirror h3 {
  font-size: 1.25rem;
  font-weight: 500;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

/* Paragraph spacing */
.notion-editor .ProseMirror p {
  margin-bottom: 0.5rem;
}

/* List styles */
.notion-editor .ProseMirror ul,
.notion-editor .ProseMirror ol {
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}

.notion-editor .ProseMirror li {
  margin-bottom: 0.25rem;
}

/* Blockquote */
.notion-editor .ProseMirror blockquote {
  border-left: 3px solid var(--mantine-color-gray-4);
  padding-left: 1rem;
  margin-left: 0;
  color: var(--mantine-color-gray-7);
}

/* Code blocks */
.notion-editor .ProseMirror code {
  background-color: var(--mantine-color-gray-1);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono', monospace;
  font-size: 0.9em;
}

.notion-editor .ProseMirror pre {
  background-color: var(--mantine-color-gray-1);
  padding: 1rem;
  border-radius: 8px;
  overflow-x: auto;
}

.notion-editor .ProseMirror pre code {
  background: none;
  padding: 0;
}

/* Links */
.notion-editor .ProseMirror a {
  color: var(--mantine-color-blue-6);
  text-decoration: none;
}

.notion-editor .ProseMirror a:hover {
  text-decoration: underline;
}

/* Recording button pulse animation */
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

/* Selection style */
.notion-editor .ProseMirror ::selection {
  background-color: var(--mantine-color-blue-1);
}

/* Horizontal rule */
.notion-editor .ProseMirror hr {
  border: none;
  border-top: 1px solid var(--mantine-color-gray-3);
  margin: 1.5rem 0;
}

/* =============================================================================
 * Native Task List Styles (TipTap TaskList)
 * ============================================================================= */

.notion-editor .ProseMirror ul[data-type='taskList'] {
  list-style: none;
  padding-left: 0;
  margin: 0.5rem 0;
}

/* =============================================================================
 * Issue Block Styles (Custom NodeView with Mantine ActionIcon)
 * Structure: div[data-type] > button + div > summary + content
 * ============================================================================= */

.notion-editor .ProseMirror [data-type='issueListItemBlock'],
.notion-editor .ProseMirror .issue-list-item-block {
  display: flex;
  gap: 0.25rem;
  margin: 0.5rem 0;
  border: 1px solid var(--mantine-color-gray-3);
  border-radius: 8px;
  padding: 0.5rem;
  background: var(--mantine-color-gray-0);
}

/* Toggle button container - holds the Mantine ActionIcon */
.notion-editor .ProseMirror [data-type='issueListItemBlock'] > button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.625rem;
  line-height: 1;
  color: var(--mantine-color-gray-6);
}

.notion-editor .ProseMirror [data-type='issueListItemBlock'] > button:hover {
  background: var(--mantine-color-gray-2);
}

.notion-editor .ProseMirror [data-type='issueListItemBlock'] > button::before {
  content: '▶';
  transition: transform 0.2s ease-in-out;
}

.notion-editor .ProseMirror [data-type='issueListItemBlock'].is-open > button::before {
  transform: rotate(90deg);
}

/* Content wrapper (contains summary + details content) */
.notion-editor .ProseMirror [data-type='issueListItemBlock'] > div,
.notion-editor .ProseMirror .issue-content-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

/* Issue summary (name) - editable */
.notion-editor .ProseMirror [data-type='issueListItemBlockSummary'] {
  font-weight: 600;
  font-size: 1rem;
  cursor: text;
  outline: none;
}

/* Issue content (expandable notes) - hidden by default */
.notion-editor .ProseMirror [data-type='issueListItemBlockContent'] {
  display: none;
  padding-top: 0.5rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--mantine-color-gray-3);
}

.notion-editor .ProseMirror .issue-list-item-block.is-open [data-type='issueListItemBlockContent'],
.notion-editor
  .ProseMirror
  [data-type='issueListItemBlock'].is-open
  [data-type='issueListItemBlockContent'] {
  display: block;
}

.notion-editor .ProseMirror [data-type='issueListItemBlockContent'] > :last-child {
  margin-bottom: 0;
}

/* =============================================================================
 * Task Item Block Styles (extends TaskItem with CPDL attrs)
 * Structure: ul > li[data-type] > label > input + span + div
 * ============================================================================= */

/* Task list container */
.notion-editor .ProseMirror ul[data-type='taskListItemBlockList'] {
  list-style-type: none;
  padding: 0;
  margin: 0.5rem 0;
}

/* Task item - horizontal flex layout */
.notion-editor .ProseMirror li[data-type='taskListItemBlock'],
.notion-editor .ProseMirror .task-list-item-block {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.25rem 0;
  /* padding: 0.5rem; */
}

.notion-editor .ProseMirror li[data-type='taskListItemBlock']:hover,
.notion-editor .ProseMirror .task-list-item-block:hover {
  border-color: var(--mantine-color-gray-4);
}

/* Checkbox wrapper label */
.notion-editor .ProseMirror li[data-type='taskListItemBlock'] > label {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
}

/* Checkbox - Mantine style */
.notion-editor .ProseMirror li[data-type='taskListItemBlock'] input[type='checkbox'] {
  appearance: none;
  width: calc(1.125rem * var(--mantine-scale, 1));
  height: calc(1.125rem * var(--mantine-scale, 1));
  margin: 0;
  border: 1px solid var(--mantine-color-gray-4);
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  transition:
    background-color 0.1s,
    border-color 0.1s;

  /* display: flex;
  align-items: flex-start;
  padding-top: 0.1rem; */
}

.notion-editor .ProseMirror li[data-type='taskListItemBlock'] input[type='checkbox']:checked {
  background-color: var(--mantine-primary-color-filled, var(--mantine-color-blue-6));
  border-color: var(--mantine-primary-color-filled, var(--mantine-color-blue-6));
}

.notion-editor
  .ProseMirror
  li[data-type='taskListItemBlock']
  input[type='checkbox']:checked::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMiPjxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTUgMTNsNCA0TDE5IDciLz48L3N2Zz4=');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px;
}

/* Content area */
.notion-editor .ProseMirror li[data-type='taskListItemBlock'] > div {
  /* Content wrapper */
  /* .notion-editor .ProseMirror .task-content-wrapper { */
  flex: 1;
  min-width: 0;
  margin-left: 0.5rem;
}

/* Checked task styling */
.notion-editor .ProseMirror li[data-type='taskListItemBlock'][data-checked='true'] > div {
  text-decoration: line-through;
  color: var(--mantine-color-gray-5);
}

/* Priority indicators */
.notion-editor .ProseMirror li[data-type='taskListItemBlock'][data-priority='urgent'],
.notion-editor .ProseMirror .task-list-item-block[data-priority='urgent'] {
  border-left: 3px solid var(--mantine-color-orange-5);
}

.notion-editor .ProseMirror li[data-type='taskListItemBlock'][data-priority='stat'],
.notion-editor .ProseMirror .task-list-item-block[data-priority='stat'] {
  border-left: 3px solid var(--mantine-color-red-5);
}

/* Also apply to regular taskItem for consistency */
.notion-editor .ProseMirror li[data-type='taskItem'] {
  display: flex;
  align-items: flex-start;
  margin: 0.25rem 0;
}

.notion-editor .ProseMirror li[data-type='taskItem'] > label {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
}

.notion-editor .ProseMirror li[data-type='taskItem'] input[type='checkbox'] {
  appearance: none;
  width: calc(1.125rem * var(--mantine-scale, 1));
  height: calc(1.125rem * var(--mantine-scale, 1));
  margin: 0;
  border: 1px solid var(--mantine-color-gray-4);
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
}

.notion-editor .ProseMirror li[data-type='taskItem'] input[type='checkbox']:checked {
  background-color: var(--mantine-primary-color-filled, var(--mantine-color-blue-6));
  border-color: var(--mantine-primary-color-filled, var(--mantine-color-blue-6));
}

.notion-editor .ProseMirror li[data-type='taskItem'] input[type='checkbox']:checked::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMiPjxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTUgMTNsNCA0TDE5IDciLz48L3N2Zz4=');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px;
}

.notion-editor .ProseMirror li[data-type='taskItem'] > div {
  flex: 1;
  min-width: 0;
  margin-left: 0.5rem;
}

.notion-editor .ProseMirror li[data-type='taskItem'][data-checked='true'] > div {
  text-decoration: line-through;
  color: var(--mantine-color-gray-5);
}