/**
 * TinyMCE Email Editor - Theme Overrides
 * Integrates TinyMCE with the tankLogic theme system
 */

/* ════════════════════════════════════════════════════════════════════════════
   CONTAINER STYLING
   ════════════════════════════════════════════════════════════════════════════ */

.tinymce-email-wrapper {
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}

.tinymce-email-wrapper:focus-within {
  box-shadow: 0 0 0 3px var(--outreach-accent-subtle, rgba(59, 130, 246, 0.3));
}

/* Hide the original textarea when TinyMCE is active */
.tinymce-email-wrapper textarea[data-email-body] {
  display: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   ════════════════════════════════════════════════════════════════════════════ */

.tox.tox-tinymce {
  border: 1px solid var(--outreach-border, #d1d5db) !important;
  border-radius: 8px !important;
}

/* Toolbar */
.tox .tox-toolbar-overlord,
.tox .tox-toolbar__primary {
  background: var(--outreach-bg-card, #ffffff) !important;
  border-bottom: 1px solid var(--outreach-border, #e5e7eb) !important;
}

.tox .tox-toolbar__group {
  border-right: 1px solid var(--outreach-border, #e5e7eb) !important;
}

/* Toolbar buttons */
.tox .tox-tbtn {
  color: var(--outreach-text, #374151) !important;
}

.tox .tox-tbtn:hover {
  background: var(--outreach-bg-hover, #f3f4f6) !important;
}

.tox .tox-tbtn--enabled,
.tox .tox-tbtn--enabled:hover {
  background: var(--outreach-accent-subtle, rgba(59, 130, 246, 0.1)) !important;
  color: var(--outreach-accent, #3b82f6) !important;
}

/* Editor area */
.tox .tox-edit-area__iframe {
  background: var(--outreach-bg-input, #ffffff) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES
   ════════════════════════════════════════════════════════════════════════════ */

.dark .tox.tox-tinymce,
:root.dark .tox.tox-tinymce {
  border-color: var(--outreach-border, #374151) !important;
}

/* Dark mode toolbar */
.dark .tox .tox-toolbar-overlord,
.dark .tox .tox-toolbar__primary,
:root.dark .tox .tox-toolbar-overlord,
:root.dark .tox .tox-toolbar__primary {
  background: var(--outreach-bg-card, #1f2937) !important;
  border-bottom-color: var(--outreach-border, #374151) !important;
}

.dark .tox .tox-toolbar__group,
:root.dark .tox .tox-toolbar__group {
  border-right-color: var(--outreach-border, #374151) !important;
}

/* Dark mode toolbar buttons */
.dark .tox .tox-tbtn,
:root.dark .tox .tox-tbtn {
  color: var(--outreach-text, #e5e7eb) !important;
}

.dark .tox .tox-tbtn:hover,
:root.dark .tox .tox-tbtn:hover {
  background: var(--outreach-bg-hover, #374151) !important;
}

.dark .tox .tox-tbtn--enabled,
.dark .tox .tox-tbtn--enabled:hover,
:root.dark .tox .tox-tbtn--enabled,
:root.dark .tox .tox-tbtn--enabled:hover {
  background: var(--outreach-accent-subtle, rgba(59, 130, 246, 0.2)) !important;
  color: var(--outreach-accent, #60a5fa) !important;
}

/* Dark mode editor area */
.dark .tox .tox-edit-area__iframe,
:root.dark .tox .tox-edit-area__iframe {
  background: var(--outreach-bg-input, #111827) !important;
}

/* Dark mode dialogs */
.dark .tox .tox-dialog,
:root.dark .tox .tox-dialog {
  background: var(--outreach-bg-card, #1f2937) !important;
  border-color: var(--outreach-border, #374151) !important;
}

.dark .tox .tox-dialog__header,
:root.dark .tox .tox-dialog__header {
  background: var(--outreach-bg-card, #1f2937) !important;
  border-bottom-color: var(--outreach-border, #374151) !important;
}

.dark .tox .tox-dialog__title,
:root.dark .tox .tox-dialog__title {
  color: var(--outreach-text, #f3f4f6) !important;
}

.dark .tox .tox-dialog__body,
:root.dark .tox .tox-dialog__body {
  color: var(--outreach-text-muted, #d1d5db) !important;
}

.dark .tox .tox-textfield,
.dark .tox .tox-textarea,
:root.dark .tox .tox-textfield,
:root.dark .tox .tox-textarea {
  background: var(--outreach-bg-input, #111827) !important;
  border-color: var(--outreach-border, #374151) !important;
  color: var(--outreach-text, #e5e7eb) !important;
}

.dark .tox .tox-label,
:root.dark .tox .tox-label {
  color: var(--outreach-text-muted, #9ca3af) !important;
}

/* Dark mode buttons */
.dark .tox .tox-button--secondary,
:root.dark .tox .tox-button--secondary {
  background: var(--outreach-bg-hover, #374151) !important;
  border-color: var(--outreach-border, #4b5563) !important;
  color: var(--outreach-text, #e5e7eb) !important;
}

.dark .tox .tox-button,
:root.dark .tox .tox-button {
  background: var(--outreach-accent, #3b82f6) !important;
  color: #ffffff !important;
}

/* Dark mode menu/dropdown */
.dark .tox .tox-menu,
:root.dark .tox .tox-menu {
  background: var(--outreach-bg-card, #1f2937) !important;
  border-color: var(--outreach-border, #374151) !important;
}

.dark .tox .tox-collection__item,
:root.dark .tox .tox-collection__item {
  color: var(--outreach-text, #e5e7eb) !important;
}

.dark .tox .tox-collection__item--active,
:root.dark .tox .tox-collection__item--active {
  background: var(--outreach-bg-hover, #374151) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   TOKEN PLACEHOLDER STYLING
   ════════════════════════════════════════════════════════════════════════════ */

.token-placeholder {
  display: inline-block;
  padding: 2px 6px;
  margin: 0 2px;
  background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
  border: 1px solid #93c5fd;
  border-radius: 4px;
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 0.85em;
  color: #1e40af;
  cursor: default;
  user-select: all;
}

.dark .token-placeholder,
:root.dark .token-placeholder {
  background: linear-gradient(135deg, #1e3a5f 0%, #312e81 100%);
  border-color: #3b82f6;
  color: #93c5fd;
}

/* ════════════════════════════════════════════════════════════════════════════
   LOADING STATE
   ════════════════════════════════════════════════════════════════════════════ */

.tinymce-email-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background: var(--outreach-bg-input, #f9fafb);
  border: 1px solid var(--outreach-border, #d1d5db);
  border-radius: 8px;
  color: var(--outreach-text-muted, #6b7280);
}

.dark .tinymce-email-loading,
:root.dark .tinymce-email-loading {
  background: var(--outreach-bg-input, #111827);
  border-color: var(--outreach-border, #374151);
  color: var(--outreach-text-muted, #9ca3af);
}

.tinymce-email-loading__spinner {
  width: 24px;
  height: 24px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: tinymce-spin 0.75s linear infinite;
  margin-right: 8px;
}

@keyframes tinymce-spin {
  to { transform: rotate(360deg); }
}

/* ════════════════════════════════════════════════════════════════════════════
   EDIT/PREVIEW TOGGLE
   ════════════════════════════════════════════════════════════════════════════ */

.tinymce-email-toggle {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.tinymce-email-toggle__btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--outreach-border, #d1d5db);
  border-radius: 6px;
  background: transparent;
  color: var(--outreach-text-muted, #6b7280);
  cursor: pointer;
  transition: all 0.15s ease;
}

.tinymce-email-toggle__btn:hover {
  background: var(--outreach-bg-hover, #f3f4f6);
}

.tinymce-email-toggle__btn--active {
  background: var(--outreach-accent, #3b82f6);
  border-color: var(--outreach-accent, #3b82f6);
  color: #ffffff;
}

.dark .tinymce-email-toggle__btn,
:root.dark .tinymce-email-toggle__btn {
  border-color: var(--outreach-border, #374151);
  color: var(--outreach-text-muted, #9ca3af);
}

.dark .tinymce-email-toggle__btn:hover,
:root.dark .tinymce-email-toggle__btn:hover {
  background: var(--outreach-bg-hover, #374151);
}

/* Preview iframe container */
.tinymce-email-preview {
  min-height: 200px;
  max-height: 600px;
  overflow-y: auto;
  padding: 16px;
  background: var(--outreach-bg-input, #ffffff);
  border: 1px solid var(--outreach-border, #d1d5db);
  border-radius: 8px;
}

.dark .tinymce-email-preview,
:root.dark .tinymce-email-preview {
  background: var(--outreach-bg-input, #111827);
  border-color: var(--outreach-border, #374151);
}