/* =============================================================
   Quill リッチテキストエディタ
   seirenkata/admin/tasks（イベント）のフォームで使用
   Tailwind Preflight との競合対策込み
   ============================================================= */

@import './platforms/seirenkata/design-tokens.css';

/* ── ツールバー外枠（flex で横並び） ── */
.ql-toolbar.ql-snow {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: var(--gap-sm) !important;
  background: var(--color-bg-toolbar);
  border: var(--border-md);
  border-bottom: none;
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
  padding: var(--spacing-sm) var(--spacing-md);
  line-height: 1;
}

/* ── ボタングループ ── */
.ql-toolbar.ql-snow .ql-formats {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--gap-xs) !important;
  margin-right: var(--gap-sm) !important;
  position: relative;
}
/* float 用 clearfix を無効化（flex 不要） */
.ql-toolbar.ql-snow .ql-formats::after {
  display: none !important;
}

/* ── ツールバーボタン：flex で中央揃え、float を解除 ── */
.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: var(--border-radius-sm);
  background: transparent;
  cursor: pointer;
}
.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover {
  background: var(--color-primary-bg);
}

/* ── ボタン内 SVG：明示サイズ（Tailwind の display:block を上書き） ── */
.ql-snow.ql-toolbar button > svg {
  display: block !important;
  float: none !important;
  width: 18px !important;
  height: 18px !important;
}

/* ── アイコン色（通常） ── */
.ql-snow .ql-stroke {
  fill: none !important;
  stroke: var(--color-text-tertiary) !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-width: 2 !important;
}
.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill { fill: var(--color-text-tertiary) !important; }
.ql-snow .ql-picker { color: var(--color-text-secondary); }

/* ── アイコン色（ホバー・アクティブ） ── */
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke { stroke: var(--color-primary) !important; }
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill { fill: var(--color-primary) !important; }
.ql-snow .ql-picker-label:hover,
.ql-snow .ql-picker-label.ql-active { color: var(--color-primary); }

/* ── ピッカー（見出し・サイズ・色）── */
.ql-snow .ql-picker {
  height: 28px !important;
  position: relative;
}
.ql-snow .ql-picker-label {
  display: inline-flex !important;
  align-items: center !important;
  height: 28px !important;
  padding: 0 20px 0 8px !important;
  border: var(--border-md) !important;
  border-radius: var(--border-radius-sm) !important;
  cursor: pointer;
  position: relative !important;
  font-size: 13px;
  white-space: nowrap;
}
.ql-snow .ql-picker-label > svg {
  position: absolute !important;
  right: 2px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  float: none !important;
}

/* サイズピッカー */
.ql-snow .ql-picker.ql-size { width: 80px !important; }
.ql-snow .ql-picker.ql-size .ql-picker-label::before { content: '標準'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before { content: '10px'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before { content: '12px'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before { content: '14px'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before { content: '16px'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before { content: '18px'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before { content: '20px'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before { content: '24px'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before { content: '28px'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before { content: '32px'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36px"]::before { content: '36px'; }

/* カラーピッカー */
.ql-snow .ql-color-picker,
.ql-snow .ql-icon-picker {
  width: 28px !important;
  height: 28px !important;
}
.ql-snow .ql-color-picker .ql-picker-label,
.ql-snow .ql-icon-picker .ql-picker-label {
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border: var(--border-md) !important;
}
.ql-snow .ql-color-picker .ql-picker-label > svg,
.ql-snow .ql-icon-picker .ql-picker-label > svg {
  position: static !important;
  transform: none !important;
  width: 18px !important;
  height: 18px !important;
}

/* ── ピッカードロップダウン：デフォルトで非表示 + 絶対配置 ── */
.ql-snow .ql-picker-options {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background: var(--color-bg-primary) !important;
  border: var(--border-md) !important;
  border-radius: var(--border-radius-sm) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 4px 0 !important;
  z-index: 100 !important;
  min-width: 100%;
  white-space: nowrap;
}
/* ql-expanded クラスが付いたときだけ表示 */
.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  display: block !important;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  color: var(--color-primary);
  border-color: var(--color-primary) !important;
}

.ql-snow .ql-picker-item {
  display: block;
  padding: 4px 12px;
  cursor: pointer;
  color: var(--color-text-secondary);
}
.ql-snow .ql-picker-item:hover { color: var(--color-primary) !important; }

/* カラーピッカーオプションはグリッド */
.ql-snow .ql-color-picker .ql-picker-options {
  padding: 3px 5px !important;
  width: 152px !important;
  min-width: unset !important;
}
.ql-snow .ql-color-picker .ql-picker-item {
  float: left !important;
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  margin: 2px !important;
  border: 1px solid transparent !important;
  border-radius: 2px;
}
.ql-snow .ql-color-picker .ql-picker-item:hover {
  border-color: var(--color-text-secondary) !important;
}

/* サイズ・見出しピッカードロップダウン選択肢 */
.ql-snow .ql-picker.ql-size .ql-picker-item::before                           { content: '標準'; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before        { content: '10px'; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before        { content: '12px'; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before        { content: '14px'; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before        { content: '16px'; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before        { content: '18px'; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before        { content: '20px'; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before        { content: '24px'; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before        { content: '28px'; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before        { content: '32px'; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before        { content: '36px'; }

/* ── エディタ本体 ── */
.ql-container.ql-snow {
  border: var(--border-md);
  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
  background: var(--color-bg-primary);
  font-size: 14px;
  line-height: 1.7;
}
.ql-editor {
  height: 50vh;
  padding: var(--spacing-md) var(--spacing-lg);
  color: var(--color-text-primary);
  overflow: auto;
  outline: none;
}
.ql-container.ql-snow:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(29, 158, 117, 0.15);
}

/* ── テキスト配置 ── */
.ql-editor .ql-align-center  { text-align: center  !important; }
.ql-editor .ql-align-right   { text-align: right   !important; }
.ql-editor .ql-align-justify { text-align: justify !important; }

/* ── 画像の配置（text-align だけでは効かないため block + margin で制御） ── */
.ql-editor .ql-align-center  > img { display: block !important; margin-left: auto !important; margin-right: auto !important; }
.ql-editor .ql-align-right   > img { display: block !important; margin-left: auto !important; margin-right: 0 !important; }
.ql-editor p:not([class])    > img { display: block !important; }

/* ── フォントサイズ ── */
.ql-editor .ql-size-small { font-size: 0.8em; }
.ql-editor .ql-size-large { font-size: 1.5em; }
.ql-editor .ql-size-huge  { font-size: 2.5em; }

/* ── リスト（Quill 2.x は ol タグのみ使用・data-list 属性でリスト種別を区別）── */
/* Tailwind の ol { list-style:none; padding:0; margin:0 } を上書き。
   ネイティブマーカーは非表示にして quill.snow.css の ::before カウンターに任せる */
.ql-editor ol {
  list-style: none !important;
  padding-left: 1.5em !important;
  margin: 4px 0;
  counter-reset: list-0;
}
/* リスト項目の ::before ベーススタイル（quill.snow.css の補完）*/
.ql-editor li[data-list]::before {
  display: inline-block;
  white-space: nowrap;
  width: 1.2em;
  margin-left: -1.5em;
  margin-right: 0.3em;
  text-align: right;
}

/* 箇条書きマーカー */
.ql-editor li[data-list='bullet']::before {
  content: '\2022' !important;
}

/* 番号付きリスト counter */
.ql-editor li[data-list='ordered'] {
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  counter-increment: list-0;
}
.ql-editor li[data-list='ordered']::before {
  content: counter(list-0, decimal) '. ' !important;
}
/* ネストした番号（インデントレベル別）*/
.ql-editor li.ql-indent-1[data-list='ordered'] {
  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  counter-increment: list-1;
}
.ql-editor li.ql-indent-1[data-list='ordered']::before { content: counter(list-1, lower-alpha) '. '; }
.ql-editor li.ql-indent-2[data-list='ordered'] { counter-increment: list-2; }
.ql-editor li.ql-indent-2[data-list='ordered']::before { content: counter(list-2, lower-roman) '. '; }

/* ── リスト配置（中央・右揃え対応）── */
/* 配置ありの li では ::before の margin-left を解除してマーカーを配置に追従させる */
.ql-editor li[data-list].ql-align-center::before,
.ql-editor li[data-list].ql-align-right::before {
  margin-left: 0 !important;
  margin-right: 0.4em !important;
  width: auto !important;
  text-align: inherit !important;
}

/* ── インデント（エディタ本体）── */
.ql-editor .ql-indent-1:not(.ql-direction-rtl)  { padding-left: 3em    !important; }
.ql-editor .ql-indent-2:not(.ql-direction-rtl)  { padding-left: 4.5em  !important; }
.ql-editor .ql-indent-3:not(.ql-direction-rtl)  { padding-left: 6em    !important; }
.ql-editor .ql-indent-4:not(.ql-direction-rtl)  { padding-left: 7.5em  !important; }
.ql-editor .ql-indent-5:not(.ql-direction-rtl)  { padding-left: 9em    !important; }
.ql-editor .ql-indent-6:not(.ql-direction-rtl)  { padding-left: 10.5em !important; }
.ql-editor .ql-indent-7:not(.ql-direction-rtl)  { padding-left: 12em   !important; }
.ql-editor .ql-indent-8:not(.ql-direction-rtl)  { padding-left: 13.5em !important; }
/* リスト項目のインデント（li 自体に padding-left が付くため基本値の 1.5em を加算）*/
.ql-editor li.ql-indent-1:not(.ql-direction-rtl) { padding-left: 4.5em  !important; }
.ql-editor li.ql-indent-2:not(.ql-direction-rtl) { padding-left: 7.5em  !important; }
.ql-editor li.ql-indent-3:not(.ql-direction-rtl) { padding-left: 10.5em !important; }
.ql-editor li.ql-indent-4:not(.ql-direction-rtl) { padding-left: 13.5em !important; }
.ql-editor li.ql-indent-5:not(.ql-direction-rtl) { padding-left: 16.5em !important; }

/* ── コンテンツスタイル ── */
.ql-editor h1       { font-size: 1.35em; font-weight: bold; margin: 0.4em 0; border-bottom: 2px solid #e5e7eb; padding-bottom: 4px; }
.ql-editor h2       { font-size: 1.15em; font-weight: bold; margin: 0.4em 0; }
.ql-editor strong   { font-weight: bold; }
.ql-editor em       { font-style: italic; }
.ql-editor blockquote { border-left: 4px solid #1D9E75; margin: 6px 0; padding: 4px 12px; color: #6b7280; background: #f0fdf4; border-radius: 0 4px 4px 0; }
.ql-editor pre.ql-syntax { background: #f3f4f6; border-radius: 6px; padding: 10px 12px; font-size: 13px; overflow-x: auto; color: #111827; }
.ql-editor a   { color: #1D9E75; text-decoration: underline; }
.ql-editor img { max-width: 100%; border-radius: 6px; }

/* ── 画像リサイズオーバーレイ ── */
.ql-resize-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border: 1.5px solid #1D9E75;
  border-radius: 2px;
  box-sizing: border-box;
}
.ql-resize-handle:hover {
  background: #d1fae5;
}

/* ── showページ表示用（.quill-content） ── */
.quill-content p        { margin: 0.25em 0; }
.quill-content h1       { font-size: 1.35em; font-weight: bold; margin: 0.4em 0; border-bottom: 2px solid #e5e7eb; padding-bottom: 4px; }
.quill-content h2       { font-size: 1.15em; font-weight: bold; margin: 0.4em 0; }
.quill-content strong   { font-weight: bold; }
.quill-content em       { font-style: italic; }
.quill-content s        { text-decoration: line-through; }
/* Quill 2.x は ol タグのみ使用。data-list='bullet'|'ordered' で種別を区別 */
.quill-content ol {
  list-style: none !important;
  padding-left: 1.5em !important;
  margin: 4px 0;
  counter-reset: list-0;
}
.quill-content li {
  padding-left: 1.5em;
}
.quill-content li::before {
  display: inline-block;
  white-space: nowrap;
  width: 1.2em;
  margin-left: -1.5em;
  margin-right: 0.3em;
  text-align: right;
}
.quill-content li[data-list='bullet']::before {
  content: '\2022';
}
.quill-content li[data-list='ordered'] {
  counter-increment: list-0;
}
.quill-content li[data-list='ordered']::before {
  content: counter(list-0, decimal) '. ';
}
/* 配置ありリスト：マーカーも配置に追従 */
.quill-content li[data-list].ql-align-center::before,
.quill-content li[data-list].ql-align-right::before {
  margin-left: 0;
  margin-right: 0.4em;
  width: auto;
  text-align: inherit;
}
.quill-content blockquote { border-left: 4px solid #1D9E75; margin: 6px 0; padding: 4px 12px; color: #6b7280; background: #f0fdf4; border-radius: 0 4px 4px 0; }
.quill-content pre      { background: #f3f4f6; border-radius: 6px; padding: 10px 12px; font-size: 13px; overflow-x: auto; }
.quill-content a        { color: #1D9E75; text-decoration: underline; }
.quill-content img      { max-width: 100%; border-radius: 6px; }
.quill-content .ql-align-center  { text-align: center; }
.quill-content .ql-align-right   { text-align: right; }
.quill-content .ql-align-justify { text-align: justify; }
.quill-content .ql-align-center  > img { display: block; margin-left: auto; margin-right: auto; }
.quill-content .ql-align-right   > img { display: block; margin-left: auto; margin-right: 0; }
.quill-content p:not([class])    > img { display: block; }
.quill-content .ql-size-small    { font-size: 0.8em; }
.quill-content .ql-size-large    { font-size: 1.5em; }
.quill-content .ql-size-huge     { font-size: 2.5em; }
.quill-content .ql-indent-1 { padding-left: 3em    !important; }
.quill-content .ql-indent-2 { padding-left: 4.5em  !important; }
.quill-content .ql-indent-3 { padding-left: 6em    !important; }
.quill-content .ql-indent-4 { padding-left: 7.5em  !important; }
.quill-content .ql-indent-5 { padding-left: 9em    !important; }
.quill-content .ql-indent-6 { padding-left: 10.5em !important; }
.quill-content .ql-indent-7 { padding-left: 12em   !important; }
.quill-content .ql-indent-8 { padding-left: 13.5em !important; }

details > .quill-content {
  height: 100%;
}

details[open] > .quill-content {
  max-height: none;
}

summary::-webkit-details-marker {
  display: none;
}
.ql-tooltip, .ql-hidden {
  display: none !important;
}