/* ============================== */
/* ✅ Quill + DaisyUI Integration */
/*      Bubble Theme Overrides    */
/* ============================== */

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

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

.ql-editor {
  @apply p-3 min-h-[150px] max-h-[500px] overflow-auto focus:outline-none;
}

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

/* ----------------------------- */
/* 🧰 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;
}