/* =================================================================
   Trix Editor Styles (for editor sidebar)
   ================================================================= */

/* Toolbar */
trix-toolbar {
  padding: 4px;
  border: 1px solid #d1d5db;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: #f9fafb;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  width: 100%;
}

trix-toolbar .trix-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin: 0;
  border: none;
}

trix-toolbar .trix-button-group + .trix-button-group {
  margin-left: 4px;
}

trix-toolbar button.trix-button {
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
}

trix-toolbar button.trix-button:hover {
  background: #e5e7eb;
  color: #374151;
}

trix-toolbar button.trix-button.trix-active {
  background: #4f46e5;
  color: white;
}

/* Toolbar button icons */
trix-toolbar button.trix-button--icon::before {
  display: inline-block;
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  left: 2px;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.7;
}

trix-toolbar button.trix-button--icon:hover::before,
trix-toolbar button.trix-button--icon.trix-active::before {
  opacity: 1;
}

/* Standard Trix icon backgrounds */
trix-toolbar .trix-button--icon-bold::before                  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z'/%3E%3Cpath d='M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z'/%3E%3C/svg%3E"); }
trix-toolbar .trix-button--icon-italic::before                { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='4' x2='10' y2='4'/%3E%3Cline x1='14' y1='20' x2='5' y2='20'/%3E%3Cline x1='15' y1='4' x2='9' y2='20'/%3E%3C/svg%3E"); }
trix-toolbar .trix-button--icon-strike::before                { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.3 4.9c-2.3-.6-4.4-1-6.2-.5-2.7.7-3.6 2.2-3.5 3.7.1 1.4 1.1 2.4 2.3 3.1'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cpath d='M15.6 13.4c.3.8.4 1.7 0 2.5-.5 1.3-1.8 2.5-4.6 2.8-1.3.1-3.7-.2-5-.8'/%3E%3C/svg%3E"); }
trix-toolbar .trix-button--icon-link::before                  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E"); }
trix-toolbar .trix-button--icon-heading-1::before             { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h8'/%3E%3Cpath d='M4 18V6'/%3E%3Cpath d='M12 18V6'/%3E%3Cpath d='m17 12 3-2v8'/%3E%3C/svg%3E"); }
trix-toolbar .trix-button--icon-quote::before                 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cline x1='3' y1='14' x2='21' y2='14'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3C/svg%3E"); }
trix-toolbar .trix-button--icon-bullet-list::before           { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E"); }
trix-toolbar .trix-button--icon-number-list::before           { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='10' y1='6' x2='21' y2='6'/%3E%3Cline x1='10' y1='12' x2='21' y2='12'/%3E%3Cline x1='10' y1='18' x2='21' y2='18'/%3E%3Cpath d='M4 6h1v4'/%3E%3Cpath d='M4 10h2'/%3E%3Cpath d='M6 18H4c0-1 2-2 2-3s-1-1.5-2-1'/%3E%3C/svg%3E"); }
trix-toolbar .trix-button--icon-decrease-nesting-level::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 8 3 12 7 16'/%3E%3Cline x1='21' y1='12' x2='3' y2='12'/%3E%3Cline x1='21' y1='6' x2='11' y2='6'/%3E%3Cline x1='21' y1='18' x2='11' y2='18'/%3E%3C/svg%3E"); }
trix-toolbar .trix-button--icon-increase-nesting-level::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 8 7 12 3 16'/%3E%3Cline x1='21' y1='12' x2='7' y2='12'/%3E%3Cline x1='21' y1='6' x2='11' y2='6'/%3E%3Cline x1='21' y1='18' x2='11' y2='18'/%3E%3C/svg%3E"); }
trix-toolbar .trix-button--icon-undo::before                  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 4 1 10 7 10'/%3E%3Cpath d='M3.51 15a9 9 0 1 0 2.13-9.36L1 10'/%3E%3C/svg%3E"); }
trix-toolbar .trix-button--icon-redo::before                  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpath d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/%3E%3C/svg%3E"); }

/* Trix dialog (link dialog) */
trix-toolbar .trix-dialogs {
  position: relative;
  width: 100%;
}

trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 8px;
  background: #f9fafb;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

trix-toolbar .trix-dialog__link-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

trix-toolbar .trix-dialog input[type="url"],
trix-toolbar .trix-dialog input[type="text"] {
  width: 100%;
  padding: 4px 8px;
  font-size: 13px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: white;
  color: #111827;
}

trix-toolbar .trix-dialog .trix-button-group {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

trix-toolbar .trix-dialog .trix-button-group button {
  text-indent: 0;
  width: auto;
  height: auto;
  padding: 4px 12px;
  font-size: 12px;
}

/* Editor area */
trix-editor {
  display: block;
  min-height: 150px;
  padding: 8px;
  border: 1px solid #d1d5db;
  border-top: none;
  border-radius: 0 0 6px 6px;
  background: white;
  color: #111827;
  font-size: 13px;
  line-height: 1.5;
  overflow-y: auto;
}

trix-editor:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 1px #6366f1;
}

/* Editor content styles */
trix-editor h1 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.25rem; }
trix-editor blockquote { border-left: 3px solid #d1d5db; padding-left: 0.5rem; margin-left: 0; color: #6b7280; font-style: italic; }
trix-editor ul { list-style: disc; padding-left: 1.25rem; }
trix-editor ol { list-style: decimal; padding-left: 1.25rem; }
trix-editor pre { background: #f3f4f6; padding: 0.5rem; border-radius: 4px; font-size: 12px; }
trix-editor a { color: #4f46e5; text-decoration: underline; }

/* Modal editor — larger editing area */
.rich-text-modal-editor {
  min-height: 300px;
  max-height: 60vh;
  overflow-y: auto;
}

/* Hide file attachment and code buttons */
trix-toolbar .trix-button-group--file-tools {
  display: none !important;
}

trix-toolbar .trix-button--icon-code {
  display: none !important;
}

/* =================================================================
   Dark mode (system preference)
   ================================================================= */
@media (prefers-color-scheme: dark) {
  /* Toolbar */
  trix-toolbar {
    background: #1f2937;
    border-color: #4b5563;
  }

  trix-toolbar button.trix-button {
    color: #9ca3af;
  }

  trix-toolbar button.trix-button:hover {
    background: #374151;
    color: #e5e7eb;
  }

  trix-toolbar button.trix-button.trix-active {
    background: #6366f1;
    color: white;
  }

  trix-toolbar button.trix-button--icon::before {
    filter: invert(1);
  }

  trix-toolbar button.trix-button--icon.trix-active::before {
    filter: invert(1) brightness(2);
  }

  /* Dialog */
  trix-toolbar .trix-dialog {
    background: #1f2937;
    border-color: #4b5563;
  }

  trix-toolbar .trix-dialog input[type="url"],
  trix-toolbar .trix-dialog input[type="text"] {
    background: #111827;
    border-color: #4b5563;
    color: #f3f4f6;
  }

  /* Editor */
  trix-editor {
    background: #111827;
    border-color: #4b5563;
    color: #f3f4f6;
  }

  trix-editor:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 1px #818cf8;
  }

  trix-editor blockquote { border-left-color: #4b5563; color: #9ca3af; }
  trix-editor pre { background: #1f2937; }
  trix-editor a { color: #818cf8; }
}