/* ==========================================================================
   Milkdown + DaisyUI Full Integration Stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base Editor Host & Prose Mirror Setup
   -------------------------------------------------------------------------- */
.milkdown {
  color: oklch(var(--bc));
  background-color: oklch(var(--b1));
  border-radius: var(--rounded-box, 1rem);
  font-family: inherit;
}

.milkdown .ProseMirror {
  outline: none !important;
  min-height: 250px;
  padding: 1rem;
  caret-color: oklch(var(--bc)); /* Tracks primary content color */
}

/* --------------------------------------------------------------------------
   2. Selection States & Caret Overrides
   -------------------------------------------------------------------------- */
.milkdown .ProseMirror-selectednode {
  outline: 2px solid oklch(var(--p)) !important;
  border-radius: var(--rounded-btn, 0.5rem);
}

.milkdown .ProseMirror ::selection {
  background-color: oklch(var(--p) / 0.25) !important;
  color: oklch(var(--bc)) !important;
}

.milkdown .ProseMirror-gapcursor:after {
  border-top-color: oklch(var(--bc)) !important;
}

/* --------------------------------------------------------------------------
   3. Inline Elements & Typography Overrides
   -------------------------------------------------------------------------- */
.prose code:not(pre code) {
  background-color: oklch(var(--b2));
  color: oklch(var(--p));
  padding: 0.15rem 0.4rem;
  border-radius: var(--rounded-badge, 0.375rem);
  font-weight: 500;
}

.prose blockquote {
  border-left-color: oklch(var(--p));
  background-color: oklch(var(--b2) / 0.3);
  color: oklch(var(--bc));
  padding: 0.5rem 1rem;
  border-top-right-radius: var(--rounded-btn, 0.5rem);
  border-bottom-right-radius: var(--rounded-btn, 0.5rem);
}

.prose hr {
  border-color: oklch(var(--b3));
}

.prose a {
  color: oklch(var(--p));
  text-decoration-color: oklch(var(--p) / 0.4);
}

.prose a:hover {
  color: oklch(var(--pf, var(--p)));
  text-decoration-color: oklch(var(--p));
}

/* --------------------------------------------------------------------------
   4. GFM Code Blocks & Tables
   -------------------------------------------------------------------------- */
.prose pre {
  background-color: oklch(var(--b2)) !important;
  color: oklch(var(--bc)) !important;
  border: 1px solid oklch(var(--b3));
  border-radius: var(--rounded-box, 0.75rem);
}

.prose table {
  background-color: oklch(var(--b1));
  border: 1px solid oklch(var(--b3));
  border-radius: var(--rounded-box, 0.5rem);
  overflow: hidden;
}

.prose th {
  background-color: oklch(var(--b2));
  color: oklch(var(--bc));
  border-bottom: 2px solid oklch(var(--b3));
}

.prose td {
  border-bottom: 1px solid oklch(var(--b3));
  border-right: 1px solid oklch(var(--b3) / 0.5);
}

.prose tr:last-child td {
  border-bottom: none;
}

/* --------------------------------------------------------------------------
   5. Interactive Task Lists (Checkboxes)
   -------------------------------------------------------------------------- */
.milkdown .task-list-item {
  list-style-type: none;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.milkdown .task-list-item input[type="checkbox"] {
  appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid oklch(var(--bc) / 0.4);
  border-radius: var(--rounded-btn, 0.25rem);
  background-color: oklch(var(--b1));
  margin-top: 0.25rem;
  cursor: pointer;
  display: grid;
  place-content: center;
}

.milkdown .task-list-item input[type="checkbox"]:checked {
  background-color: oklch(var(--p));
  border-color: oklch(var(--p));
}

.milkdown .task-list-item input[type="checkbox"]:checked::before {
  content: "✓";
  color: oklch(var(--pc));
  font-size: 0.8rem;
  font-weight: bold;
}

/* --------------------------------------------------------------------------
   6. Floating UI: Slash Menu, Tooltips & Popups
   -------------------------------------------------------------------------- */
.milkdown-slash-menu,
.milkdown-tooltip,
.milkdown-block-handle {
  background-color: oklch(var(--b1)) !important;
  color: oklch(var(--bc)) !important;
  border: 1px solid oklch(var(--b3)) !important;
  border-radius: var(--rounded-box, 0.75rem) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(8px);
}

/* Menu Items & Hover States */
.milkdown-slash-menu .tab-item,
.milkdown-tooltip .icon-button,
.milkdown-menu-item {
  color: oklch(var(--bc)) !important;
  border-radius: var(--rounded-btn, 0.375rem) !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.milkdown-slash-menu .tab-item:hover,
.milkdown-slash-menu .tab-item.active,
.milkdown-tooltip .icon-button:hover,
.milkdown-tooltip .icon-button.active {
  background-color: oklch(var(--p)) !important;
  color: oklch(var(--pc)) !important;
}

/* Input Fields inside Popups (e.g., Link Editor) */
.milkdown-tooltip input,
.milkdown-slash-menu input {
  background-color: oklch(var(--b2)) !important;
  color: oklch(var(--bc)) !important;
  border: 1px solid oklch(var(--b3)) !important;
  border-radius: var(--rounded-btn, 0.375rem) !important;
  padding: 0.25rem 0.5rem;
}

.milkdown-tooltip input:focus,
.milkdown-slash-menu input:focus {
  outline: 2px solid oklch(var(--p)) !important;
}