/* MvMusics Mail - Custom Editor Styling
 * Patches Modoboa 2.8.2 webmail TipTap editor visibility issues
 */

/* Editor container - must have visible height */
.tiptap.ProseMirror,
.tiptap[contenteditable="true"],
.ProseMirror {
  min-height: 320px !important;
  padding: 16px 20px !important;
  outline: none !important;
  border: none !important;
  background: #ffffff !important;
  color: #202124 !important;
  font-family: 'Segoe UI', Roboto, Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  caret-color: #1a73e8 !important;
  cursor: text !important;
  border-radius: 0 0 8px 8px !important;
}

/* Wrapper around editor (the dialog/box visible to user) */
.v-card .tiptap,
.tiptap-wrapper,
[class*="HtmlEditor"] .tiptap {
  border: 1px solid #dadce0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  transition: border-color 0.15s ease !important;
}

.v-card .tiptap:focus-within,
[class*="HtmlEditor"] .tiptap:focus-within,
.ProseMirror:focus {
  border-color: #1a73e8 !important;
  box-shadow: 0 0 0 1px #1a73e8 inset !important;
}

/* Placeholder - show hint when empty */
.ProseMirror p.is-editor-empty:first-child::before,
.tiptap p.is-editor-empty:first-child::before {
  color: #9aa0a6;
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
  font-style: italic;
}

/* Headings */
.tiptap h1, .ProseMirror h1 {
  font-size: 1.875rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 1.5rem 0 0.75rem !important;
  color: #202124 !important;
}
.tiptap h2, .ProseMirror h2 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 1.25rem 0 0.5rem !important;
  color: #202124 !important;
}
.tiptap h3, .ProseMirror h3 {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin: 1rem 0 0.5rem !important;
  color: #202124 !important;
}
.tiptap h4, .ProseMirror h4 {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  margin: 0.875rem 0 0.5rem !important;
}
.tiptap h5, .ProseMirror h5 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin: 0.75rem 0 0.5rem !important;
}
.tiptap h6, .ProseMirror h6 {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  margin: 0.75rem 0 0.5rem !important;
  color: #5f6368 !important;
}

/* Paragraphs */
.tiptap p, .ProseMirror p {
  margin: 0.5em 0 !important;
  min-height: 1.6em;
}

/* Blockquote (Gmail-style quote) */
.tiptap blockquote, .ProseMirror blockquote {
  border-left: 3px solid #cccccc !important;
  padding-left: 1em !important;
  margin: 1em 0 1em 0.5em !important;
  color: #5f6368 !important;
  font-style: normal !important;
}
.tiptap blockquote p, .ProseMirror blockquote p {
  margin: 0.4em 0 !important;
}

/* Lists */
.tiptap ul, .tiptap ol, .ProseMirror ul, .ProseMirror ol {
  padding-left: 1.75rem !important;
  margin: 0.75rem 0 !important;
}
.tiptap li, .ProseMirror li {
  margin: 0.2em 0 !important;
}

/* Code inline + block */
.tiptap code, .ProseMirror code {
  background: #f1f3f4 !important;
  border-radius: 3px !important;
  padding: 2px 5px !important;
  font-family: 'SF Mono', Consolas, Monaco, 'Courier New', monospace !important;
  font-size: 0.9em !important;
}
.tiptap pre, .ProseMirror pre {
  background: #2d2d2d !important;
  color: #f8f8f2 !important;
  padding: 12px 16px !important;
  border-radius: 6px !important;
  margin: 1em 0 !important;
  overflow-x: auto !important;
  font-family: 'SF Mono', Consolas, Monaco, 'Courier New', monospace !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
.tiptap pre code, .ProseMirror pre code {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
}

/* Horizontal rule */
.tiptap hr, .ProseMirror hr {
  border: none !important;
  border-top: 1px solid #dadce0 !important;
  margin: 1.5em 0 !important;
}

/* Links */
.tiptap a, .ProseMirror a {
  color: #1a73e8 !important;
  text-decoration: underline !important;
}

/* Selection */
.tiptap ::selection, .ProseMirror ::selection {
  background: #b3d4fc !important;
}

/* Strong/Bold should be visible */
.tiptap strong, .tiptap b, .ProseMirror strong, .ProseMirror b {
  font-weight: 700 !important;
}

/* Emphasis/Italic */
.tiptap em, .tiptap i, .ProseMirror em, .ProseMirror i {
  font-style: italic !important;
}

/* Underline */
.tiptap u, .ProseMirror u {
  text-decoration: underline !important;
}

/* Strikethrough */
.tiptap s, .tiptap strike, .ProseMirror s, .ProseMirror strike {
  text-decoration: line-through !important;
}

/* Compose form area – make textarea (plain mode) also look good */
.v-textarea textarea {
  font-family: 'Segoe UI', Roboto, Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  caret-color: #1a73e8 !important;
  padding: 16px 20px !important;
  min-height: 320px !important;
}

/* Remove ugly Vuetify wrapper outline conflicting with our editor border */
[class*="HtmlEditor"] .v-field__outline {
  display: none !important;
}