/* Import minimal-tiptap styles for rich text editor in form field overrides */
/* Reference tailwindcss for @apply directives to work in distributed packages */
@reference "tailwindcss";

.minimal-tiptap-editor .ProseMirror code.inline {
  @apply rounded border border-[var(--mt-code-color)] bg-[var(--mt-code-background)] px-1 py-0.5 text-sm;
}

.minimal-tiptap-editor .ProseMirror pre {
  @apply relative overflow-auto rounded border font-mono text-sm;
  @apply border-[var(--mt-pre-border)] bg-[var(--mt-pre-background)] text-[var(--mt-pre-color)];
  @apply text-left hyphens-none whitespace-pre;
}

.minimal-tiptap-editor .ProseMirror code {
  @apply leading-[1.7em] break-words;
}

.minimal-tiptap-editor .ProseMirror pre code {
  @apply block overflow-x-auto p-3.5;
}

.minimal-tiptap-editor .ProseMirror pre {
  .hljs-keyword,
  .hljs-operator,
  .hljs-function,
  .hljs-built_in,
  .hljs-builtin-name {
    color: var(--hljs-keyword);
  }

  .hljs-attr,
  .hljs-symbol,
  .hljs-property,
  .hljs-attribute,
  .hljs-variable,
  .hljs-template-variable,
  .hljs-params {
    color: var(--hljs-attr);
  }

  .hljs-name,
  .hljs-regexp,
  .hljs-link,
  .hljs-type,
  .hljs-addition {
    color: var(--hljs-name);
  }

  .hljs-string,
  .hljs-bullet {
    color: var(--hljs-string);
  }

  .hljs-title,
  .hljs-subst,
  .hljs-section {
    color: var(--hljs-title);
  }

  .hljs-literal,
  .hljs-type,
  .hljs-deletion {
    color: var(--hljs-literal);
  }

  .hljs-selector-tag,
  .hljs-selector-id,
  .hljs-selector-class {
    color: var(--hljs-selector-tag);
  }

  .hljs-number {
    color: var(--hljs-number);
  }

  .hljs-comment,
  .hljs-meta,
  .hljs-quote {
    color: var(--hljs-comment);
  }

  .hljs-emphasis {
    @apply italic;
  }

  .hljs-strong {
    @apply font-bold;
  }
}

.minimal-tiptap-editor .ProseMirror > p.is-editor-empty::before {
  content: attr(data-placeholder);
  @apply pointer-events-none float-left h-0 text-[var(--mt-secondary)];
}

.minimal-tiptap-editor .ProseMirror ol {
  @apply list-decimal;
}

.minimal-tiptap-editor .ProseMirror ol ol {
  list-style: lower-alpha;
}

.minimal-tiptap-editor .ProseMirror ol ol ol {
  list-style: lower-roman;
}

.minimal-tiptap-editor .ProseMirror ul {
  list-style: disc;
}

.minimal-tiptap-editor .ProseMirror ul ul {
  list-style: circle;
}

.minimal-tiptap-editor .ProseMirror ul ul ul {
  list-style: square;
}

/* Task Lists */
.minimal-tiptap-editor .ProseMirror ul[data-type="taskList"] {
  @apply list-none pl-0;
}

.minimal-tiptap-editor .ProseMirror ul[data-type="taskList"] li {
  @apply flex items-start gap-2;
}

.minimal-tiptap-editor .ProseMirror ul[data-type="taskList"] li > label {
  @apply flex items-center mt-1.5;
}

.minimal-tiptap-editor .ProseMirror ul[data-type="taskList"] li > label input[type="checkbox"] {
  @apply size-4 cursor-pointer rounded border border-input accent-primary;
}

.minimal-tiptap-editor .ProseMirror ul[data-type="taskList"] li > div {
  @apply flex-1;
}

.minimal-tiptap-editor .ProseMirror ul[data-type="taskList"] li[data-checked="true"] > div {
  @apply text-muted-foreground line-through;
}

.minimal-tiptap-editor .ProseMirror .heading-node {
  @apply relative font-semibold;
}

.minimal-tiptap-editor .ProseMirror .heading-node:first-child {
  @apply mt-0;
}

.minimal-tiptap-editor .ProseMirror h1 {
  @apply mt-[46px] mb-4 text-[1.375rem] leading-7 tracking-[-0.004375rem];
}

.minimal-tiptap-editor .ProseMirror h2 {
  @apply mt-8 mb-3.5 text-[1.1875rem] leading-7 tracking-[0.003125rem];
}

.minimal-tiptap-editor .ProseMirror h3 {
  @apply mt-6 mb-3 text-[1.0625rem] leading-6 tracking-[0.00625rem];
}

.minimal-tiptap-editor .ProseMirror h4 {
  @apply mt-4 mb-2 text-[0.9375rem] leading-6;
}

.minimal-tiptap-editor .ProseMirror h5 {
  @apply mt-4 mb-2 text-sm;
}

.minimal-tiptap-editor .ProseMirror h5 {
  @apply mt-4 mb-2 text-sm;
}

.minimal-tiptap-editor .ProseMirror a.link {
  @apply text-primary underline;
}

.minimal-tiptap-editor .ProseMirror a.link:hover {
  @apply underline;
}

[data-rmiz-ghost] {
  position: absolute;
  pointer-events: none;
}
[data-rmiz-btn-zoom],
[data-rmiz-btn-unzoom] {
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  border: none;
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
  color: #fff;
  height: 40px;
  margin: 0;
  outline-offset: 2px;
  padding: 9px;
  touch-action: manipulation;
  width: 40px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
[data-rmiz-btn-zoom]:not(:focus):not(:active) {
  position: absolute;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  pointer-events: none;
  white-space: nowrap;
  width: 1px;
}
[data-rmiz-btn-zoom] {
  position: absolute;
  inset: 10px 10px auto auto;
  cursor: zoom-in;
}
[data-rmiz-btn-unzoom] {
  position: absolute;
  inset: 20px 20px auto auto;
  cursor: zoom-out;
  z-index: 1;
}
[data-rmiz-content="found"] img,
[data-rmiz-content="found"] svg,
[data-rmiz-content="found"] [role="img"],
[data-rmiz-content="found"] [data-zoom] {
  cursor: inherit;
}
[data-rmiz-modal]::backdrop {
  display: none;
}
[data-rmiz-modal][open] {
  position: fixed;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
[data-rmiz-modal-overlay] {
  position: absolute;
  inset: 0;
  transition: background-color 0.3s;
}
[data-rmiz-modal-overlay="hidden"] {
  background-color: rgba(255, 255, 255, 0);
}
[data-rmiz-modal-overlay="visible"] {
  background-color: rgba(255, 255, 255, 1);
}
[data-rmiz-modal-content] {
  position: relative;
  width: 100%;
  height: 100%;
}
[data-rmiz-modal-img] {
  position: absolute;
  cursor: zoom-out;
  image-rendering: high-quality;
  transform-origin: top left;
  transition: transform 0.3s;
}
@media (prefers-reduced-motion: reduce) {
  [data-rmiz-modal-overlay],
  [data-rmiz-modal-img] {
    transition-duration: 0.01ms !important;
  }
}


:root {
  --mt-overlay: rgba(251, 251, 251, 0.75);
  --mt-transparent-foreground: rgba(0, 0, 0, 0.4);
  --mt-bg-secondary: rgba(251, 251, 251, 0.8);
  --mt-code-background: #082b781f;
  --mt-code-color: #d4d4d4;
  --mt-secondary: #9d9d9f;
  --mt-pre-background: #ececec;
  --mt-pre-border: #e0e0e0;
  --mt-pre-color: #2f2f31;
  --mt-hr: #dcdcdc;
  --mt-drag-handle-hover: #5c5c5e;

  --mt-accent-bold-blue: #05c;
  --mt-accent-bold-teal: #206a83;
  --mt-accent-bold-green: #216e4e;
  --mt-accent-bold-orange: #a54800;
  --mt-accent-bold-red: #ae2e24;
  --mt-accent-bold-purple: #5e4db2;

  --mt-accent-gray: #758195;
  --mt-accent-blue: #1d7afc;
  --mt-accent-teal: #2898bd;
  --mt-accent-green: #22a06b;
  --mt-accent-orange: #fea362;
  --mt-accent-red: #c9372c;
  --mt-accent-purple: #8270db;

  --mt-accent-blue-subtler: #cce0ff;
  --mt-accent-teal-subtler: #c6edfb;
  --mt-accent-green-subtler: #baf3db;
  --mt-accent-yellow-subtler: #f8e6a0;
  --mt-accent-red-subtler: #ffd5d2;
  --mt-accent-purple-subtler: #dfd8fd;

  --hljs-string: #aa430f;
  --hljs-title: #b08836;
  --hljs-comment: #999999;
  --hljs-keyword: #0c5eb1;
  --hljs-attr: #3a92bc;
  --hljs-literal: #c82b0f;
  --hljs-name: #259792;
  --hljs-selector-tag: #c8500f;
  --hljs-number: #3da067;
}

.dark {
  --mt-overlay: rgba(31, 32, 35, 0.75);
  --mt-transparent-foreground: rgba(255, 255, 255, 0.4);
  --mt-bg-secondary: rgba(31, 32, 35, 0.8);
  --mt-code-background: #ffffff13;
  --mt-code-color: #2c2e33;
  --mt-secondary: #595a5c;
  --mt-pre-background: #080808;
  --mt-pre-border: #23252a;
  --mt-pre-color: #e3e4e6;
  --mt-hr: #26282d;
  --mt-drag-handle-hover: #969799;

  --mt-accent-bold-blue: #85b8ff;
  --mt-accent-bold-teal: #9dd9ee;
  --mt-accent-bold-green: #7ee2b8;
  --mt-accent-bold-orange: #fec195;
  --mt-accent-bold-red: #fd9891;
  --mt-accent-bold-purple: #b8acf6;

  --mt-accent-gray: #738496;
  --mt-accent-blue: #388bff;
  --mt-accent-teal: #42b2d7;
  --mt-accent-green: #2abb7f;
  --mt-accent-orange: #a54800;
  --mt-accent-red: #e2483d;
  --mt-accent-purple: #8f7ee7;

  --mt-accent-blue-subtler: #09326c;
  --mt-accent-teal-subtler: #164555;
  --mt-accent-green-subtler: #164b35;
  --mt-accent-yellow-subtler: #533f04;
  --mt-accent-red-subtler: #5d1f1a;
  --mt-accent-purple-subtler: #352c63;

  --hljs-string: #da936b;
  --hljs-title: #f1d59d;
  --hljs-comment: #aaaaaa;
  --hljs-keyword: #6699cc;
  --hljs-attr: #90cae8;
  --hljs-literal: #f2777a;
  --hljs-name: #5fc0a0;
  --hljs-selector-tag: #e8c785;
  --hljs-number: #b6e7b6;
}

.minimal-tiptap-editor .ProseMirror {
  @apply flex max-w-full cursor-text flex-col;
  @apply z-0 outline-0;
}

.minimal-tiptap-editor .ProseMirror > div.editor {
  @apply block flex-1 whitespace-pre-wrap;
}

.minimal-tiptap-editor .ProseMirror .block-node:not(:last-child),
.minimal-tiptap-editor .ProseMirror .list-node:not(:last-child),
.minimal-tiptap-editor .ProseMirror .text-node:not(:last-child) {
  @apply mb-2.5;
}

.minimal-tiptap-editor .ProseMirror ol,
.minimal-tiptap-editor .ProseMirror ul {
  @apply pl-6;
}

.minimal-tiptap-editor .ProseMirror blockquote,
.minimal-tiptap-editor .ProseMirror dl,
.minimal-tiptap-editor .ProseMirror ol,
.minimal-tiptap-editor .ProseMirror p,
.minimal-tiptap-editor .ProseMirror pre,
.minimal-tiptap-editor .ProseMirror ul {
  @apply m-0;
}

.minimal-tiptap-editor .ProseMirror li {
  @apply leading-7;
}

.minimal-tiptap-editor .ProseMirror p {
  @apply break-words;
}

.minimal-tiptap-editor .ProseMirror li .text-node:has(+ .list-node),
.minimal-tiptap-editor .ProseMirror li > .list-node,
.minimal-tiptap-editor .ProseMirror li > .text-node,
.minimal-tiptap-editor .ProseMirror li p {
  @apply mb-0;
}

.minimal-tiptap-editor .ProseMirror blockquote {
  @apply relative pl-3.5;
}

.minimal-tiptap-editor .ProseMirror blockquote::before,
.minimal-tiptap-editor .ProseMirror blockquote.is-empty::before {
  @apply bg-accent-foreground/15 absolute top-0 bottom-0 left-0 h-full w-1 rounded-sm content-[''];
}

.minimal-tiptap-editor .ProseMirror hr {
  @apply my-3 h-0.5 w-full border-none bg-[var(--mt-hr)];
}

.minimal-tiptap-editor .ProseMirror-focused hr.ProseMirror-selectednode {
  @apply outline-muted-foreground rounded-full outline-2 outline-offset-1;
}

.minimal-tiptap-editor .ProseMirror .ProseMirror-gapcursor {
  @apply pointer-events-none absolute hidden;
}

.minimal-tiptap-editor .ProseMirror .ProseMirror-hideselection {
  @apply caret-transparent;
}

.minimal-tiptap-editor .ProseMirror.resize-cursor {
  @apply cursor-col-resize;
}

.minimal-tiptap-editor .ProseMirror .selection {
  @apply inline-block;
}

.minimal-tiptap-editor .ProseMirror s span {
  @apply line-through;
}

.minimal-tiptap-editor .ProseMirror .selection,
.minimal-tiptap-editor .ProseMirror *::selection {
  @apply bg-primary/25;
}

/* Override native selection when custom selection is present */
.minimal-tiptap-editor .ProseMirror .selection::selection {
  background: transparent;
}

/* Tables */
.minimal-tiptap-editor .ProseMirror table {
  @apply my-4 w-full border-collapse overflow-hidden rounded-lg border border-border;
}

.minimal-tiptap-editor .ProseMirror table td,
.minimal-tiptap-editor .ProseMirror table th {
  @apply relative min-w-[100px] border border-border px-3 py-2 text-left align-top;
}

.minimal-tiptap-editor .ProseMirror table th {
  @apply bg-muted font-semibold;
}

.minimal-tiptap-editor .ProseMirror table .selectedCell {
  @apply bg-primary/10;
}

.minimal-tiptap-editor .ProseMirror table .selectedCell::after {
  @apply pointer-events-none absolute inset-0 bg-primary/10 content-[''];
}

/* Column resize handle */
.minimal-tiptap-editor .ProseMirror .column-resize-handle {
  @apply absolute -right-0.5 top-0 bottom-0 z-10 w-1 cursor-col-resize bg-primary/50;
}

.minimal-tiptap-editor .ProseMirror.resize-cursor {
  @apply cursor-col-resize;
}

/* Mentions */
.minimal-tiptap-editor .ProseMirror .mention {
  @apply inline-block rounded-md bg-primary/10 px-1.5 py-0.5 font-medium text-primary;
}

.minimal-tiptap-editor .ProseMirror .mention:hover {
  @apply bg-primary/20;
}

/* Highlight */
.minimal-tiptap-editor .ProseMirror mark {
  @apply rounded-sm bg-yellow-200 px-0.5 dark:bg-yellow-500/40;
}

.minimal-tiptap-editor .ProseMirror mark[data-color] {
  background-color: var(--highlight-color, #fef08a);
}

/* Details / Collapsible */
.minimal-tiptap-editor .ProseMirror details {
  @apply my-2 rounded-lg border border-border bg-muted/30;
}

.minimal-tiptap-editor .ProseMirror details summary {
  @apply cursor-pointer px-4 py-2 font-medium select-none;
}

.minimal-tiptap-editor .ProseMirror details summary:hover {
  @apply bg-muted/50;
}

.minimal-tiptap-editor .ProseMirror details[open] summary {
  @apply border-b border-border;
}

.minimal-tiptap-editor .ProseMirror details > div:not(summary) {
  @apply px-4 py-3;
}

/* YouTube / Twitch embeds */
.minimal-tiptap-editor .ProseMirror .youtube-node,
.minimal-tiptap-editor .ProseMirror .twitch-node {
  @apply my-4;
}

.minimal-tiptap-editor .ProseMirror iframe {
  @apply max-w-full rounded-lg border border-border;
  aspect-ratio: 16 / 9;
}

.minimal-tiptap-editor .ProseMirror .ProseMirror-selectednode iframe {
  @apply outline outline-2 outline-offset-2 outline-primary;
}


/* Load Tailwind Typography plugin for prose classes used by Markdown component */
@plugin "@tailwindcss/typography";
