/* Lexxy Editor Styles - Blueprint Noir Theme
   Adapted from Fizzy's lexxy.css
   ========================================================================== */

lexxy-editor {
  display: block;
  position: relative;

  figure.node--selected {
    &:not(:has(img)) {
      outline: 2px solid var(--color-copper-light);
      outline-offset: 2px;
    }

    &:has(img) {
      img {
        outline: 2px solid var(--color-copper-light);
        outline-offset: 2px;
      }
    }
  }

  /* Lexical still uses the `lexxy-editor--empty` class if you have a list
     started with no other characters. Here, we won't show the placeholder if
     you've clicked the List button in the toolbar. */
  &.lexxy-editor--empty {
    .lexxy-editor__content:not(:has(ul, ol))::before {
      content: attr(placeholder);
      color: currentColor;
      cursor: text;
      opacity: 0.5;
      pointer-events: none;
      position: absolute;
      white-space: pre-line;
    }
  }
}

.lexxy-dialog-actions {
  display: flex;
  font-size: 0.75rem;
  flex: 1 1 0%;
  gap: 0.5rem;
  margin-block-start: 0.5rem;

  .btn {
    --radius: var(--radius-sm);

    inline-size: 100%;
    justify-content: center;

    &:is([type="submit"]) {
      background: var(--color-copper-light);
      color: var(--color-slate-deepest);
    }
  }

  span {
    inline-size: 100%;
  }
}

.lexxy-editor__content {
  --block-margin: 1.25rem;

  padding: 1rem;
  min-block-size: calc(7lh + 1rem);
  outline: 0;
  color: var(--text-primary);

  /* Reset margins for first/last children, but NOT for li elements */
  > *:first-child {
    margin-block-start: 0;
  }

  > *:last-child {
    margin-block-end: 0;
  }

  /* Rich text content styles */
  h1, h2, h3 {
    font-family: var(--font-display);
    color: var(--color-copper-light);
  }

  h1 {
    font-size: 1.75rem;
    margin: 1rem 0 0.5rem;
  }

  h2 {
    font-size: 1.375rem;
    margin: 0.875rem 0 0.5rem;
  }

  h3 {
    font-size: 1.125rem;
    margin: 0.75rem 0 0.375rem;
  }

  /* Consistent block margins for all content types */
  p, ul, ol, blockquote {
    margin-block: 0 var(--block-margin);
  }

  blockquote {
    border-left: 3px solid var(--color-copper-light);
    padding-left: 1rem;
    color: var(--text-muted);
    font-style: italic;
  }

  ul, ol {
    padding-inline-start: 0;
    margin-inline-start: 3rem;
  }

  li {
    padding-block: 0.5rem;
    line-height: 1.6;
  }

  /* Nested lists */
  li > ul,
  li > ol {
    margin-block: 0.5rem;
    margin-inline-start: 1.5rem;
  }

  ul ul, ol ul {
    list-style-type: circle;
  }

  ul ul ul, ol ul ul {
    list-style-type: square;
  }

  a {
    color: var(--color-copper-light);
    text-decoration: underline;
  }

  code {
    background: var(--color-slate);
    padding: 0.1em 0.4em;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.9em;
  }

  /* Strikethrough - Lexxy uses .lexxy-content__strikethrough class */
  s, del, .lexxy-content__strikethrough {
    text-decoration: line-through;
  }

  /* Bold and Italic - Lexxy class variants */
  .lexxy-content__bold {
    font-weight: 700;
  }

  .lexxy-content__italic {
    font-style: italic;
  }

  pre {
    background: var(--color-slate-darker);
    padding: 1rem;
    border-radius: var(--radius-md);
    overflow-x: auto;

    code {
      background: transparent;
      padding: 0;
    }
  }
}

.lexxy-editor--drag-over {
  background-color: rgba(212, 165, 116, 0.1);
  border-radius: var(--radius-sm);
  outline: 2px dashed var(--color-copper-light);
}

lexxy-toolbar {
  --lexxy-toolbar-icon-size: 1em;

  background-color: var(--color-slate-darker);
  border-block-end: 1px solid var(--color-slate-light);
  color: var(--text-secondary);
  display: flex;
  font-size: inherit;
  margin: 0;
  max-inline-size: 100%;
  padding: 0.4em 1rem;
  position: -webkit-sticky; /* Safari fallback */
  position: sticky;
  top: 0;
  z-index: 10;

  dialog {
    background-color: var(--color-slate-dark);
    border: 1px solid var(--color-slate-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-medium);
    color: var(--text-primary);
    padding: 1rem 1.5rem;
    position: absolute;
    z-index: 1;

    .input[type="url"] {
      min-inline-size: 30ch;
      background: var(--color-slate-darker);
      border: 1px solid var(--color-slate-light);
      color: var(--text-primary);
      padding: 0.5rem;
      border-radius: var(--radius-sm);
    }
  }
}

.lexxy-editor__toolbar-button {
  --toolbar-button-size: 44px;

  appearance: none;
  aspect-ratio: 1;
  background-color: transparent;
  block-size: var(--toolbar-button-size);
  border: none;
  border-radius: var(--radius-sm);
  color: currentColor;
  cursor: pointer;
  display: grid;
  font-size: inherit;
  place-items: center;

  &:is(:focus, :hover) {
    background-color: var(--color-slate);
    box-shadow: none;
    color: var(--text-primary);
  }

  &:is(:active),
  &[aria-pressed="true"] {
    background-color: rgba(212, 165, 116, 0.2);
    color: var(--color-copper-light);
  }

  svg {
    -webkit-touch-callout: none;
    block-size: var(--lexxy-toolbar-icon-size);
    fill: currentColor;
    grid-area: 1/1;
    inline-size: var(--lexxy-toolbar-icon-size);
    user-select: none;
  }

  @media (min-width: 640px) {
    --toolbar-button-size: 2em;
  }
}

.lexxy-editor__toolbar-overflow-menu {
  background-color: var(--color-slate-dark);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-medium);
  display: flex;
  inset-inline-end: 0;
  padding: 4px;
  position: absolute;
  z-index: 1;
}

:where(.lexxy-editor__toolbar-spacer) {
  flex: 1;
}

.lexxy-editor__toolbar-separator {
  width: 1px;
  background: var(--color-slate-light);
  margin: 0.5rem 0.25rem;
}

/* Based on .input, .input--select */
.lexxy-code-language-picker {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--color-slate-darker);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23F3F4F6'/%3E%3C/svg%3E");
  background-position: center right 0.9em;
  background-repeat: no-repeat;
  background-size: 0.5em;
  border: 1px solid var(--color-slate-light);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  inset-inline-end: 0;
  line-height: inherit;
  margin: 0.3em 0.3em 0 0;
  padding: 0.5em 1.8em 0.5em 1.2em;
  text-align: start;

  option {
    background-color: var(--color-slate-dark);
    color: var(--text-primary);
  }
}

/* Prompt Menu
/* ------------------------------------------------------------------------ */

.lexxy-prompt-menu {
  --lexxy-prompt-avatar-size: 24px;
  --lexxy-prompt-min-width: 20ch;
  --lexxy-prompt-padding: 0.5ch;

  background-color: var(--color-slate-dark);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-strong);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.875rem;
  list-style: none;
  margin: 0;
  min-inline-size: var(--lexxy-prompt-min-width);
  padding: var(--lexxy-prompt-padding);
  visibility: hidden;
  z-index: 100;

  max-height: 200px;
  overflow: scroll;
}

.lexxy-prompt-menu--visible {
  visibility: initial;
}

.lexxy-prompt-menu__item {
  align-items: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  gap: var(--lexxy-prompt-padding);
  padding: var(--lexxy-prompt-padding);
  white-space: nowrap;

  &:hover {
    background-color: var(--color-slate);
  }

  &[aria-selected] {
    background-color: rgba(212, 165, 116, 0.15);
  }

  img {
    block-size: var(--lexxy-prompt-avatar-size);
    border-radius: 50%;
    flex-shrink: 0;
    inline-size: var(--lexxy-prompt-avatar-size);
    margin: 0;
  }

  + & {
    margin-top: 2px;
  }

  code {
    background-color: var(--color-slate);
    border-radius: var(--radius-sm);
    font-size: 0.95em;
    padding-inline: 0.5ch;
  }
}

/* Empty state */
.lexxy-prompt-menu__item--empty {
  color: var(--text-muted);
  padding: var(--lexxy-prompt-padding);
}

/* ==========================================================================
   Estimate Table in Lexxy Editor
   Inherits from offer_editor.css for consistency
   ========================================================================== */

lexxy-editor .estimate-table-embed {
  margin: 0;
  padding: 0.5rem 1rem;
}

lexxy-editor .estimate-table-embed,
lexxy-editor table {
  width: 100%;
  border-collapse: collapse;
}

lexxy-editor table th,
lexxy-editor table td {
  padding: 0.375rem 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text-secondary);
  vertical-align: top;
  border: none;
}

lexxy-editor table thead tr {
  border-bottom: 1px solid rgba(212, 165, 116, 0.25);
}

lexxy-editor table th {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-copper-light);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   ActionText Attachments (Estimate tables, etc.)
   Makes attachments selectable and deletable
   ========================================================================== */

lexxy-editor figure.attachment,
lexxy-editor action-text-attachment {
  display: block;
  margin: 1rem 0;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: outline var(--transition-quick), background var(--transition-quick);
}

lexxy-editor figure.attachment:hover {
  background: rgba(212, 165, 116, 0.05);
}

lexxy-editor figure.attachment:focus,
lexxy-editor figure.attachment.node--selected {
  outline: 2px solid var(--color-copper-light);
  outline-offset: 4px;
  background: rgba(212, 165, 116, 0.08);
}

/* Make figure focusable for keyboard delete */
lexxy-editor figure.attachment {
  outline: none;
}

lexxy-editor figure.attachment[tabindex] {
  cursor: pointer;
}

/* Estimate delete button (X) */
.estimate-delete-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-slate-deepest);
  border: none;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-quick), background var(--transition-quick);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: var(--shadow-medium);
}

.estimate-delete-btn:hover {
  background: #ef4444;
  color: white;
}

/* Show delete button on hover or focus */
figure.attachment:hover .estimate-delete-btn,
figure.attachment:focus .estimate-delete-btn,
figure.attachment.node--selected .estimate-delete-btn,
action-text-attachment:hover .estimate-delete-btn,
action-text-attachment:focus .estimate-delete-btn,
action-text-attachment.node--selected .estimate-delete-btn {
  opacity: 1;
}

/* ActionText attachments (old Trix format) - make them deletable */
lexxy-editor action-text-attachment {
  display: block;
  position: relative;
  cursor: pointer;
  margin: 1rem 0;
  border-radius: var(--radius-md);
  transition: outline var(--transition-quick), background var(--transition-quick);
}

lexxy-editor action-text-attachment:hover {
  background: rgba(212, 165, 116, 0.05);
}

lexxy-editor action-text-attachment:focus,
lexxy-editor action-text-attachment.node--selected {
  outline: 2px solid var(--color-copper-light);
  outline-offset: 4px;
  background: rgba(212, 165, 116, 0.08);
}

/* Hide image filename caption in editor - show only the image */
lexxy-editor figure.attachment--preview .attachment__caption,
lexxy-editor .attachment--preview figcaption {
  display: none;
}

/* Constrain images to editor width */
lexxy-editor img,
lexxy-editor figure img,
lexxy-editor figure.attachment img,
lexxy-editor action-text-attachment img {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  display: block;
}

lexxy-editor figure.attachment--preview,
lexxy-editor figure.attachment,
lexxy-editor action-text-attachment {
  max-width: 100%;
  overflow: hidden;
  display: block;
}

/* ==========================================================================
   Estimate Insert Button in Toolbar
   ========================================================================== */

.btn-estimate-insert {
  appearance: none;
  background: rgba(212, 165, 116, 0.15);
  border: 1px solid var(--color-copper-light);
  border-radius: var(--radius-sm);
  color: var(--color-copper-light);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  margin-right: 0.5rem;
  padding: 0.35em 0.75em;
  white-space: nowrap;
  transition: background var(--transition-quick), color var(--transition-quick);
}

.btn-estimate-insert:hover {
  background: rgba(212, 165, 116, 0.25);
  color: var(--text-primary);
}

.btn-estimate-insert:active {
  background: rgba(212, 165, 116, 0.35);
}

.btn-estimate-insert svg {
  flex-shrink: 0;
}