/* EasyMDE Custom Theming for DaisyUI v5 + Tailwind v4 */
/* NOTE: --color-* vars already contain oklch(), so use var() directly — never wrap in oklch() */

/* ── Toolbar Icons (local Lucide SVGs — no Font Awesome CDN) ───────────────
   Each button uses mask-image so the icon inherits the button's text color.
   Hover/active states automatically change icon color via CSS currentColor.
   The mask-image URLs are generated server-side by EasymdeIconHelper
   using resolve_local_svg — see app/helpers/easymde_icon_helper.rb */
.EasyMDEContainer .editor-toolbar button {
  font-size: 0;        /* hide any FA text/pseudo-element fallback */
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.EasyMDEContainer .editor-toolbar button::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* Editor Container */
.EasyMDEContainer {
  border-radius: 0.5rem;
}

/* Toolbar */
.EasyMDEContainer .editor-toolbar {
  background-color: var(--color-base-200);
  border-color: var(--color-base-300);
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.EasyMDEContainer .editor-toolbar button {
  color: var(--color-base-content);
  border: none;
  border-radius: 0.25rem;
  transition: all 0.15s ease-in-out;
}

.EasyMDEContainer .editor-toolbar button:hover {
  background-color: var(--color-base-300);
  color: var(--color-primary);
  transform: scale(1.1);
}

.EasyMDEContainer .editor-toolbar button.active {
  background-color: var(--color-primary);
  color: var(--color-primary-content);
}

.EasyMDEContainer .editor-toolbar i.separator {
  border-color: var(--color-base-300);
}

.EasyMDEContainer .editor-toolbar.disabled-for-preview button:not(.no-disable) {
  opacity: 0.3;
}

/* Editor */
.EasyMDEContainer .CodeMirror {
  background-color: var(--color-base-100);
  color: var(--color-base-content);
  border-color: var(--color-base-300);
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-variant-ligatures: none;
}

.EasyMDEContainer .CodeMirror-focused {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.EasyMDEContainer .CodeMirror-scroll {
  min-height: 200px;
  max-height: 400px;
  overflow-y: auto !important;
}

.EasyMDEContainer .CodeMirror-cursor {
  border-color: var(--color-base-content);
}

.EasyMDEContainer .CodeMirror-selected {
  background-color: color-mix(in oklch, var(--color-primary) 20%, transparent);
}

/* Line Numbers */
.EasyMDEContainer .CodeMirror-linenumber {
  color: color-mix(in oklch, var(--color-base-content) 50%, transparent);
}

.EasyMDEContainer .CodeMirror-gutters {
  background-color: var(--color-base-200);
  border-color: var(--color-base-300);
}

/* Preview overlay — must be opaque to cover the raw CodeMirror text */
.EasyMDEContainer .editor-preview,
.EasyMDEContainer .editor-preview-side {
  background-color: var(--color-base-100);
  color: var(--color-base-content);
}

.EasyMDEContainer .editor-preview-side {
  border-color: var(--color-base-300);
  max-height: 400px;
  overflow-y: auto;
}

/* Preview Content Styles */
.EasyMDEContainer .editor-preview h1,
.EasyMDEContainer .editor-preview-side h1 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.EasyMDEContainer .editor-preview h2,
.EasyMDEContainer .editor-preview-side h2 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.EasyMDEContainer .editor-preview h3,
.EasyMDEContainer .editor-preview-side h3 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.EasyMDEContainer .editor-preview a,
.EasyMDEContainer .editor-preview-side a {
  color: var(--color-primary);
  text-decoration: underline;
}

.EasyMDEContainer .editor-preview a:hover,
.EasyMDEContainer .editor-preview-side a:hover {
  color: color-mix(in oklch, var(--color-primary) 80%, transparent);
}

.EasyMDEContainer .editor-preview ul,
.EasyMDEContainer .editor-preview-side ul {
  list-style-type: disc;
  list-style-position: inside;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.EasyMDEContainer .editor-preview ol,
.EasyMDEContainer .editor-preview-side ol {
  list-style-type: decimal;
  list-style-position: inside;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.EasyMDEContainer .editor-preview blockquote,
.EasyMDEContainer .editor-preview-side blockquote {
  border-left: 4px solid var(--color-base-300);
  padding-left: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  font-style: italic;
  color: color-mix(in oklch, var(--color-base-content) 80%, transparent);
}

.EasyMDEContainer .editor-preview pre,
.EasyMDEContainer .editor-preview-side pre {
  background-color: var(--color-base-200);
  padding: 1rem;
  border-radius: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  overflow-x: auto;
}

.EasyMDEContainer .editor-preview code,
.EasyMDEContainer .editor-preview-side code {
  background-color: var(--color-base-200);
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.EasyMDEContainer .editor-preview pre code,
.EasyMDEContainer .editor-preview-side pre code {
  background-color: transparent;
  padding: 0;
}

.EasyMDEContainer .editor-preview table,
.EasyMDEContainer .editor-preview-side table {
  width: 100%;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  border-collapse: collapse;
}

.EasyMDEContainer .editor-preview table thead,
.EasyMDEContainer .editor-preview-side table thead {
  background-color: var(--color-base-200);
}

.EasyMDEContainer .editor-preview table th,
.EasyMDEContainer .editor-preview-side table th {
  border: 1px solid var(--color-base-300);
  padding: 0.5rem 1rem;
  font-weight: 600;
}

.EasyMDEContainer .editor-preview table td,
.EasyMDEContainer .editor-preview-side table td {
  border: 1px solid var(--color-base-300);
  padding: 0.5rem 1rem;
}

/* Markdown icon images — alt text convention */
.EasyMDEContainer .editor-preview img[alt*="-icon"],
.EasyMDEContainer .editor-preview-side img[alt*="-icon"] {
  display: inline-block;
  height: 1.2em;
  width: auto;
  margin: 0;
  vertical-align: middle;
  border-radius: 0;
  object-fit: contain;
}
.EasyMDEContainer .editor-preview img[alt*="-icon-xs"],
.EasyMDEContainer .editor-preview-side img[alt*="-icon-xs"] { height: 0.8em; }
.EasyMDEContainer .editor-preview img[alt*="-icon-sm"],
.EasyMDEContainer .editor-preview-side img[alt*="-icon-sm"] { height: 1em; }
.EasyMDEContainer .editor-preview img[alt*="-icon-lg"],
.EasyMDEContainer .editor-preview-side img[alt*="-icon-lg"] { height: 1.5em; }
.EasyMDEContainer .editor-preview img[alt*="-icon-xl"],
.EasyMDEContainer .editor-preview-side img[alt*="-icon-xl"] { height: 2em; }
.EasyMDEContainer .editor-preview img[alt*="-icon-2x"],
.EasyMDEContainer .editor-preview-side img[alt*="-icon-2x"] { height: 2.5em; }
.EasyMDEContainer .editor-preview img[alt*="-icon-3x"],
.EasyMDEContainer .editor-preview-side img[alt*="-icon-3x"] { height: 3em; }
.EasyMDEContainer .editor-preview img[alt*="-icon-4x"],
.EasyMDEContainer .editor-preview-side img[alt*="-icon-4x"] { height: 4em; }
.EasyMDEContainer .editor-preview img[alt*="-icon-5x"],
.EasyMDEContainer .editor-preview-side img[alt*="-icon-5x"] { height: 5em; }

/* Colored icon spans — height-only; width follows intrinsic aspect ratio. */
.EasyMDEContainer .editor-preview .md-icon,
.EasyMDEContainer .editor-preview-side .md-icon {
  display: inline-block;
  height: 1.2em;
  vertical-align: middle;
}
.EasyMDEContainer .editor-preview .md-icon > svg,
.EasyMDEContainer .editor-preview-side .md-icon > svg {
  height: 100%;
  width: auto;
  display: block;
}

/* Status Bar */
.EasyMDEContainer .editor-statusbar {
  background-color: var(--color-base-200);
  border-color: var(--color-base-300);
  color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
  font-size: 0.75rem;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.EasyMDEContainer .editor-statusbar span {
  color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
}

/* Fullscreen Mode
   Note: EasyMDE ESM build adds .fullscreen to the toolbar, not the container.
   We use :has() to detect fullscreen state and style the container accordingly. */
.EasyMDEContainer:has(> .editor-toolbar.fullscreen) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 9999 !important;
  background-color: var(--color-base-100);
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.EasyMDEContainer:has(> .editor-toolbar.fullscreen) .editor-toolbar {
  flex-shrink: 0;
  border-radius: 0;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  z-index: 2;
}

.EasyMDEContainer:has(> .editor-toolbar.fullscreen) .editor-toolbar::before,
.EasyMDEContainer:has(> .editor-toolbar.fullscreen) .editor-toolbar::after {
  display: none;
}

.EasyMDEContainer:has(> .editor-toolbar.fullscreen) .CodeMirror {
  flex: 1 1 auto;
  height: 0;
  border-radius: 0;
}

.EasyMDEContainer:has(> .editor-toolbar.fullscreen) .CodeMirror-scroll {
  max-height: none !important;
  overflow-y: scroll !important;
  scrollbar-gutter: stable;
}

/* Force visible scrollbar in fullscreen (macOS hides overlay scrollbars) */
.EasyMDEContainer:has(> .editor-toolbar.fullscreen) .CodeMirror-vscrollbar {
  overflow-y: scroll !important;
}

.EasyMDEContainer:has(> .editor-toolbar.fullscreen) .CodeMirror-vscrollbar::-webkit-scrollbar {
  width: 10px;
}

.EasyMDEContainer:has(> .editor-toolbar.fullscreen) .CodeMirror-vscrollbar::-webkit-scrollbar-track {
  background-color: var(--color-base-200);
}

.EasyMDEContainer:has(> .editor-toolbar.fullscreen) .CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
  background-color: var(--color-base-300);
  border-radius: 5px;
  border: 2px solid var(--color-base-200);
}

.EasyMDEContainer:has(> .editor-toolbar.fullscreen) .CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in oklch, var(--color-base-content) 40%, transparent);
}

.EasyMDEContainer:has(> .editor-toolbar.fullscreen) .editor-preview-side {
  max-height: none;
}

.EasyMDEContainer:has(> .editor-toolbar.fullscreen) .editor-statusbar {
  flex-shrink: 0;
  border-radius: 0;
}

/* Side-by-side Mode */
.EasyMDEContainer.sided .CodeMirror,
.EasyMDEContainer:has(> .editor-toolbar.easymde-sided) .CodeMirror {
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0;
}

.EasyMDEContainer.sided .editor-preview-side {
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0;
}

/* Rails/MdDoc-backed EasyMDE preview.
   This is intentionally separate from EasyMDE's native .editor-preview nodes so
   the standard Preview and Side-by-side buttons keep their built-in behavior. */
.EasyMDEContainer .md-doc-easymde-preview[hidden] {
  display: none !important;
}

.EasyMDEContainer .md-doc-easymde-preview {
  box-sizing: border-box;
  background-color: var(--color-base-100);
  color: var(--color-base-content);
  border: 1px solid var(--color-base-300);
  border-left: 0;
  overflow-y: auto;
  max-height: 400px;
  min-height: 200px;
}

.EasyMDEContainer.md-doc-preview-active {
  display: flex;
  flex-wrap: wrap;
}

.EasyMDEContainer.md-doc-preview-active .editor-toolbar,
.EasyMDEContainer.md-doc-preview-active .editor-statusbar {
  width: 100%;
}

.EasyMDEContainer.md-doc-preview-split .CodeMirror {
  flex: 1 1 50%;
  width: 50% !important;
  border-bottom-right-radius: 0;
}

.EasyMDEContainer.md-doc-preview-split .md-doc-easymde-preview {
  flex: 1 1 50%;
  width: 50%;
  border-bottom-right-radius: 0.5rem;
}

.EasyMDEContainer.md-doc-preview-only .CodeMirror {
  display: none;
}

.EasyMDEContainer.md-doc-preview-only .md-doc-easymde-preview {
  width: 100%;
  border-left: 1px solid var(--color-base-300);
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.EasyMDEContainer .md-doc-easymde-preview-loading,
.EasyMDEContainer .md-doc-easymde-preview-error {
  padding: 1.5rem;
  font-size: 0.875rem;
}

.EasyMDEContainer .md-doc-easymde-preview-loading {
  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
}

.EasyMDEContainer .md-doc-easymde-preview-error {
  color: var(--color-error);
}

.EasyMDEContainer:has(> .editor-toolbar.fullscreen).md-doc-preview-active {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.EasyMDEContainer:has(> .editor-toolbar.fullscreen).md-doc-preview-active .editor-toolbar {
  grid-column: 1 / -1;
  order: 0;
}

.EasyMDEContainer:has(> .editor-toolbar.fullscreen).md-doc-preview-active .CodeMirror.CodeMirror-fullscreen {
  grid-column: 1;
  grid-row: 2;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 0;
  width: auto !important;
  height: auto !important;
  min-height: 0;
}

.EasyMDEContainer:has(> .editor-toolbar.fullscreen).md-doc-preview-split .CodeMirror,
.EasyMDEContainer:has(> .editor-toolbar.fullscreen).md-doc-preview-split .md-doc-easymde-preview {
  grid-row: 2;
  order: 1;
  height: auto !important;
  max-height: none;
  min-height: 0;
  width: auto !important;
}

.EasyMDEContainer:has(> .editor-toolbar.fullscreen).md-doc-preview-split .CodeMirror {
  grid-column: 1;
}

.EasyMDEContainer:has(> .editor-toolbar.fullscreen).md-doc-preview-split .md-doc-easymde-preview {
  grid-column: 2;
}

.EasyMDEContainer:has(> .editor-toolbar.fullscreen).md-doc-preview-active .md-doc-easymde-preview {
  overflow-y: scroll !important;
  scrollbar-gutter: stable;
}

.EasyMDEContainer:has(> .editor-toolbar.fullscreen).md-doc-preview-only .md-doc-easymde-preview {
  grid-column: 1 / -1;
  grid-row: 2;
  order: 1;
  height: auto !important;
  max-height: none;
  min-height: 0;
}

.EasyMDEContainer:has(> .editor-toolbar.fullscreen).md-doc-preview-active .editor-statusbar {
  grid-column: 1 / -1;
  order: 2;
}

/* CodeMirror Syntax Highlighting */
.EasyMDEContainer .cm-keyword {
  color: #a855f7;
  font-weight: 600;
}

.EasyMDEContainer .cm-string {
  color: #16a34a;
}

.EasyMDEContainer .cm-comment {
  color: color-mix(in oklch, var(--color-base-content) 50%, transparent);
  font-style: italic;
}

.EasyMDEContainer .cm-number {
  color: #3b82f6;
}

.EasyMDEContainer .cm-variable {
  color: var(--color-base-content);
}

.EasyMDEContainer .cm-variable-2 {
  color: #0891b2;
}

.EasyMDEContainer .cm-def {
  color: #2563eb;
}

.EasyMDEContainer .cm-operator {
  color: var(--color-base-content);
}

.EasyMDEContainer .cm-meta {
  color: #f97316;
}

.EasyMDEContainer .cm-builtin {
  color: #9333ea;
}

.EasyMDEContainer .cm-atom {
  color: #ef4444;
}

.EasyMDEContainer .cm-error {
  background-color: color-mix(in oklch, var(--color-error) 20%, transparent);
  color: var(--color-error);
}

/* Placeholder */
.EasyMDEContainer .CodeMirror-empty {
  color: color-mix(in oklch, var(--color-base-content) 40%, transparent);
}

/* Selection Match */
.EasyMDEContainer .CodeMirror-selectedtext {
  background-color: color-mix(in oklch, var(--color-primary) 30%, transparent);
}

/* Active Line */
.EasyMDEContainer .CodeMirror-activeline-background {
  background-color: color-mix(in oklch, var(--color-base-200) 50%, transparent);
}

/* Matching Brackets */
.EasyMDEContainer .CodeMirror-matchingbracket {
  color: var(--color-success);
  background-color: color-mix(in oklch, var(--color-success) 20%, transparent);
}

.EasyMDEContainer .CodeMirror-nonmatchingbracket {
  color: var(--color-error);
  background-color: color-mix(in oklch, var(--color-error) 20%, transparent);
}

/* ── Context Menu: Nested Submenus (shared — used by ContextMenuBuilder) ── */

/* Submenu parent needs relative positioning */
.context-menu-has-submenu {
  position: relative;
}

/* Invisible bridge extending hover zone so mouse can travel to submenu */
.context-menu-has-submenu::after {
  content: '';
  position: absolute;
  top: 0;
  right: -20px;
  width: 20px;
  height: 100%;
}

/* Hide submenus by default — JS sets position: fixed and coordinates */
.context-menu-submenu {
  display: none;
  z-index: 10001;
  min-width: 13rem;
}

/* Hover highlight for submenu triggers */
.context-menu-has-submenu > a:hover {
  background-color: var(--color-base-300);
}

/* Variable/leaf items submenu — scrollable when list is long */
.context-menu-var-submenu {
  max-height: 20rem;
  overflow-y: auto;
  min-width: 15rem;
}

/* Custom scrollbar for scrollable submenus */
.context-menu-var-submenu::-webkit-scrollbar {
  width: 6px;
}

.context-menu-var-submenu::-webkit-scrollbar-track {
  background-color: var(--color-base-200);
  border-radius: 3px;
}

.context-menu-var-submenu::-webkit-scrollbar-thumb {
  background-color: var(--color-base-300);
  border-radius: 3px;
}

/* ── EasyMDE Smart Lookup ─────────────────────────────────────────────── */

.easymde-smart-lookup {
  position: fixed;
  z-index: 10020;
  width: min(24rem, calc(100vw - 1rem));
  max-height: 18rem;
  overflow-y: auto;
  padding: 0.25rem;
  border: 1px solid var(--color-base-300);
  border-radius: 0.5rem;
  background-color: var(--color-base-100);
  box-shadow: 0 18px 36px color-mix(in oklch, var(--color-base-content) 16%, transparent);
}

.easymde-smart-lookup-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 2rem;
  padding: 0.35rem 0.5rem;
  border: 0;
  border-radius: 0.35rem;
  background: transparent;
  color: var(--color-base-content);
  text-align: left;
  cursor: pointer;
}

.easymde-smart-lookup-item:hover,
.easymde-smart-lookup-item.is-active {
  background-color: var(--color-base-200);
}

.easymde-smart-lookup-item:disabled {
  cursor: default;
  opacity: 0.6;
}

.easymde-smart-lookup-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875rem;
}

.easymde-smart-lookup-detail {
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
  font-size: 0.75rem;
}