/* ==========================================================================
   TipTap Editor - PDF-inspired Styling
   Flowayz Spec Editor with premium document feel
   ========================================================================== */

/* Container */
.tiptap-editor-container {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  /* overflow: visible to allow dropdown menus to extend outside */
}

/* Editor wrapper: auto overflow for scrollable content, clipped to border radius */
.tiptap-editor-container > .tiptap-editor-wrapper {
  border-radius: 0 0 12px 12px;
  overflow: auto;
}

/* Toolbar */
.tiptap-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 12px 16px;
  background: var(--bg-surface-hover);
  border-bottom: 1px solid var(--border-default);
}

.tiptap-toolbar-group {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 8px;
  border-right: 1px solid var(--border-default);
}

.tiptap-toolbar-group:last-child {
  border-right: none;
}

.tiptap-toolbar button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.tiptap-toolbar button:hover {
  background: var(--bg-accent-10, rgba(56, 178, 172, 0.1));
  color: var(--text-primary);
}

.tiptap-toolbar button.is-active {
  background: var(--accent, #38B2AC);
  color: var(--accent-contrast, #fff);
}

.tiptap-toolbar button svg {
  width: 18px;
  height: 18px;
}

.tiptap-toolbar .heading-btn {
  font-weight: 700;
  font-size: 14px;
  width: auto;
  padding: 6px 10px;
}

/* Editor Content Area */
.spec-editor-content {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-primary);
  padding: 2rem 2.5rem;
  min-height: 500px;
  max-width: 850px;
  margin: 0 auto;
  background: var(--bg-surface);
}

.spec-editor-content:focus {
  outline: none;
}

/* Dark mode: Override prose styles for better visibility */
html.dark .spec-editor-content,
html[data-theme="dark"] .spec-editor-content,
[data-mode="dark"] .spec-editor-content {
  color: #E2E8F0 !important;
}

html.dark .spec-editor-content p,
html[data-theme="dark"] .spec-editor-content p,
[data-mode="dark"] .spec-editor-content p {
  color: #E2E8F0 !important;
}

/* Focus state for editor container */
.tiptap-editor-wrapper.is-focused {
  box-shadow: 0 0 0 3px rgba(56, 178, 172, 0.15);
}

/* ==========================================================================
   Typography - PDF-inspired headings
   ========================================================================== */

.spec-editor-content h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--flowayz-navy, #1A3C6B);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 3px solid var(--flowayz-coral, #FF7B54);
  line-height: 1.3;
}

.spec-editor-content h1:first-child {
  margin-top: 0;
}

.spec-editor-content h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--flowayz-navy, #1A3C6B);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--flowayz-teal, #38B2AC);
  line-height: 1.4;
}

.spec-editor-content h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--flowayz-teal, #38B2AC);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

/* Dark mode heading colors */
html.dark .spec-editor-content h1,
html[data-theme="dark"] .spec-editor-content h1 {
  color: #93C5FD; /* Lighter blue for dark mode */
  border-bottom-color: var(--flowayz-coral, #FF7B54);
}

html.dark .spec-editor-content h2,
html[data-theme="dark"] .spec-editor-content h2 {
  color: #93C5FD;
  border-bottom-color: var(--flowayz-teal, #38B2AC);
}

html.dark .spec-editor-content h3,
html[data-theme="dark"] .spec-editor-content h3 {
  color: #5EEAD4; /* Teal-300 */
}

/* ==========================================================================
   Paragraphs & Text
   ========================================================================== */

.spec-editor-content p {
  margin-bottom: 1rem;
  color: var(--text-primary);
}

.spec-editor-content strong {
  font-weight: 700;
  color: var(--text-primary);
}

/* Dark mode: Make bold text more visible */
html.dark .spec-editor-content strong,
html[data-theme="dark"] .spec-editor-content strong,
[data-mode="dark"] .spec-editor-content strong {
  color: #F8FAFC; /* Bright white for better contrast */
  font-weight: 700;
}

.spec-editor-content em {
  font-style: italic;
  color: var(--text-primary);
}

/* Dark mode: Make italic text visible */
html.dark .spec-editor-content em,
html[data-theme="dark"] .spec-editor-content em,
[data-mode="dark"] .spec-editor-content em {
  color: #E2E8F0; /* Slightly muted but visible */
}

.spec-editor-content u {
  text-decoration: underline;
  text-decoration-color: var(--flowayz-teal, #38B2AC);
  text-underline-offset: 2px;
}

/* ==========================================================================
   Lists
   ========================================================================== */

.spec-editor-content ul,
.spec-editor-content ol {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.spec-editor-content ul {
  list-style-type: disc;
}

.spec-editor-content ol {
  list-style-type: decimal;
}

.spec-editor-content li {
  margin-bottom: 0.5rem;
  padding-left: 0.25rem;
}

.spec-editor-content li > p {
  margin-bottom: 0.25rem;
}

.spec-editor-content ul ul,
.spec-editor-content ol ol,
.spec-editor-content ul ol,
.spec-editor-content ol ul {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Custom bullet styling */
.spec-editor-content ul li::marker {
  color: var(--flowayz-teal, #38B2AC);
}

.spec-editor-content ol li::marker {
  color: var(--flowayz-navy, #1A3C6B);
  font-weight: 600;
}

html.dark .spec-editor-content ol li::marker,
html[data-theme="dark"] .spec-editor-content ol li::marker {
  color: #93C5FD;
}

/* ==========================================================================
   Blockquotes - Highlight style
   ========================================================================== */

.spec-editor-content blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--flowayz-cream, #FFF5E4);
  border-left: 4px solid var(--flowayz-gold, #FFD166);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--text-secondary);
}

.spec-editor-content blockquote p {
  margin-bottom: 0;
}

html.dark .spec-editor-content blockquote,
html[data-theme="dark"] .spec-editor-content blockquote {
  background: rgba(var(--flowayz-gold-rgb, 255, 209, 102), 0.1);
  border-left-color: var(--flowayz-gold, #FFD166);
}

/* ==========================================================================
   Code blocks
   ========================================================================== */

.spec-editor-content code {
  font-family: 'Fira Code', 'JetBrains Mono', 'Courier New', monospace;
  font-size: 14px;
  background: #EDF2F7;
  padding: 2px 6px;
  border-radius: 4px;
  color: #E53E3E;
}

html.dark .spec-editor-content code,
html[data-theme="dark"] .spec-editor-content code {
  background: rgba(255, 255, 255, 0.1);
  color: #FC8181;
}

.spec-editor-content pre {
  margin: 1.5rem 0;
  padding: 1.25rem;
  background: #1A202C;
  border-radius: 8px;
  overflow-x: auto;
}

.spec-editor-content pre code {
  background: transparent;
  padding: 0;
  color: #E2E8F0;
  font-size: 14px;
  line-height: 1.6;
}

/* ==========================================================================
   Horizontal Rule
   ========================================================================== */

.spec-editor-content hr {
  margin: 2rem 0;
  border: none;
  height: 2px;
  background: linear-gradient(to right, var(--flowayz-teal, #38B2AC), var(--flowayz-coral, #FF7B54), var(--flowayz-gold, #FFD166));
  border-radius: 1px;
}

/* ==========================================================================
   Links
   ========================================================================== */

.spec-editor-content a {
  color: var(--flowayz-teal, #38B2AC);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.spec-editor-content a:hover {
  border-bottom-color: var(--flowayz-teal, #38B2AC);
}

/* ==========================================================================
   Tables
   ========================================================================== */

.spec-editor-content table {
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.spec-editor-content th {
  background: var(--flowayz-navy, #1A3C6B);
  color: white;
  font-weight: 600;
  padding: 12px 16px;
  text-align: left;
  font-size: 15px;
}

.spec-editor-content td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-default);
  font-size: 15px;
}

.spec-editor-content tr:last-child td {
  border-bottom: none;
}

.spec-editor-content tr:nth-child(even) td {
  background: var(--bg-surface-hover);
}

html.dark .spec-editor-content th,
html[data-theme="dark"] .spec-editor-content th {
  background: #334155;
}

/* ==========================================================================
   Placeholder
   ========================================================================== */

.spec-editor-content p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: var(--text-tertiary);
  pointer-events: none;
  height: 0;
  font-style: italic;
}

/* ==========================================================================
   Section highlights (optional - for key sections)
   ========================================================================== */

.spec-editor-content .highlight-section {
  background: var(--flowayz-cream, #FFF5E4);
  padding: 1.5rem;
  border-radius: 8px;
  border-left: 4px solid var(--flowayz-gold, #FFD166);
  margin: 1.5rem 0;
}

html.dark .spec-editor-content .highlight-section,
html[data-theme="dark"] .spec-editor-content .highlight-section {
  background: rgba(var(--flowayz-gold-rgb, 255, 209, 102), 0.08);
}

/* ==========================================================================
   Save Status
   ========================================================================== */

.tiptap-save-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-secondary);
}

/* ==========================================================================
   Read-only mode styling
   ========================================================================== */

.spec-editor-content[contenteditable="false"] {
  cursor: default;
}

.spec-editor-content[contenteditable="false"]:focus {
  outline: none;
  box-shadow: none;
}

/* ==========================================================================
   Print styles (for consistency with PDF)
   ========================================================================== */

@media print {
  .tiptap-toolbar {
    display: none;
  }

  .spec-editor-content {
    padding: 0;
    max-width: none;
  }

  .spec-editor-content h1 {
    page-break-after: avoid;
  }

  .spec-editor-content h2,
  .spec-editor-content h3 {
    page-break-after: avoid;
  }

  .spec-editor-content pre,
  .spec-editor-content blockquote {
    page-break-inside: avoid;
  }
}

/* ==========================================================================
   Responsive adjustments
   ========================================================================== */

@media (max-width: 768px) {
  .spec-editor-content {
    padding: 1.5rem;
    font-size: 15px;
  }

  .spec-editor-content h1 {
    font-size: 26px;
  }

  .spec-editor-content h2 {
    font-size: 22px;
  }

  .spec-editor-content h3 {
    font-size: 16px;
  }

  .tiptap-toolbar {
    padding: 8px 12px;
    gap: 1px;
  }

  .tiptap-toolbar button {
    width: 28px;
    height: 28px;
  }

  .tiptap-toolbar-group {
    padding: 0 4px;
  }
}