/* ============================== */
/* ✅ Quill + DaisyUI Integration */
/*   Snow & Bubble Theme Support  */
/* ============================== */

/* ----------------------------- */
/* 🧱 Base Container & Editor   */
/* ----------------------------- */

/* Quill container inherits textarea styling from the editor element */
.ql-container {
  @apply w-full;
  color: var(--color-base-content);
  min-height: 200px;
}

/* Bubble theme container (no toolbar at top) */
.ql-container.ql-bubble {
  background-color: var(--color-base-100) !important;
  border: 1px solid var(--color-base-300) !important;
  border-radius: 0.5rem !important;
}

/* Snow theme container (has toolbar at top) */
.ql-container.ql-snow {
  background-color: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  border-top: none; /* Snow toolbar has bottom border */
  border-radius: 0 0 0.5rem 0.5rem;
}

.ql-editor {
  @apply p-3 min-h-[200px] max-h-[500px] overflow-auto focus:outline-none;
  font-size: 1rem;
  line-height: 1.5;
  background-color: var(--color-base-100) !important;
  color: var(--color-base-content) !important;
}

.ql-editor.ql-blank::before {
  color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
  font-style: italic;
}

/* Smaller editor for comment forms */
form[id^="comment-form"] .ql-container {
  min-height: 120px !important;
}

form[id^="comment-form"] .ql-editor {
  min-height: 120px !important;
}

/* Hide bubble toolbar completely until needed */
.ql-bubble .ql-tooltip {
  display: none !important;
}

/* Show toolbar when editing a link */
.ql-bubble .ql-tooltip.ql-editing {
  display: block !important;
}

/* Show toolbar when actively being used (not hidden) */
.ql-bubble .ql-tooltip:not(.ql-hidden):not(.ql-out-top):not(.ql-out-bottom) {
  display: block !important;
}

/* ----------------------------- */
/* 🧰 Snow Theme Toolbar         */
/* ----------------------------- */
.ql-toolbar.ql-snow {
  background-color: var(--color-base-200);
  border: 1px solid var(--color-base-300);
  border-radius: 0.5rem 0.5rem 0 0;
  padding: 0.5rem;
}

.ql-toolbar.ql-snow button {
  color: var(--color-base-content);
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
}

.ql-toolbar.ql-snow button:hover {
  background-color: var(--color-base-300);
}

.ql-toolbar.ql-snow button.ql-active {
  background-color: var(--color-primary);
  color: var(--color-primary-content);
}

.ql-toolbar.ql-snow .ql-stroke {
  stroke: currentColor;
}

.ql-toolbar.ql-snow .ql-fill {
  fill: currentColor;
}

.ql-toolbar.ql-snow .ql-picker-label {
  color: var(--color-base-content);
  border: 1px solid var(--color-base-300);
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
}

.ql-toolbar.ql-snow .ql-picker-label:hover {
  background-color: var(--color-base-300);
}

.ql-snow .ql-picker-options {
  background-color: var(--color-base-200);
  border: 1px solid var(--color-base-300);
  border-radius: 0.375rem;
  padding: 0.25rem;
}

.ql-snow .ql-picker-item {
  color: var(--color-base-content);
}

.ql-snow .ql-picker-item:hover {
  background-color: var(--color-base-300);
}

/* ----------------------------- */
/* 🧰 Bubble Tooltip Toolbar     */
/* ----------------------------- */
.ql-tooltip {
  background-color: var(--color-base-200) !important;
  color: var(--color-base-content) !important;
  border: 1px solid var(--color-base-300) !important;
  border-radius: 0.5rem;
  padding: 0.25rem 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  z-index: 50;
}

/* Tooltip buttons */
.ql-tooltip button,
.ql-tooltip .ql-picker-label {
  color: var(--color-base-content, #1f1f1f) !important;
  background: transparent !important;
  border: none;
  border-radius: 0.375rem;
  padding: 0.25rem;
  line-height: 1;
  transition: background-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Hover */
.ql-tooltip button:hover,
.ql-tooltip .ql-picker-label:hover {
  background-color: var(--color-base-300, #e5e5e5) !important;
}

/* ----------------------------- */
/* 🎨 Icon Styling              */
/* ----------------------------- */

/* Larger SVG icons without changing button size */
.ql-tooltip button svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: currentColor !important;
  stroke: currentColor !important;
  stroke-width: 1.4;
  display: inline-block;
  vertical-align: middle;
  pointer-events: none;
}

/* Specific fix for stroke-based icons */
.ql-tooltip .ql-stroke {
  stroke: currentColor !important;
  stroke-width: 1.4;
}

/* Fill-based icons */
.ql-tooltip .ql-fill {
  fill: currentColor !important;
}

/* Optional: Slight dim on hover */
.ql-tooltip button:hover .ql-fill,
.ql-tooltip button:hover .ql-stroke {
  opacity: 0.85;
}

/* ----------------------------- */
/* 🌞 Light Mode Overrides      */
/* ----------------------------- */
[data-theme="light"] .ql-container,
[data-theme="light"] .ql-editor {
  background-color: var(--color-base-100);
  color: var(--color-base-content, #1f1f1f);
}

[data-theme="light"] .ql-tooltip {
  background-color: var(--color-base-200, #f4f4f4) !important;
  color: var(--color-base-content, #1f1f1f) !important;
  border-color: var(--color-base-300, #d4d4d4) !important;
}

[data-theme="light"] .ql-tooltip .ql-fill {
  fill: var(--color-base-content, #1f1f1f) !important;
}

[data-theme="light"] .ql-tooltip .ql-stroke {
  stroke: var(--color-base-content, #1f1f1f) !important;
}

/* ----------------------------- */
/* 🌙 Dark Mode Overrides       */
/* ----------------------------- */
[data-theme="dark"] .ql-container,
[data-theme="dark"] .ql-editor {
  background-color: var(--color-base-100);
  color: var(--color-base-content);
}

[data-theme="dark"] .ql-tooltip {
  background-color: var(--color-base-200) !important;
  color: var(--color-base-content) !important;
  border-color: var(--color-base-300) !important;
}

[data-theme="dark"] .ql-tooltip button,
[data-theme="dark"] .ql-tooltip .ql-picker-label {
  color: var(--color-base-content) !important;
}

[data-theme="dark"] .ql-tooltip button:hover,
[data-theme="dark"] .ql-tooltip .ql-picker-label:hover {
  background-color: var(--color-base-300) !important;
}

[data-theme="dark"] .ql-tooltip .ql-fill {
  fill: var(--color-base-content) !important;
}

[data-theme="dark"] .ql-tooltip .ql-stroke {
  stroke: var(--color-base-content) !important;
}

/* ----------------------------- */
/* 🖼 Image Alignment            */
/* ----------------------------- */

.ql-editor img.img-align-left,
.quill-content img.img-align-left {
  float: left;
  margin: 0 1rem 0.5rem 0;
}

.ql-editor img.img-align-center,
.quill-content img.img-align-center {
  display: block;
  margin: 0.5rem auto;
}

.ql-editor img.img-align-right,
.quill-content img.img-align-right {
  float: right;
  margin: 0 0 0.5rem 1rem;
}

/* Ensure max-width on all blog images */
.ql-editor img,
.quill-content img {
  max-width: 100%;
  height: auto;
}

/* Contain floated images at the article/editor level without trapping them inside individual paragraphs */
.quill-content {
  display: flow-root;
}

/* Editing — give the editor relative positioning for the overlay */
#quill-editor.ql-container {
  position: relative;
}

/* ----------------------------- */
/* 📐 Alignment (blog content)   */
/* ----------------------------- */

/* Applied by Quill's class-based align attributor; must also render in the post detail view */
.quill-content .ql-align-center,
.ql-editor .ql-align-center { text-align: center; }

.quill-content .ql-align-right,
.ql-editor .ql-align-right  { text-align: right; }

.quill-content .ql-align-justify,
.ql-editor .ql-align-justify { text-align: justify; }

/* ----------------------------- */
/* 📊 Table Styles (blog content) */
/* ----------------------------- */

.quill-content table,
.ql-editor table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
}

.quill-content th,
.quill-content td,
.ql-editor th,
.ql-editor td {
  border: 1px solid var(--color-base-300);
  padding: 0.5rem 0.75rem;
  text-align: left;
}

.quill-content thead th,
.ql-editor thead th {
  background-color: var(--color-base-200);
  font-weight: 600;
}

.quill-content tr:nth-child(even) td,
.ql-editor tr:nth-child(even) td {
  background-color: color-mix(in oklab, var(--color-base-200) 50%, transparent);
}