/*
 * ActionText / Trix Editor - Theme-Aware Dark Mode Support
 * This file makes Trix editor work properly in both light and dark themes
 * by using CSS custom properties that adapt to the current theme.
 */

/* ===================================================================
   TRIX EDITOR - THEME AWARE STYLING
   =================================================================== */

/* Editor container - use theme colors */
trix-editor {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

trix-editor:focus {
  border-color: var(--bs-primary) !important;
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* ===================================================================
   TRIX TOOLBAR - THEME AWARE
   =================================================================== */

/* Toolbar container */
/* trix-toolbar {
  background-color: var(--bs-secondary-bg) !important;
  border-color: var(--bs-border-color) !important;
} */

/* Button groups */
trix-toolbar .trix-button-group {
  background-color: var(--bs-body-bg) !important;
  border-color: var(--bs-border-color) !important;
  border-top-color: var(--bs-border-color) !important;
  border-bottom-color: var(--bs-border-color) !important;
}

/* Individual buttons */
trix-toolbar .trix-button {
  color: var(--bs-body-color) !important;
  background-color: transparent !important;
  border-bottom-color: var(--bs-border-color) !important;
}

trix-toolbar .trix-button:not(:first-child) {
  border-left-color: var(--bs-border-color) !important;
}

trix-toolbar .trix-button:hover:not(:disabled) {
  background-color: var(--bs-tertiary-bg) !important;
}

trix-toolbar .trix-button.trix-active {
  background-color: rgba(var(--bs-primary-rgb), 0.2) !important;
  color: var(--bs-primary) !important;
}

trix-toolbar .trix-button:disabled {
  color: var(--bs-secondary) !important;
  opacity: 0.5;
}

/* ===================================================================
   TRIX ICON BUTTONS - DARK MODE FIX
   The SVG icons are embedded with hardcoded black (#000) fill.
   We need to use CSS filters to invert them in dark mode.
   =================================================================== */

/* In dark mode, invert the icon colors */
[data-bs-theme="dark"] trix-toolbar .trix-button--icon::before {
  filter: invert(1);
  opacity: 0.8;
}

/* When button is active in dark mode, make it more visible */
[data-bs-theme="dark"] trix-toolbar .trix-button--icon.trix-active::before {
  filter: invert(1);
  opacity: 1;
}

/* When button is disabled in dark mode */
[data-bs-theme="dark"] trix-toolbar .trix-button--icon:disabled::before {
  filter: invert(1);
  opacity: 0.3;
}

/* ===================================================================
   TRIX DIALOG (Link/Attachment Input) - THEME AWARE
   =================================================================== */

trix-toolbar .trix-dialog {
  background-color: var(--bs-body-bg) !important;
  border-color: var(--bs-border-color) !important;
  border-top-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
  box-shadow: 0 0.3em 1em rgba(0, 0, 0, 0.3);
}

trix-toolbar .trix-input--dialog {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

trix-toolbar .trix-input--dialog:focus {
  border-color: var(--bs-primary) !important;
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Invalid input styling */
trix-toolbar .trix-input--dialog.validate:invalid {
  box-shadow: 0px 0px 1.5px 1px var(--bs-danger) !important;
}

/* ===================================================================
   TRIX CONTENT RENDERING - THEME AWARE
   =================================================================== */

/* Blockquotes */
.trix-content blockquote {
  border-color: var(--bs-border-color) !important;
}

/* Code blocks */
.trix-content pre {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-body-color) !important;
}

/* File attachments */
.trix-content .attachment--file {
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
  background-color: var(--bs-secondary-bg) !important;
}

/* Attachment captions */
.trix-content .attachment--preview .attachment__caption {
  color: var(--bs-secondary) !important;
}

/* ===================================================================
   ATTACHMENT METADATA (shown during upload) - THEME AWARE
   =================================================================== */

trix-editor .attachment__metadata {
  color: var(--bs-body-bg) !important;
  background-color: rgba(var(--bs-body-color-rgb), 0.8) !important;
}

/* ===================================================================
   ATTACHMENT TOOLBAR BUTTONS - THEME AWARE
   =================================================================== */

trix-editor .trix-button {
  color: var(--bs-body-color) !important;
  border-left-color: var(--bs-border-color) !important;
}

trix-editor .trix-button.trix-active {
  background-color: rgba(var(--bs-primary-rgb), 0.2) !important;
}

trix-editor .trix-button--remove {
  background-color: var(--bs-body-bg) !important;
  border-color: var(--bs-danger) !important;
}

trix-editor .trix-button--remove:hover {
  border-color: var(--bs-danger) !important;
  background-color: var(--bs-danger) !important;
}

/* In dark mode, invert the remove icon */
[data-bs-theme="dark"] trix-editor .trix-button--remove::before {
  filter: invert(1);
}

[data-bs-theme="dark"] trix-editor .trix-button--remove:hover::before {
  filter: invert(0);
}

/* ===================================================================
   PROGRESS BARS (for file uploads) - THEME AWARE
   =================================================================== */

.trix-content .attachment__progress progress {
  background-color: var(--bs-secondary-bg) !important;
  border-color: var(--bs-border-color) !important;
}

.trix-content .attachment__progress progress::-webkit-progress-bar {
  background-color: var(--bs-secondary-bg) !important;
}

.trix-content .attachment__progress progress::-webkit-progress-value {
  background-color: var(--bs-primary) !important;
}

.trix-content .attachment__progress progress::-moz-progress-bar {
  background-color: var(--bs-primary) !important;
}

/* ===================================================================
   ACCESSIBILITY IMPROVEMENTS
   =================================================================== */

/* Focus states for keyboard navigation */
trix-editor:focus-within {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* Make sure text selection is visible in both themes */
trix-editor ::selection {
  background-color: rgba(var(--bs-primary-rgb), 0.3);
  color: var(--bs-body-color);
}

trix-editor ::-moz-selection {
  background-color: rgba(var(--bs-primary-rgb), 0.3);
  color: var(--bs-body-color);
}