/* Application styles — keep most styling in Tailwind utilities */

/* Shake animation for invalid magic link code */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}
.animate-shake {
  animation: shake 0.3s ease-in-out;
}

/* Trix editor styling */
trix-editor {
  min-height: 8rem;
  border-radius: 0.5rem;
  border-color: rgb(209 213 219);
}

trix-editor.trix-content {
  overflow-y: auto;
}

trix-toolbar .trix-button-row {
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: flex-start;
}

trix-toolbar .trix-button-group {
  border-radius: 0.375rem;
}

/* Hide toolbar buttons we don't want in comments:
   - attach files, bullet/number lists, increase/decrease nesting level */
trix-toolbar .trix-button--icon-attach,
trix-toolbar .trix-button--icon-bullet-list,
trix-toolbar .trix-button--icon-number-list,
trix-toolbar .trix-button--icon-decrease-nesting-level,
trix-toolbar .trix-button--icon-increase-nesting-level {
  display: none;
}

/* If the "block" button-group (lists + nesting) is now empty, hide it too */
trix-toolbar .trix-button-group--block-tools {
  display: none;
}

/* And the file tools group (attach) */
trix-toolbar .trix-button-group--file-tools {
  display: none;
}

/* Trix dark mode */
.dark trix-editor {
  background-color: rgb(31 41 55);
  color: rgb(243 244 246);
  border-color: rgb(75 85 99);
}

.dark trix-toolbar .trix-button-group {
  border-color: rgb(75 85 99);
  background-color: rgb(31 41 55);
}

.dark trix-toolbar .trix-button {
  border-bottom-color: rgb(55 65 81);
  color: rgb(229 231 235);
}

.dark trix-toolbar .trix-button:not(:first-child) {
  border-left-color: rgb(55 65 81);
}

/* Invert just the icon glyphs (which are black SVGs) for dark mode */
.dark trix-toolbar .trix-button--icon::before {
  filter: invert(1);
}

.dark trix-toolbar .trix-button.trix-active {
  background: rgb(30 58 138);
  color: white;
}