/* ============================================================================
 *  Quill Editor – สไตล์เสริมของเว็บไซต์เทศบาลตำบลสันป่าตอง
 *  ไฟล์นี้ถูกเรียกใช้ทุกหน้า เพราะมีทั้งสไตล์ของตัวแก้ไข
 *  และสไตล์ของ "เนื้อหา" ที่ต้องแสดงผลบนหน้าเว็บจริงด้วย
 * ========================================================================== */

/* ------------------------------ ตัวแก้ไข ---------------------------------- */
.quill-wrapper {
	background: #fff;
	border-radius: 3px;
	margin-bottom: 10px;
}

.quill-wrapper .ql-toolbar.ql-snow {
	border-color: #ccc;
	border-radius: 3px 3px 0 0;
	padding: 6px 4px;
	position: sticky;
	top: 0;
	z-index: 20;
	background: #f7f7f7;
}

.quill-wrapper .ql-container.ql-snow {
	border-color: #ccc;
	border-radius: 0 0 3px 3px;
	font-family: 'Bai Jamjuree', Tahoma, sans-serif;
	font-size: 16px;
}

.quill-wrapper .ql-editor {
	min-height: inherit;
	line-height: 1.7;
}

.quill-wrapper .ql-editor.ql-blank::before {
	font-style: normal;
	color: #aaa;
}

/* กล่องแก้ไขโค้ด HTML */
.quill-source {
	width: 100%;
	border: 1px solid #ccc;
	border-top: 0;
	border-radius: 0 0 3px 3px;
	padding: 12px;
	font-family: Menlo, Consolas, monospace;
	font-size: 13px;
	line-height: 1.6;
	background: #fbfbfb;
	color: #333;
}

/* ปุ่มที่เพิ่มเข้ามาเอง (ใช้ไอคอน Font Awesome) */
.quill-wrapper .ql-toolbar button i {
	font-size: 13px;
	line-height: 1;
	vertical-align: middle;
	color: #444;
}
.quill-wrapper .ql-toolbar button i + i { margin-left: 1px; font-size: 11px; }
.quill-wrapper .ql-toolbar button:hover i,
.quill-wrapper .ql-toolbar button.ql-active i { color: #06c; }
.quill-wrapper .ql-toolbar .ql-table-group button { width: 32px; }
.quill-wrapper .ql-toolbar.quill-source-mode .ql-source i { color: #06c; }

/* ชื่อฟอนต์ / ขนาดตัวอักษร ในเมนู (whitelist กำหนดเองจึงต้องบอก label เอง) */
.quill-wrapper .ql-snow .ql-picker.ql-font,
.quill-wrapper .ql-snow .ql-picker.ql-size { width: 130px; }
.quill-wrapper .ql-snow .ql-picker.ql-size { width: 76px; }

.quill-wrapper .ql-snow .ql-picker.ql-font .ql-picker-label[data-value]::before,
.quill-wrapper .ql-snow .ql-picker.ql-font .ql-picker-item[data-value]::before,
.quill-wrapper .ql-snow .ql-picker.ql-size .ql-picker-label[data-value]::before,
.quill-wrapper .ql-snow .ql-picker.ql-size .ql-picker-item[data-value]::before {
	content: attr(data-value);
}
.quill-wrapper .ql-snow .ql-picker.ql-font .ql-picker-label::before { content: 'ฟอนต์'; }
.quill-wrapper .ql-snow .ql-picker.ql-size  .ql-picker-label::before { content: 'ขนาด'; }
.quill-wrapper .ql-snow .ql-picker.ql-header .ql-picker-label::before,
.quill-wrapper .ql-snow .ql-picker.ql-header .ql-picker-item::before { content: 'ปกติ'; }
.quill-wrapper .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.quill-wrapper .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { content: 'หัวข้อ 1'; }
.quill-wrapper .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.quill-wrapper .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { content: 'หัวข้อ 2'; }
.quill-wrapper .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.quill-wrapper .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { content: 'หัวข้อ 3'; }
.quill-wrapper .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.quill-wrapper .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before { content: 'หัวข้อ 4'; }
.quill-wrapper .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.quill-wrapper .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before { content: 'หัวข้อ 5'; }
.quill-wrapper .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.quill-wrapper .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before { content: 'หัวข้อ 6'; }

/* โหมดเต็มจอ */
.quill-wrapper.quill-fullscreen {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 10500;
	margin: 0;
	padding: 10px;
	background: #fff;
	overflow: auto;
}
.quill-wrapper.quill-fullscreen .ql-container.ql-snow { height: calc(100vh - 130px); }
.quill-wrapper.quill-fullscreen .ql-editor { min-height: calc(100vh - 130px); }
body.quill-noscroll { overflow: hidden; }

/* --------- สไตล์ของเนื้อหา (ใช้ทั้งในตัวแก้ไขและหน้าเว็บจริง) ----------- */
.ql-editor img,
.quill-table { max-width: 100%; }

.quill-table {
	border-collapse: collapse;
	margin: 10px 0;
}
.quill-table td,
.quill-table th {
	border: 1px solid #bbb;
	padding: 6px 10px;
	vertical-align: top;
}

li[data-list="checked"],
li[data-list="unchecked"] { list-style: none; }
li[data-list="checked"]::before   { content: '\2611  '; }
li[data-list="unchecked"]::before { content: '\2610  '; }

pre.quill-code,
.ql-syntax {
	background: #23241f;
	color: #f8f8f2;
	overflow: auto;
	padding: 10px 12px;
	border-radius: 3px;
	white-space: pre-wrap;
}