/* ==========================================================================
   Haporium WYSIWYG Editor - Professional Styling
   Dark mode is DEFAULT. Light mode uses body.light-theme
   ========================================================================== */

/* --- Editor Container --- */
.editorQuill.editor-modern {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(220, 20, 60, 0.2);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  background: #1e1e2e;
}
.editorQuill.editor-modern:focus-within {
  border-color: rgba(220, 20, 60, 0.4);
  box-shadow: 0 0 0 3px rgba(220, 20, 60, 0.08);
}

/* --- Toolbar --- */
.editorQuill .ql-toolbar.ql-snow {
  border: none !important;
  border-bottom: 1px solid rgba(220, 20, 60, 0.15) !important;
  background: #252536;
  padding: 8px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.editorQuill .ql-toolbar .ql-formats {
  margin-right: 8px;
  padding-right: 8px;
  border-right: 1px solid rgba(255,255,255,0.08);
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.editorQuill .ql-toolbar .ql-formats:last-child {
  border-right: none;
  margin-right: 0;
  padding-right: 0;
}

/* Toolbar Buttons */
.editorQuill .ql-toolbar button {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  transition: background 0.15s, transform 0.1s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.editorQuill .ql-toolbar button:hover {
  background: rgba(220, 20, 60, 0.12);
  transform: scale(1.05);
}
.editorQuill .ql-toolbar button.ql-active,
.editorQuill .ql-toolbar .ql-picker-label.ql-active {
  background: rgba(220, 20, 60, 0.15);
  border-radius: 6px;
}

/* Toolbar icons - dark theme default */
.editorQuill .ql-snow.ql-toolbar button svg,
.editorQuill .ql-snow .ql-stroke {
  stroke: #aaa !important;
  transition: stroke 0.15s;
}
.editorQuill .ql-snow .ql-fill {
  fill: #aaa !important;
  transition: fill 0.15s;
}
.editorQuill .ql-snow.ql-toolbar button:hover svg .ql-stroke,
.editorQuill .ql-snow.ql-toolbar button.ql-active svg .ql-stroke,
.editorQuill .ql-snow.ql-toolbar button:hover .ql-stroke,
.editorQuill .ql-snow.ql-toolbar button.ql-active .ql-stroke {
  stroke: crimson !important;
}
.editorQuill .ql-snow.ql-toolbar button:hover svg .ql-fill,
.editorQuill .ql-snow.ql-toolbar button.ql-active svg .ql-fill,
.editorQuill .ql-snow.ql-toolbar button:hover .ql-fill,
.editorQuill .ql-snow.ql-toolbar button.ql-active .ql-fill {
  fill: crimson !important;
}

/* Picker Dropdowns */
.editorQuill .ql-toolbar .ql-picker {
  height: 32px;
}
.editorQuill .ql-toolbar .ql-picker-label {
  border-radius: 6px;
  padding: 2px 8px;
  border: 1px solid transparent !important;
  transition: background 0.15s;
  color: #ccc !important;
}
.editorQuill .ql-toolbar .ql-picker-label::before {
  color: #ccc !important;
}
.editorQuill .ql-toolbar .ql-picker-label:hover {
  background: rgba(220, 20, 60, 0.1);
  color: crimson !important;
}
.editorQuill .ql-toolbar .ql-picker-label:hover::before {
  color: crimson !important;
}
.editorQuill .ql-toolbar .ql-picker-options {
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 4px;
  background: #2a2a3e;
}
.editorQuill .ql-toolbar .ql-picker-item {
  color: #ccc !important;
}
.editorQuill .ql-toolbar .ql-picker-item:hover {
  color: crimson !important;
  background: rgba(220, 20, 60, 0.08);
  border-radius: 4px;
}

/* Font size picker labels */
.editorQuill .ql-snow .ql-picker.ql-size .ql-picker-label::before,
.editorQuill .ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: 'Normal';
}
.editorQuill .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.editorQuill .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: 'Small';
  font-size: 12px;
}
.editorQuill .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.editorQuill .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: 'Large';
  font-size: 18px;
}
.editorQuill .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.editorQuill .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: 'Huge';
  font-size: 24px;
}

/* --- Editor Content Area (dark default) --- */
.editorQuill .ql-container.ql-snow {
  border: none !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
}
.editorQuill .ql-editor {
  min-height: 30vh;
  max-height: 60vh;
  overflow-y: auto;
  padding: 20px 24px;
  line-height: 1.7;
  color: #e0e0e0;
}
.editorQuill .ql-editor.ql-blank::before {
  font-style: italic;
  color: #666;
  pointer-events: none;
}

/* --- Templates Button (Custom) --- */
.ql-templates-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  background: linear-gradient(135deg, #dc143c, #b91030);
  color: #fff !important;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  white-space: nowrap;
  height: 28px;
  line-height: 1;
}
.ql-templates-btn:hover {
  background: linear-gradient(135deg, #e8254a, #dc143c);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(220, 20, 60, 0.3);
}
.ql-templates-btn i {
  font-size: 11px;
}

/* Templates Dropdown */
.ql-templates-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 100;
  background: #2a2a3e;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  min-width: 220px;
  padding: 6px;
  margin-top: 4px;
}
.ql-templates-dropdown.show {
  display: block;
  animation: fadeInDown 0.2s ease;
}
.ql-templates-dropdown .template-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 13px;
  color: #ddd;
}
.ql-templates-dropdown .template-item:hover {
  background: rgba(220, 20, 60, 0.1);
}
.ql-templates-dropdown .template-item i {
  color: crimson;
  width: 18px;
  text-align: center;
  font-size: 14px;
}
.ql-templates-dropdown .template-item span {
  font-weight: 500;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Word Count --- */
.editor-word-count {
  padding: 6px 16px;
  text-align: right;
  font-size: 11px;
  color: #666;
  border-top: 1px solid rgba(255,255,255,0.05);
  background: #252536;
  border-radius: 0 0 12px 12px;
}
.editor-word-count span {
  margin-left: 12px;
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
  .editorQuill .ql-toolbar.ql-snow {
    padding: 6px 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .editorQuill .ql-toolbar .ql-formats {
    flex-shrink: 0;
    margin-right: 6px;
    padding-right: 6px;
  }
  .editorQuill .ql-editor {
    min-height: 25vh;
    padding: 14px 16px;
    font-size: 14px;
  }
  .editorQuill .ql-toolbar button {
    width: 28px;
    height: 28px;
  }
}


/* ===================================================================
   LIGHT THEME OVERRIDES (body.light-theme)
   =================================================================== */
body.light-theme .editorQuill.editor-modern {
  background: #fff;
  border-color: rgba(220, 20, 60, 0.15);
}
body.light-theme .editorQuill .ql-toolbar.ql-snow {
  background: #fafafa;
  border-bottom-color: rgba(220, 20, 60, 0.1) !important;
}
body.light-theme .editorQuill .ql-toolbar .ql-formats {
  border-right-color: rgba(0,0,0,0.08);
}
body.light-theme .editorQuill .ql-snow .ql-stroke {
  stroke: #444 !important;
}
body.light-theme .editorQuill .ql-snow .ql-fill {
  fill: #444 !important;
}
body.light-theme .editorQuill .ql-toolbar .ql-picker-label,
body.light-theme .editorQuill .ql-toolbar .ql-picker-label::before {
  color: #444 !important;
}
body.light-theme .editorQuill .ql-toolbar .ql-picker-options {
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border-color: rgba(0,0,0,0.08);
}
body.light-theme .editorQuill .ql-toolbar .ql-picker-item {
  color: #333 !important;
}
body.light-theme .editorQuill .ql-editor {
  color: #1a1a1a;
}
body.light-theme .editorQuill .ql-editor.ql-blank::before {
  color: #aaa;
}
body.light-theme .ql-templates-dropdown {
  background: #fff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}
body.light-theme .ql-templates-dropdown .template-item {
  color: #333;
}
body.light-theme .ql-templates-dropdown .template-item:hover {
  background: rgba(220, 20, 60, 0.06);
}
body.light-theme .editor-word-count {
  color: #999;
  border-top-color: rgba(0,0,0,0.05);
  background: #fafafa;
}


/* ==========================================================================
   Text Rendering on Board - Beautiful Typography
   ========================================================================== */

.Item_Text .ql-rendered-content,
.Item_Text #Item_Text_text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.75;
  color: inherit;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Headings */
.Item_Text #Item_Text_text h1,
.Item_Text #Item_Text_text h2,
.Item_Text #Item_Text_text h3,
.Item_Text #Item_Text_text h4 {
  font-weight: 700;
  line-height: 1.3;
  margin-top: 0.8em;
  margin-bottom: 0.4em;
  color: inherit;
  letter-spacing: -0.01em;
}
.Item_Text #Item_Text_text h1 {
  font-size: 2em;
  padding-bottom: 0.3em;
  border-bottom: 2px solid rgba(220, 20, 60, 0.15);
}
.Item_Text #Item_Text_text h2 {
  font-size: 1.6em;
  padding-bottom: 0.2em;
  border-bottom: 1px solid rgba(220, 20, 60, 0.1);
}
.Item_Text #Item_Text_text h3 {
  font-size: 1.3em;
  color: rgba(220, 20, 60, 0.85);
}
.Item_Text #Item_Text_text h4 {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.95em;
}
.Item_Text #Item_Text_text h1:first-child,
.Item_Text #Item_Text_text h2:first-child,
.Item_Text #Item_Text_text h3:first-child,
.Item_Text #Item_Text_text h4:first-child {
  margin-top: 0;
}

/* Paragraphs */
.Item_Text #Item_Text_text p {
  margin-bottom: 0.75em;
  line-height: 1.75;
}
.Item_Text #Item_Text_text p:last-child {
  margin-bottom: 0;
}

/* Links */
.Item_Text #Item_Text_text a {
  color: #ff4466;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 68, 102, 0.3);
  transition: border-color 0.2s, color 0.2s;
  font-weight: 500;
}
.Item_Text #Item_Text_text a:hover {
  color: #ff6080;
  border-bottom-color: #ff4466;
}
body.light-theme .Item_Text #Item_Text_text a {
  color: #dc143c;
  border-bottom-color: rgba(220, 20, 60, 0.3);
}
body.light-theme .Item_Text #Item_Text_text a:hover {
  color: #b91030;
  border-bottom-color: #dc143c;
}

/* Blockquote */
.Item_Text #Item_Text_text blockquote {
  border-left: 4px solid #dc143c;
  margin: 1em 0;
  padding: 12px 20px;
  background: rgba(220, 20, 60, 0.06);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: inherit;
  opacity: 0.9;
  font-size: 1.05em;
  line-height: 1.6;
}
body.light-theme .Item_Text #Item_Text_text blockquote {
  background: rgba(220, 20, 60, 0.04);
}

/* Code - Inline */
.Item_Text #Item_Text_text code {
  background: rgba(220, 20, 60, 0.12);
  color: #ff6b8a;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.88em;
  font-weight: 500;
}
body.light-theme .Item_Text #Item_Text_text code {
  background: rgba(220, 20, 60, 0.08);
  color: #dc143c;
}

/* Code Block */
.Item_Text #Item_Text_text pre,
.Item_Text #Item_Text_text .ql-code-block-container,
.Item_Text #Item_Text_text pre.ql-syntax {
  background: #1a1a2e !important;
  color: #cdd6f4 !important;
  padding: 16px 20px;
  border-radius: 10px;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.88em;
  line-height: 1.6;
  overflow-x: auto;
  margin: 1em 0;
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.Item_Text #Item_Text_text .ql-code-block {
  background: transparent !important;
  color: inherit !important;
  padding: 0;
  border-radius: 0;
}

/* Lists */
.Item_Text #Item_Text_text ul,
.Item_Text #Item_Text_text ol {
  padding-left: 1.5em;
  margin: 0.75em 0;
}
.Item_Text #Item_Text_text li {
  margin-bottom: 0.35em;
  line-height: 1.65;
  padding-left: 0.25em;
}
.Item_Text #Item_Text_text ul > li::marker {
  color: #dc143c;
}
.Item_Text #Item_Text_text ol > li::marker {
  color: #dc143c;
  font-weight: 600;
}

/* Checklist (Quill) */
.Item_Text #Item_Text_text ul[data-checked="true"] > li::before {
  color: #dc143c;
}
.Item_Text #Item_Text_text ul[data-checked="false"] > li::before {
  color: #666;
}

/* Horizontal Rule */
.Item_Text #Item_Text_text hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(220, 20, 60, 0.3), transparent);
  margin: 1.5em 0;
}

/* Images */
.Item_Text #Item_Text_text img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 0.5em 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Text Alignment (Quill classes) */
.Item_Text #Item_Text_text .ql-align-center { text-align: center; }
.Item_Text #Item_Text_text .ql-align-right { text-align: right; }
.Item_Text #Item_Text_text .ql-align-justify { text-align: justify; }

/* Font Sizes (Quill classes) */
.Item_Text #Item_Text_text .ql-size-small { font-size: 0.8em; }
.Item_Text #Item_Text_text .ql-size-large { font-size: 1.3em; }
.Item_Text #Item_Text_text .ql-size-huge { font-size: 1.8em; }

/* Indent levels */
.Item_Text #Item_Text_text .ql-indent-1 { padding-left: 2em; }
.Item_Text #Item_Text_text .ql-indent-2 { padding-left: 4em; }
.Item_Text #Item_Text_text .ql-indent-3 { padding-left: 6em; }
.Item_Text #Item_Text_text .ql-indent-4 { padding-left: 8em; }

/* Strikethrough */
.Item_Text #Item_Text_text s {
  text-decoration: line-through;
  opacity: 0.6;
}

/* Strong / Bold */
.Item_Text #Item_Text_text strong {
  font-weight: 700;
}

/* Save success animation */
@keyframes saveSuccess {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); box-shadow: 0 0 20px rgba(220, 20, 60, 0.2); }
  100% { transform: scale(1); box-shadow: none; }
}
.save-success-flash {
  animation: saveSuccess 0.4s ease;
}

/* Also style the Quill editor content itself to match rendered output */
.editorQuill .ql-editor h1 {
  font-size: 2em;
  font-weight: 700;
  padding-bottom: 0.3em;
  border-bottom: 2px solid rgba(220, 20, 60, 0.15);
}
.editorQuill .ql-editor h2 {
  font-size: 1.6em;
  font-weight: 700;
  padding-bottom: 0.2em;
  border-bottom: 1px solid rgba(220, 20, 60, 0.1);
}
.editorQuill .ql-editor h3 {
  font-size: 1.3em;
  font-weight: 700;
  color: rgba(220, 20, 60, 0.85);
}
.editorQuill .ql-editor h4 {
  font-size: 0.95em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.editorQuill .ql-editor blockquote {
  border-left: 4px solid #dc143c;
  padding: 12px 20px;
  background: rgba(220, 20, 60, 0.06);
  border-radius: 0 8px 8px 0;
  font-style: italic;
}
.editorQuill .ql-editor pre.ql-syntax {
  background: #1a1a2e !important;
  color: #cdd6f4 !important;
  padding: 16px 20px;
  border-radius: 10px;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.88em;
}
.editorQuill .ql-editor a {
  color: #ff4466;
}
body.light-theme .editorQuill .ql-editor a {
  color: #dc143c;
}
.editorQuill .ql-editor ul > li::marker,
.editorQuill .ql-editor ol > li::marker {
  color: #dc143c;
}

/* Color picker improvements */
.editorQuill .ql-snow .ql-color-picker .ql-picker-options {
  width: 200px;
  padding: 8px;
}
.editorQuill .ql-snow .ql-color-picker .ql-picker-item {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  margin: 2px;
  border: 1px solid rgba(255,255,255,0.1);
}
body.light-theme .editorQuill .ql-snow .ql-color-picker .ql-picker-item {
  border-color: rgba(0,0,0,0.08);
}
.editorQuill .ql-snow .ql-color-picker .ql-picker-item:hover {
  transform: scale(1.2);
  border-color: crimson;
}

/* Tooltip styling */
.editorQuill .ql-snow .ql-tooltip {
  background: #2a2a3e;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  color: #e0e0e0;
  padding: 8px 12px;
}
.editorQuill .ql-snow .ql-tooltip input[type="text"] {
  background: #1e1e2e;
  border: 1px solid rgba(220, 20, 60, 0.2);
  border-radius: 6px;
  color: #e0e0e0;
  padding: 4px 8px;
}
.editorQuill .ql-snow .ql-tooltip a {
  color: #ff4466;
}
body.light-theme .editorQuill .ql-snow .ql-tooltip {
  background: #fff;
  border-color: rgba(0,0,0,0.1);
  color: #333;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
body.light-theme .editorQuill .ql-snow .ql-tooltip input[type="text"] {
  background: #f5f5f5;
  border-color: rgba(220, 20, 60, 0.15);
  color: #333;
}
body.light-theme .editorQuill .ql-snow .ql-tooltip a {
  color: #dc143c;
}