/* ============================================================
   ปรับ Quill ให้เข้ากับธีม INNO 2026
   ============================================================ */

.quill-wrap {
  border-radius: var(--radius-sm, 12px);
  overflow: hidden;
  border: 1.5px solid var(--line, #e6e9f5);
  transition: border-color .2s, box-shadow .2s;
  background: #fff;
}
.quill-wrap:focus-within {
  border-color: var(--indigo, #4361ee);
  box-shadow: 0 0 0 .22rem rgba(67, 97, 238, .16);
}

/* ---- Toolbar ---- */
.quill-wrap .ql-toolbar.ql-snow {
  border: none;
  border-bottom: 1.5px solid var(--line, #e6e9f5);
  background: var(--surface-2, #f5f7fe);
  padding: 10px 12px;
  position: sticky;
  top: 0;
  z-index: 5;
}
.quill-wrap .ql-toolbar.ql-snow .ql-formats {
  margin-right: 12px;
}

/* ---- ปุ่มบน toolbar ---- */
.quill-wrap .ql-snow.ql-toolbar button,
.quill-wrap .ql-snow .ql-toolbar button {
  width: 28px;
  height: 26px;
  border-radius: 6px;
  transition: background .15s;
}
.quill-wrap .ql-snow.ql-toolbar button:hover,
.quill-wrap .ql-snow.ql-toolbar .ql-picker-label:hover {
  background: rgba(67, 97, 238, .1);
  color: var(--indigo, #4361ee);
}
.quill-wrap .ql-snow.ql-toolbar button.ql-active,
.quill-wrap .ql-snow.ql-toolbar .ql-picker-label.ql-active,
.quill-wrap .ql-snow.ql-toolbar .ql-picker-item.ql-selected {
  background: rgba(67, 97, 238, .14);
  color: var(--indigo, #4361ee) !important;
}
.quill-wrap .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.quill-wrap .ql-snow .ql-toolbar button:hover .ql-stroke {
  stroke: var(--indigo, #4361ee);
}
.quill-wrap .ql-snow.ql-toolbar button.ql-active .ql-fill,
.quill-wrap .ql-snow .ql-toolbar button:hover .ql-fill {
  fill: var(--indigo, #4361ee);
}

/* ---- Dropdown ---- */
.quill-wrap .ql-snow .ql-picker {
  color: var(--ink, #16193f);
}
.quill-wrap .ql-snow .ql-picker-options {
  border-radius: 10px;
  box-shadow: var(--shadow, 0 10px 34px rgba(22, 25, 63, .1));
  border: 1px solid var(--line, #e6e9f5);
  padding: 6px;
}

/* ---- พื้นที่พิมพ์ ---- */
.quill-wrap .ql-container.ql-snow {
  border: none;
  font-family:'Noto Sans Thai Looped',system-ui,sans-serif;
  font-size: .98rem;
}
.quill-wrap .ql-editor {
  min-height: inherit;
  line-height: 1.9;
  color: var(--ink, #16193f);
  padding: 16px 18px;
}
.quill-wrap .ql-editor.ql-blank::before {
  color: var(--ink-soft, #5b6083);
  font-style: normal;
  left: 18px;
}
.quill-wrap .ql-editor h1,
.quill-wrap .ql-editor h2,
.quill-wrap .ql-editor h3 {
  font-family:'Noto Sans Thai Looped',system-ui,sans-serif;
  font-weight: 600;
}
.quill-wrap .ql-editor blockquote {
  border-left: 4px solid var(--indigo, #4361ee);
  background: var(--surface-2, #f5f7fe);
  padding: 8px 16px;
  border-radius: 0 8px 8px 0;
  color: var(--ink-soft, #5b6083);
}
.quill-wrap .ql-editor pre.ql-syntax,
.quill-wrap .ql-editor pre {
  background: #0b1354;
  color: #e6e9f5;
  border-radius: 10px;
  padding: 12px 14px;
}
.quill-wrap .ql-editor img {
  max-width: 100%;
  border-radius: 10px;
}
.quill-wrap .ql-editor a {
  color: var(--indigo, #4361ee);
}

/* ---- ป้ายชื่อ dropdown ให้เป็นภาษาที่เข้าใจง่าย ---- */
.quill-wrap .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.quill-wrap .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { content: 'หัวข้อ 1'; }
.quill-wrap .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.quill-wrap .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { content: 'หัวข้อ 2'; }
.quill-wrap .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.quill-wrap .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { content: 'หัวข้อ 3'; }
.quill-wrap .ql-snow .ql-picker.ql-header .ql-picker-label:not([data-value])::before,
.quill-wrap .ql-snow .ql-picker.ql-header .ql-picker-item:not([data-value])::before { content: 'ปกติ'; }

/* ให้ toolbar ตัดบรรทัดได้สวยงามบนจอเล็ก */
.quill-wrap .ql-toolbar.ql-snow { line-height: 1.6; }

/* ปรับให้เข้ากับ modal */
.modal-body .quill-wrap .ql-toolbar.ql-snow { position: static; }