/*
 * Lexxy/ActionText styles - fix Tailwind CSS reset conflicts
 *
 * NOTE: This file is served raw through Propshaft (not processed by Tailwind),
 * so @apply directives cannot be used here. Use plain CSS with Lexxy CSS variables.
 */

/* Strikethrough - Lexxy's :where() wrapper has 0 specificity, so Tailwind's
 * preflight can override it. Re-declare with real specificity. */
lexxy-editor .lexxy-content__strikethrough,
.lexxy-content .lexxy-content__strikethrough {
  text-decoration: line-through;
}

/* Dark mode overrides for Lexxy editor variables.
 * Scoped to lexxy-editor (not :root) so these take precedence over
 * the gem's :root declarations regardless of CSS load order. */
@media (prefers-color-scheme: dark) {
  lexxy-editor,
  .lexxy-content {
    --lexxy-color-ink: oklch(90% 0.006 250);
    --lexxy-color-ink-medium: oklch(65% 0.006 250);
    --lexxy-color-ink-light: oklch(50% 0.006 250);
    --lexxy-color-ink-lighter: oklch(35% 0.008 250);
    --lexxy-color-ink-lightest: oklch(24% 0.005 250);
    --lexxy-color-ink-inverted: oklch(18% 0.005 250);

    --lexxy-color-canvas: var(--color-base-100, oklch(18% 0.005 250));
    --lexxy-color-text: var(--color-base-content, oklch(90% 0.006 250));
    --lexxy-color-text-subtle: oklch(65% 0.006 250);

    /* Toolbar active/pressed button states */
    --lexxy-color-selected: oklch(30% 0.03 250);
    --lexxy-color-selected-hover: oklch(35% 0.03 250);
    --lexxy-color-selected-dark: oklch(55% 0.15 250);

    /* Shadow for dropdowns */
    --lexxy-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);

    /* Brighter highlight text colors for dark backgrounds */
    --highlight-1: rgb(227, 210, 90);
    --highlight-2: rgb(255, 165, 60);
    --highlight-3: rgb(255, 100, 100);
    --highlight-4: rgb(255, 120, 210);
    --highlight-5: rgb(190, 140, 255);
    --highlight-6: rgb(100, 180, 255);
    --highlight-7: rgb(90, 220, 80);
    --highlight-8: rgb(220, 160, 100);
    --highlight-9: rgb(180, 180, 180);

    /* Higher opacity background highlights for dark mode */
    --highlight-bg-1: rgba(229, 223, 6, 0.25);
    --highlight-bg-2: rgba(255, 185, 87, 0.25);
    --highlight-bg-3: rgba(255, 118, 118, 0.25);
    --highlight-bg-4: rgba(248, 137, 216, 0.25);
    --highlight-bg-5: rgba(190, 165, 255, 0.25);
    --highlight-bg-6: rgba(124, 192, 252, 0.25);
    --highlight-bg-7: rgba(140, 255, 129, 0.25);
    --highlight-bg-8: rgba(221, 170, 123, 0.25);
    --highlight-bg-9: rgba(200, 200, 200, 0.25);

    /* Code syntax tokens - GitHub dark theme */
    --lexxy-color-code-token-att: #f97583;
    --lexxy-color-code-token-comment: #8b949e;
    --lexxy-color-code-token-function: #d2a8ff;
    --lexxy-color-code-token-operator: #f97583;
    --lexxy-color-code-token-property: #79c0ff;
    --lexxy-color-code-token-punctuation: #c9d1d9;
    --lexxy-color-code-token-selector: #7ee787;
    --lexxy-color-code-token-variable: #ffa657;
  }

  /* Table header cells - Lexxy's JS sets inline style="background-color: rgb(242, 243, 245)"
   * on header cells, so !important is needed to override it in dark mode. */
  lexxy-editor .lexxy-content__table-cell--header {
    background-color: oklch(24% 0.005 250) !important;
  }

  /* Prompt menu (autocomplete/mentions) renders outside lexxy-editor */
  .lexxy-prompt-menu {
    --lexxy-color-canvas: var(--color-base-100, oklch(18% 0.005 250));
    --lexxy-color-ink: oklch(90% 0.006 250);
    --lexxy-color-ink-lightest: oklch(24% 0.005 250);
    --lexxy-color-ink-medium: oklch(65% 0.006 250);
    --lexxy-color-selected: oklch(30% 0.03 250);
    --lexxy-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  }
}

/* Editor content area needs padding for list markers */
.lexxy-editor__content,
lexxy-editor [contenteditable] {
  padding-left: 1.5rem;
}

/* Lists - restore proper styling */
lexxy-editor ul,
lexxy-editor ol,
.lexxy-content ul,
.lexxy-content ol {
  padding-left: 1.5em;
  margin: 0.5em 0;
}

lexxy-editor ul,
.lexxy-content ul {
  list-style-type: disc;
}

lexxy-editor ol,
.lexxy-content ol {
  list-style-type: decimal;
}

lexxy-editor li,
.lexxy-content li {
  margin: 0.25em 0;
  display: list-item;
}

/* Nested lists */
lexxy-editor ul ul,
.lexxy-content ul ul {
  list-style-type: circle;
}

lexxy-editor ul ul ul,
.lexxy-content ul ul ul {
  list-style-type: square;
}

/* Tables */
lexxy-editor table,
.lexxy-content table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  margin: 0.5em 0;
  display: table;
}

lexxy-editor th,
lexxy-editor td,
.lexxy-content th,
.lexxy-content td {
  border: 1px solid var(--lexxy-color-ink-lighter);
  padding: 0.5em 0.75em;
  text-align: left;
  display: table-cell;
  background-color: transparent;
}

/* Header cell styling (for rendered rich text output; in the editor,
 * Lexxy's JS inline styles handle light mode and the @media block above
 * handles dark mode with !important). */
.lexxy-content .lexxy-content__table-cell--header,
.lexxy-content th {
  background-color: var(--lexxy-color-ink-lightest);
  font-weight: 600;
}

lexxy-editor tr,
.lexxy-content tr {
  display: table-row;
}

lexxy-editor thead,
.lexxy-content thead {
  display: table-header-group;
}

lexxy-editor tbody,
.lexxy-content tbody {
  display: table-row-group;
}

/* Table wrapper for horizontal scroll */
.lexxy-content__table-wrapper {
  overflow-x: auto;
  margin: 1em 0;
}

/* Blockquotes */
lexxy-editor blockquote,
.lexxy-content blockquote {
  border-left: 3px solid var(--lexxy-color-ink-lighter);
  margin: 1rem 0;
  padding-left: 1rem;
  font-style: italic;
  color: var(--lexxy-color-ink-medium);
}

/* Code blocks */
lexxy-editor pre,
lexxy-editor code,
.lexxy-content pre,
.lexxy-content code {
  background-color: var(--lexxy-color-ink-lightest);
  border-radius: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875em;
}

lexxy-editor code,
.lexxy-content code {
  padding: 0.125em 0.25em;
}

lexxy-editor pre,
.lexxy-content pre {
  padding: 1em;
  overflow-x: auto;
  margin: 1em 0;
}

/* Headings */
lexxy-editor h1,
.lexxy-content h1 {
  font-size: 2rem;
  font-weight: 700;
  margin: 0.5em 0;
}

lexxy-editor h2,
.lexxy-content h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0.5em 0;
}

lexxy-editor h3,
.lexxy-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0.5em 0;
}

/* Links */
lexxy-editor a,
.lexxy-content a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Truncate standalone links (sole child of a paragraph) so long URLs don't
 * blow out the layout, but leave inline links in prose wrapping normally. */
lexxy-editor p > a:only-child,
.lexxy-content p > a:only-child {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* Paragraphs */
lexxy-editor p,
.lexxy-content p {
  margin: 0.5em 0;
}

/* Images */
lexxy-editor img,
.lexxy-content img {
  max-width: 100%;
  height: auto;
}

/* Attachments */
.lexxy-content .attachment {
  display: block;
  max-width: 100%;
  margin: 1em auto;
}

.lexxy-content .attachment__caption {
  color: var(--lexxy-color-text-subtle);
  text-align: center;
  font-size: 0.875em;
  margin-top: 0.5em;
}

/* Highlight dropdown - allow content to fit all 9 color swatches */
lexxy-highlight-dropdown.lexxy-editor__toolbar-dropdown-content {
  max-inline-size: fit-content;
}

/* Link dropdown - prevent overflow when toolbar is in overflowing mode */
lexxy-link-dropdown form {
  min-width: 0;
}

lexxy-link-dropdown .lexxy-editor__toolbar-dropdown-actions .btn {
  min-width: 0;
  flex: 1 1 0%;
}