/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */


/* Bulletin point card: flush rich-text editor against the card border */
div.point-content {
  padding: 0;
}

div.point-content lexxy-editor {
  border: 0;
  border-radius: 0;
  --lexxy-editor-rows: 2lh;
}

/* Personal notes: borderless, full-bleed scratch pad */
[data-controller="personal-notes"] lexxy-editor {
  border: 0;
  border-radius: 0;
}

/*
 * The Lexxy theme map has no entry for the inline `code` text format, and the
 * gem's `code` styling lives under `:where(.lexxy-content)`, which is only
 * applied to rendered rich text — not the editor's live content. Style inline
 * code inside the editor to match the rendered output.
 */
.lexxy-editor__content code,
.lexxy-editor__content pre {
  background-color: var(--lexxy-color-ink-lightest);
  border-radius: var(--lexxy-radius);
  color: var(--lexxy-color-ink);
  font-family: var(--lexxy-font-mono);
  font-size: 0.9em;
  padding: 0.25ch 0.5ch;
}

.lexxy-editor__content pre,
.lexxy-editor__content code[data-language] {
  display: block;
  hyphens: none;
  margin-block: 0 var(--lexxy-content-margin);
  overflow-x: auto;
  overflow-wrap: break-word;
  padding: 1ch;
  tab-size: 2;
  white-space: pre;
}

/*
 * Lexxy already tokenizes code blocks into `.code-token__*` spans in the editor
 * (its `codeHighlight` theme maps Prism token types to these classes), but the
 * gem's token color rules live under `:where(.lexxy-content)` — rendered rich
 * text only — so they never apply inside the editor. Add matching colors here.
 * Selectors are scoped and equal-or-greater specificity than the base `code`
 * rule above so the token colors win over the default ink color.
 */
.lexxy-editor__content .code-token__attr {
  color: var(--lexxy-color-code-token-att);
}
.lexxy-editor__content .code-token__property {
  color: var(--lexxy-color-code-token-property);
}
.lexxy-editor__content .code-token__selector {
  color: var(--lexxy-color-code-token-selector);
}
.lexxy-editor__content .code-token__comment {
  color: var(--lexxy-color-code-token-comment);
  font-style: italic;
}
.lexxy-editor__content .code-token__operator {
  color: var(--lexxy-color-code-token-operator);
}
.lexxy-editor__content .code-token__function {
  color: var(--lexxy-color-code-token-function);
}
.lexxy-editor__content .code-token__variable {
  color: var(--lexxy-color-code-token-variable);
}
.lexxy-editor__content .code-token__punctuation {
  color: var(--lexxy-color-code-token-punctuation);
}

/* Highlight the row currently being dragged (source row still in place) */
.sortable-chosen {
  background-color: #e0f2fe;
}

/* When a whole ItemGroup row is dragged, give it a darker blue dashed border */
li.sortable-chosen:has(ul[data-list-sort-target="group"]) {
  background-color: #e0f2fe;
  outline: 2px dashed #1d4ed8;
  outline-offset: -2px;
}

/* Highlight the drop placeholder (where the row will land on drop) */
.sortable-ghost {
  opacity: 0.6;
  background-color: #fef3c7;
  outline: 2px dashed #f59e0b;
  outline-offset: -2px;
}
/* Weighted list: balance-bar header bands animate as counts change */
.weighted-band {
  transition: flex-grow 0.3s ease;
}

/* Weighted list: rows entering via Turbo streams or the add panel */
.row-enter {
  animation: row-in 0.18s ease-out;
}

@keyframes row-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}