/* カスタムFilamentスタイル - 画像アップロード間離調整用 */

/* --- モーダル表示時の背景グレーアウト＆スクロール禁止 --- */
.filament-modal,
.modal,
[x-cloak][x-show="true"] {
    z-index: 1050 !important;
}

.filament-modal__overlay,
.modal-backdrop,
.fixed.inset-0.bg-gray-500.bg-opacity-75 {
    background: rgba(107, 114, 128, 0.75) !important;
    pointer-events: auto !important;
}

body.modal-open,
body.filament-modal-open,
body.overflow-hidden {
    overflow: hidden !important;
    position: fixed !important;
    width: 100vw !important;
}

/* サイドバーのスクロール・操作を無効化（Filamentレイアウト用） */
body.modal-open .fi-sidebar,
body.filament-modal-open .fi-sidebar {
    pointer-events: none !important;
    filter: grayscale(0.5) blur(2px);
}

/* --- ここまで --- */

/* FilePond画像アップロードアイテム間のスペーシング */
.filepond--item {
    margin-bottom: 20px !important;
    border-top: none !important;
    /* 黒い線を非表示 */
}

/* 画像プレビューのコンテナ調整 */
.filepond--root {
    overflow: visible !important;
    min-height: auto !important;
}

/* FilamentのFileUploadコンポーネント用調整 */
.fi-file-upload .file-preview-container {
    margin-bottom: 15px !important;
}

/* 最後のアイテムの下余白を削除 */
.fi-file-upload .file-preview-container:last-child {
    margin-bottom: 0 !important;
}

/* TiptapEditorの左マージンを削除 */
.no-margin-content .ProseMirror {
    margin-left: 0 !important;
}

/* リンクの表示を修正 */
.no-margin-content a {
    color: var(--primary-600);
    text-decoration: underline;
}

/* エディタの高さ調整 */
.tiptap-editor .ProseMirror {
    min-height: 300px;
}

/* コンテンツ内の段落のマージン調整 */
.ProseMirror p {
    margin: 0.5em 0;
}

/* 画像周りのマージン調整 */
.ProseMirror img {
    max-width: 100%;
    height: auto;
    margin: 1em 0;
}

/* TiptapEditorの左右パディングを削除 */
.tiptap-prosemirror-wrapper {
    padding: 0 !important;
}

/* 各サイズのパディングを上書き */
.tiptap-prosemirror-wrapper.prosemirror-w-sm,
.tiptap-prosemirror-wrapper.prosemirror-w-md,
.tiptap-prosemirror-wrapper.prosemirror-w-lg,
.tiptap-prosemirror-wrapper.prosemirror-w-xl,
.tiptap-prosemirror-wrapper.prosemirror-w-2xl,
.tiptap-prosemirror-wrapper.prosemirror-w-3xl,
.tiptap-prosemirror-wrapper.prosemirror-w-4xl,
.tiptap-prosemirror-wrapper.prosemirror-w-5xl,
.tiptap-prosemirror-wrapper.prosemirror-w-6xl,
.tiptap-prosemirror-wrapper.prosemirror-w-7xl {
    padding: 0 !important;
}

/* ---- Tom Select placeholder wrap fix (global) ---- */
/* プレースホルダーが途中で切れるのを防ぐため折り返しを許可し、
   コンテナ側のoverflowを可視にする */
.ts-control {
    white-space: normal !important;
    overflow: visible !important;
}

.ts-control .ts-placeholder {
    white-space: normal !important;
}

/* 入力要素のplaceholderが使われるケースにも対応 */
.ts-control input[type="text"]::placeholder {
    white-space: normal !important;
}

/* ---- 動画プレビューのサイズ調整 ---- */
/* 動画ファイルのプレビューを350pxに制限 */
.filepond--item video,
.fi-fo-file-upload video,
.fi-fo-file-upload-item video {
    max-height: 350px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

/* FilePondの動画プレビューコンテナ */
.filepond--image-preview-wrapper video,
.filepond--file-preview video {
    max-height: 350px !important;
    width: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* FilePondのアイテムコンテナを中央寄せ */
.filepond--item {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Filament FileUploadコンポーネント内の動画 */
.fi-fo-file-upload video,
[data-filament-form-component] video {
    max-height: 350px !important;
    width: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* 動画ファイルのプレビューを強制表示 */
video[src*=".mp4"] {
    display: block !important;
    max-height: 350px !important;
    width: auto !important;
    margin: 0 auto !important;
}