body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

/* Quill Editor Theme Overrides */
/* Apply to all Quill editors (both single ID and dynamic field IDs) */
[id^="quill-editor-container"], #quill-editor-container {
  /* Light Mode */
}

[id^="quill-editor-container"] .ql-container,
#quill-editor-container .ql-container {
  background-color: rgb(255 255 255); /* white */
  color: rgb(15 23 42); /* slate-900 */
  border-color: rgb(226 232 240); /* slate-200 */
}

[id^="quill-editor-container"] .ql-toolbar,
#quill-editor-container .ql-toolbar {
  background-color: rgb(248 250 252); /* slate-50 */
  border-color: rgb(226 232 240); /* slate-200 */
}

[id^="quill-editor-container"] .ql-toolbar .ql-stroke,
#quill-editor-container .ql-toolbar .ql-stroke {
  stroke: rgb(51 65 85); /* slate-700 */
}

[id^="quill-editor-container"] .ql-toolbar .ql-fill,
#quill-editor-container .ql-toolbar .ql-fill {
  fill: rgb(51 65 85); /* slate-700 */
}

[id^="quill-editor-container"] .ql-toolbar button:hover,
[id^="quill-editor-container"] .ql-toolbar button:focus,
[id^="quill-editor-container"] .ql-toolbar button.ql-active,
#quill-editor-container .ql-toolbar button:hover,
#quill-editor-container .ql-toolbar button:focus,
#quill-editor-container .ql-toolbar button.ql-active {
  color: rgb(37 99 235); /* blue-600 */
}

[id^="quill-editor-container"] .ql-toolbar button:hover .ql-stroke,
[id^="quill-editor-container"] .ql-toolbar button:focus .ql-stroke,
[id^="quill-editor-container"] .ql-toolbar button.ql-active .ql-stroke,
#quill-editor-container .ql-toolbar button:hover .ql-stroke,
#quill-editor-container .ql-toolbar button:focus .ql-stroke,
#quill-editor-container .ql-toolbar button.ql-active .ql-stroke {
  stroke: rgb(37 99 235); /* blue-600 */
}

[id^="quill-editor-container"] .ql-toolbar button:hover .ql-fill,
[id^="quill-editor-container"] .ql-toolbar button:focus .ql-fill,
[id^="quill-editor-container"] .ql-toolbar button.ql-active .ql-fill,
#quill-editor-container .ql-toolbar button:hover .ql-fill,
#quill-editor-container .ql-toolbar button:focus .ql-fill,
#quill-editor-container .ql-toolbar button.ql-active .ql-fill {
  fill: rgb(37 99 235); /* blue-600 */
}

[id^="quill-editor-container"] .ql-editor,
#quill-editor-container .ql-editor {
  color: rgb(15 23 42); /* slate-900 */
}

[id^="quill-editor-container"] .ql-editor.ql-blank::before,
#quill-editor-container .ql-editor.ql-blank::before {
  color: rgb(148 163 184); /* slate-400 */
  font-style: normal;
}

/* Dark Mode */
.dark [id^="quill-editor-container"] .ql-container,
.dark #quill-editor-container .ql-container {
  background-color: rgb(15 23 42); /* slate-900 */
  color: rgb(241 245 249); /* slate-100 */
  border-color: rgb(51 65 85); /* slate-700 */
}

.dark [id^="quill-editor-container"] .ql-toolbar,
.dark #quill-editor-container .ql-toolbar {
  background-color: rgb(30 41 59); /* slate-800 */
  border-color: rgb(51 65 85); /* slate-700 */
}

.dark [id^="quill-editor-container"] .ql-toolbar .ql-stroke,
.dark #quill-editor-container .ql-toolbar .ql-stroke {
  stroke: rgb(203 213 225); /* slate-300 */
}

.dark [id^="quill-editor-container"] .ql-toolbar .ql-fill,
.dark #quill-editor-container .ql-toolbar .ql-fill {
  fill: rgb(203 213 225); /* slate-300 */
}

.dark [id^="quill-editor-container"] .ql-toolbar button:hover,
.dark [id^="quill-editor-container"] .ql-toolbar button:focus,
.dark [id^="quill-editor-container"] .ql-toolbar button.ql-active,
.dark #quill-editor-container .ql-toolbar button:hover,
.dark #quill-editor-container .ql-toolbar button:focus,
.dark #quill-editor-container .ql-toolbar button.ql-active {
  color: rgb(59 130 246); /* blue-500 */
}

.dark [id^="quill-editor-container"] .ql-toolbar button:hover .ql-stroke,
.dark [id^="quill-editor-container"] .ql-toolbar button:focus .ql-stroke,
.dark [id^="quill-editor-container"] .ql-toolbar button.ql-active .ql-stroke,
.dark #quill-editor-container .ql-toolbar button:hover .ql-stroke,
.dark #quill-editor-container .ql-toolbar button:focus .ql-stroke,
.dark #quill-editor-container .ql-toolbar button.ql-active .ql-stroke {
  stroke: rgb(59 130 246); /* blue-500 */
}

.dark [id^="quill-editor-container"] .ql-toolbar button:hover .ql-fill,
.dark [id^="quill-editor-container"] .ql-toolbar button:focus .ql-fill,
.dark [id^="quill-editor-container"] .ql-toolbar button.ql-active .ql-fill,
.dark #quill-editor-container .ql-toolbar button:hover .ql-fill,
.dark #quill-editor-container .ql-toolbar button:focus .ql-fill,
.dark #quill-editor-container .ql-toolbar button.ql-active .ql-fill {
  fill: rgb(59 130 246); /* blue-500 */
}

.dark [id^="quill-editor-container"] .ql-editor,
.dark #quill-editor-container .ql-editor {
  color: rgb(241 245 249); /* slate-100 */
}

.dark [id^="quill-editor-container"] .ql-editor.ql-blank::before,
.dark #quill-editor-container .ql-editor.ql-blank::before {
  color: rgb(148 163 184); /* slate-400 */
  font-style: normal;
}

/* HTML Content Rendering Styles */
.prose .ql-editor,
.prose [class*="ql-"] {
  white-space: pre-wrap;
  word-wrap: break-word;
}

.prose p {
  margin-top: 1em;
  margin-bottom: 1em;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  font-weight: 600;
}

.prose ul, .prose ol {
  margin-top: 1em;
  margin-bottom: 1em;
  padding-left: 1.5em;
}

.prose li {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

.prose blockquote {
  margin-top: 1em;
  margin-bottom: 1em;
  padding-left: 1em;
  border-left: 4px solid rgb(226 232 240); /* slate-200 */
}

.dark .prose blockquote {
  border-left-color: rgb(51 65 85); /* slate-700 */
}

.prose code {
  background-color: rgb(241 245 249); /* slate-100 */
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
}

.dark .prose code {
  background-color: rgb(30 41 59); /* slate-800 */
}

.prose pre {
  margin-top: 1em;
  margin-bottom: 1em;
  padding: 1em;
  overflow-x: auto;
  background-color: rgb(241 245 249); /* slate-100 */
  border: 1px solid rgb(226 232 240); /* slate-200 */
}

.dark .prose pre {
  background-color: rgb(15 23 42); /* slate-900 */
  border-color: rgb(51 65 85); /* slate-700 */
}

.prose a {
  color: rgb(37 99 235); /* blue-600 */
  text-decoration: underline;
}

.dark .prose a {
  color: rgb(96 165 250); /* blue-400 */
}

.prose a:hover {
  color: rgb(29 78 216); /* blue-700 */
}

.dark .prose a:hover {
  color: rgb(147 197 253); /* blue-300 */
}

/* Ensure HTML content from Quill displays properly */
.content-html {
  line-height: 1.75;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Preserve spacing in textareas for markdown */
textarea[data-field-value] {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

.content-html > *:first-child {
  margin-top: 0;
}

.content-html > *:last-child {
  margin-bottom: 0;
}

/* Handle Quill's HTML structure */
.content-html p {
  margin: 1em 0;
}

.content-html h1, .content-html h2, .content-html h3 {
  margin: 1.5em 0 0.5em 0;
  font-weight: 600;
}

/* Lists - ensure they display properly */
.content-html ul, .content-html ol {
  margin: 1em 0;
  padding-left: 2em;
  list-style-position: outside;
  display: block;
}

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

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

.content-html li {
  margin: 0.25em 0;
  display: list-item;
  line-height: 1.6;
  padding-left: 0.5em;
}

/* Nested lists */
.content-html ul ul, .content-html ol ol,
.content-html ul ol, .content-html ol ul {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* Ensure list items don't have paragraph tags inside (Quill sometimes does this) */
.content-html li > p {
  margin: 0;
  display: inline;
}

.content-html li > p:first-child {
  display: block;
  margin: 0;
}

.content-html br {
  line-height: 1.75;
}

/* Video Embed Styles */
.video-embed,
.content-html .video-embed,
.prose .video-embed {
  width: 100%;
  max-width: 100%;
  margin: 1.5em 0;
  border-radius: 0.5rem;
  overflow: hidden;
}

.video-embed iframe,
.content-html .video-embed iframe,
.prose .video-embed iframe {
  width: 100%;
  height: 400px;
  max-width: 100%;
  border: none;
  display: block;
}

.video-embed video,
.content-html .video-embed video,
.prose .video-embed video {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* Video Field Container - Prominent display */
.video-field-container {
  margin: 2em 0;
  width: 100%;
}

.video-field-container .video-embed-wrapper {
  margin: 0;
}

/* Video wrapper for alignment */
.video-embed-wrapper {
  margin: 1.5em 0;
  clear: both;
}

.video-embed-wrapper.video-align-center {
  text-align: center;
}

.video-embed-wrapper.video-align-left {
  text-align: left;
  float: left;
  margin-right: 1.5em;
}

.video-embed-wrapper.video-align-right {
  text-align: right;
  float: right;
  margin-left: 1.5em;
}

/* Image Embed Styles */
.image-embed,
.content-html .image-embed,
.prose .image-embed {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  display: block;
  margin: 0 auto;
}

/* Image wrapper for alignment */
.image-embed-wrapper {
  margin: 1.5em 0;
  clear: both;
}

.image-embed-wrapper.image-align-center {
  text-align: center;
}

.image-embed-wrapper.image-align-center .image-embed {
  margin: 0 auto;
}

.image-embed-wrapper.image-align-left {
  text-align: left;
  float: left;
  margin-right: 1.5em;
}

.image-embed-wrapper.image-align-left .image-embed {
  margin: 0;
}

.image-embed-wrapper.image-align-right {
  text-align: right;
  float: right;
  margin-left: 1.5em;
}

.image-embed-wrapper.image-align-right .image-embed {
  margin: 0;
}

/* Responsive: clear floats on mobile */
@media (max-width: 768px) {
  .video-embed-wrapper.video-align-left,
  .video-embed-wrapper.video-align-right,
  .image-embed-wrapper.image-align-left,
  .image-embed-wrapper.image-align-right {
    float: none;
    margin-left: 0;
    margin-right: 0;
    text-align: center;
  }
  
  .video-embed-wrapper.video-align-left .video-embed,
  .video-embed-wrapper.video-align-right .video-embed,
  .image-embed-wrapper.image-align-left .image-embed,
  .image-embed-wrapper.image-align-right .image-embed {
    margin: 0 auto;
  }
}

/* Responsive video embeds - maintain aspect ratio */
@media (max-width: 768px) {
  .video-embed iframe,
  .content-html .video-embed iframe,
  .prose .video-embed iframe {
    height: 250px;
  }
}

/* Ensure videos in Quill editor are also styled */
.ql-editor .video-embed-wrapper {
  margin: 1em 0;
}

.ql-editor .video-embed {
  margin: 0;
}

.ql-editor .video-embed iframe {
  width: 100%;
  height: 400px;
  max-width: 100%;
  border: none;
  display: block;
}

.ql-editor .video-embed video {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

.ql-editor .image-embed-wrapper {
  margin: 1em 0;
}

.ql-editor .image-embed {
  margin: 0;
  max-width: 100%;
  height: auto;
  display: block;
}

/* Video button in Quill toolbar */
.ql-toolbar .ql-video::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='23 7 16 12 23 17 23 7'%3E%3C/polygon%3E%3Crect x='1' y='5' width='15' height='14' rx='2' ry='2'%3E%3C/rect%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

.ql-toolbar button.ql-video {
  width: 28px;
}

/* Field Drag and Drop Styles */
.field-item.drag-over {
  border-top: 2px solid rgb(37 99 235); /* blue-600 */
  margin-top: 2px;
}

.field-item[draggable="true"] {
  cursor: move;
}

.field-item[draggable="true"]:hover {
  border-color: rgb(148 163 184); /* slate-400 */
}

.field-item .drag-handle {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.field-item .drag-handle:active {
  cursor: grabbing;
}

/* Field Collapse/Expand Styles */
.field-collapse-icon {
  transition: transform 0.2s ease;
  transform: rotate(0deg);
}

.field-content {
  transition: opacity 0.2s ease;
}

/* ============================================
   AI8 Digital Theme Styles
   ============================================ */

/* Quill Editor for AI8 theme */
body.ai8-theme [id^="quill-editor-container"] .ql-container,
body.ai8-theme #quill-editor-container .ql-container {
  background-color: var(--ai8-card) !important;
  color: var(--ai8-text-primary) !important;
  border-color: var(--ai8-border) !important;
}

body.ai8-theme [id^="quill-editor-container"] .ql-toolbar,
body.ai8-theme #quill-editor-container .ql-toolbar {
  background-color: var(--ai8-card) !important;
  border-color: var(--ai8-border) !important;
}

body.ai8-theme [id^="quill-editor-container"] .ql-toolbar .ql-stroke,
body.ai8-theme #quill-editor-container .ql-toolbar .ql-stroke {
  stroke: var(--ai8-text-secondary) !important;
}

body.ai8-theme [id^="quill-editor-container"] .ql-toolbar .ql-fill,
body.ai8-theme #quill-editor-container .ql-toolbar .ql-fill {
  fill: var(--ai8-text-secondary) !important;
}

body.ai8-theme [id^="quill-editor-container"] .ql-toolbar button:hover,
body.ai8-theme [id^="quill-editor-container"] .ql-toolbar button:focus,
body.ai8-theme [id^="quill-editor-container"] .ql-toolbar button.ql-active,
body.ai8-theme #quill-editor-container .ql-toolbar button:hover,
body.ai8-theme #quill-editor-container .ql-toolbar button:focus,
body.ai8-theme #quill-editor-container .ql-toolbar button.ql-active {
  color: var(--ai8-cta) !important;
}

body.ai8-theme [id^="quill-editor-container"] .ql-toolbar button:hover .ql-stroke,
body.ai8-theme [id^="quill-editor-container"] .ql-toolbar button:focus .ql-stroke,
body.ai8-theme [id^="quill-editor-container"] .ql-toolbar button.ql-active .ql-stroke,
body.ai8-theme #quill-editor-container .ql-toolbar button:hover .ql-stroke,
body.ai8-theme #quill-editor-container .ql-toolbar button:focus .ql-stroke,
body.ai8-theme #quill-editor-container .ql-toolbar button.ql-active .ql-stroke {
  stroke: var(--ai8-cta) !important;
}

body.ai8-theme [id^="quill-editor-container"] .ql-toolbar button:hover .ql-fill,
body.ai8-theme [id^="quill-editor-container"] .ql-toolbar button:focus .ql-fill,
body.ai8-theme [id^="quill-editor-container"] .ql-toolbar button.ql-active .ql-fill,
body.ai8-theme #quill-editor-container .ql-toolbar button:hover .ql-fill,
body.ai8-theme #quill-editor-container .ql-toolbar button:focus .ql-fill,
body.ai8-theme #quill-editor-container .ql-toolbar button.ql-active .ql-fill {
  fill: var(--ai8-cta) !important;
}

body.ai8-theme [id^="quill-editor-container"] .ql-editor,
body.ai8-theme #quill-editor-container .ql-editor {
  color: var(--ai8-text-primary) !important;
}

body.ai8-theme [id^="quill-editor-container"] .ql-editor.ql-blank::before,
body.ai8-theme #quill-editor-container .ql-editor.ql-blank::before {
  color: var(--ai8-text-secondary) !important;
}

/* Prose content for AI8 theme */
body.ai8-theme .prose {
  color: var(--ai8-text-primary) !important;
}

body.ai8-theme .prose h1,
body.ai8-theme .prose h2,
body.ai8-theme .prose h3,
body.ai8-theme .prose h4,
body.ai8-theme .prose h5,
body.ai8-theme .prose h6 {
  color: var(--ai8-text-primary) !important;
}

body.ai8-theme .prose p {
  color: var(--ai8-text-secondary) !important;
}

body.ai8-theme .prose a {
  color: var(--ai8-cta) !important;
}

body.ai8-theme .prose code {
  background-color: var(--ai8-hover) !important;
  color: var(--ai8-text-primary) !important;
}

body.ai8-theme .prose pre {
  background-color: var(--ai8-card) !important;
  border-color: var(--ai8-border) !important;
  color: var(--ai8-text-primary) !important;
}

body.ai8-theme .prose blockquote {
  border-left-color: var(--ai8-border) !important;
}

/* Content HTML for AI8 theme */
body.ai8-theme .content-html {
  color: var(--ai8-text-primary) !important;
}

body.ai8-theme .content-html h1,
body.ai8-theme .content-html h2,
body.ai8-theme .content-html h3 {
  color: var(--ai8-text-primary) !important;
}

body.ai8-theme .content-html p {
  color: var(--ai8-text-secondary) !important;
}

body.ai8-theme .content-html a {
  color: var(--ai8-cta) !important;
}

body.ai8-theme .content-html code {
  background-color: var(--ai8-hover) !important;
  color: var(--ai8-text-primary) !important;
}

/* Tables for AI8 theme */
body.ai8-theme table {
  background-color: var(--ai8-card) !important;
  color: var(--ai8-text-primary) !important;
}

body.ai8-theme table thead {
  background-color: var(--ai8-bg) !important;
}

body.ai8-theme table th {
  color: var(--ai8-text-primary) !important;
  border-color: var(--ai8-border) !important;
}

body.ai8-theme table td {
  color: var(--ai8-text-secondary) !important;
  border-color: var(--ai8-border) !important;
}

body.ai8-theme table tr:hover {
  background-color: var(--ai8-hover) !important;
}

/* Forms for AI8 theme */
body.ai8-theme .input,
body.ai8-theme .textarea,
body.ai8-theme .select select {
  background-color: var(--ai8-card) !important;
  border-color: var(--ai8-border) !important;
  color: var(--ai8-text-primary) !important;
}

body.ai8-theme .input:focus,
body.ai8-theme .textarea:focus,
body.ai8-theme .select select:focus {
  border-color: var(--ai8-cta) !important;
  box-shadow: 0 0 0 0.125em rgba(59, 130, 246, 0.25) !important;
}

body.ai8-theme .input::placeholder,
body.ai8-theme .textarea::placeholder {
  color: var(--ai8-text-secondary) !important;
}

/* Boxes and cards for AI8 theme */
body.ai8-theme .box {
  background-color: var(--ai8-card) !important;
  border-color: var(--ai8-border) !important;
  color: var(--ai8-text-primary) !important;
}

/* Buttons for AI8 theme */
body.ai8-theme .button.is-primary {
  background-color: var(--ai8-cta) !important;
  color: white !important;
}

body.ai8-theme .button.is-primary:hover {
  background-color: var(--ai8-cta-hover) !important;
}

body.ai8-theme .button.is-light {
  background-color: var(--ai8-card) !important;
  border-color: var(--ai8-border) !important;
  color: var(--ai8-text-secondary) !important;
}

body.ai8-theme .button.is-light:hover {
  background-color: var(--ai8-hover) !important;
  color: var(--ai8-text-primary) !important;
}

body.ai8-theme .button.is-dark {
  background-color: var(--ai8-hover) !important;
  color: var(--ai8-text-primary) !important;
}

body.ai8-theme .button.is-dark:hover {
  background-color: var(--ai8-border) !important;
}

/* Tags for AI8 theme */
body.ai8-theme .tag {
  background-color: var(--ai8-hover) !important;
  color: var(--ai8-text-primary) !important;
}

body.ai8-theme .tag.is-light {
  background-color: var(--ai8-card) !important;
  color: var(--ai8-text-secondary) !important;
}

/* Links for AI8 theme */
body.ai8-theme a {
  color: var(--ai8-cta) !important;
}

body.ai8-theme a:hover {
  color: var(--ai8-cta-hover) !important;
}

/* Bulma overrides for AI8 theme */
body.ai8-theme .title {
  color: var(--ai8-text-primary) !important;
}

body.ai8-theme .subtitle {
  color: var(--ai8-text-secondary) !important;
}

body.ai8-theme .has-text-grey {
  color: var(--ai8-text-secondary) !important;
}

body.ai8-theme .has-text-primary {
  color: var(--ai8-cta) !important;
}

body.ai8-theme .has-text-success {
  color: var(--ai8-positive) !important;
}

body.ai8-theme .has-text-danger {
  color: var(--ai8-negative) !important;
}

body.ai8-theme .has-text-warning {
  color: #f59e0b !important;
}

body.ai8-theme .has-text-info {
  color: var(--ai8-cta) !important;
}