@charset "utf-8";

//@import "compass";
@use "_mixin";

.wp-list-table .section_title{
	font-weight: bold;
	background-color: #ccc;
	border-left:4px solid #333;
}

.wrap.debug_mode {
	tr.dev_object {
		display: table-row;
	}
}
.veu_metabox_nav {
	position: relative;
	display: block;
	overflow: hidden;
	.veu_metabox_all_section_toggle {
		position: relative;
		right: 0;
		top: 0;
		// 以下スキンなどによって負けないように指定しているので消さないように
		opacity: 1;
		float: none;
	}
}
.veu_metabox_footer {
	padding-top: 5px;
	.logo_exUnit {
		text-align: right;
		border: none;
		img {
			width: 100px;
		}
	}
}

.veu_metabox_all_section_toggle.close {
	.veu_metabox_all_section_toggle_btn_open {
		display: block;
	}
	.veu_metabox_all_section_toggle_btn_close {
		display: none;
	}
}
.veu_metabox_all_section_toggle.open {
	.veu_metabox_all_section_toggle_btn_open {
		display: none;
	}
	.veu_metabox_all_section_toggle_btn_close {
		display: block;
	}
}

.veu_metabox_section,
.veu_form-field_section td {

	p {
		margin-top:0;
		margin-bottom:10px;
	}
	label {
		font-weight: normal;
	}
	input[type="checkbox"] {
		margin-top: 0;
		margin-right: 4px;
	}
	input,
	select,
	textarea {
		margin-bottom: 5px;
	}
	&_title {
		position: relative;
		border: 1px solid #e5e5e5;
		padding: 7px 1rem;
		background-color: #f5f5f5;
		margin: 0 0 2px;
		font-size: 14px;
		cursor: pointer;
		&_status_btn {
			display: block;
			overflow: hidden;
			position: absolute;
			right: 10px;
			top: 5px;
			&.close {
				display: block;
			}
			&.open {
				display: none;
			}
		}
	}
	&_body {
		display: none;
		padding: 1rem 1rem 1.5rem;
		& > *:last-child{
			margin-bottom:0;
		}
		.button {
			margin-right:0.5em;
		}
	}
}
.veu_metabox_section.open {
	.veu_metabox_section_title_status_btn {
		&.close {
			display: none;
		}
		&.open {
			display: block;
		}
	}
	.veu_metabox_section_body {
		display: block;
	}
}

.vkExUnit_cta_button_icon_inputset dl{
	display: flex;
	dt {
		white-space: nowrap;
	}
	dd {
		width:50%;
		box-sizing: border-box;
	}
}

.body-open {
	border: 1px solid #ff0000;
}

.veu_head_title,
.veu_sns_title {
	input[type="text"] {
		width: 100%;
	}
}

.table-widget-enablation {
	width: 100%;
	tbody {
		td,
		th {
			box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
		}
		.active {
			th,
			td {
				background-color: #f7fcfe;
			}
		}
	}
}

//設定メニュー横にアイコン追加
#toplevel_page_vkExUnit_setting_page{
	.dashicons-before{
		@include mixin.veu-icon();
	}
	&:hover .dashicons-before{
		@include mixin.veu-icon-hover();
	}
}

//admin-barの設定メニューにアイコン追加
#wp-admin-bar-veu_adminlink{
    .ab-veu-icon{
        @include mixin.admin-bar-ab-veu-icon();
    }
    &:hover{
        .ab-veu-icon{
            @include mixin.veu-icon-hover();
        }
    }
}

// Page Top Button の管理画面設定（ExUnit メイン設定 → Page Top Button タブ）
// design-rules.md「情報グループの親子関係も踏まえて余白をつける」OK 例に準拠。

// 情報階層:
//   画像指定 UI (.veu_pagetop_image_source + .veu_pagetop_image_size + .veu_pagetop_image_meta)
//   ├ 画像プレビュー         (.veu_pagetop_image_preview)
//   ├ 画像関連選択フォームグループ
//   │   ├ URL 入力フォーム    (.veu_pagetop_image_source__url)
//   │   └ ボタングループ      (.veu_pagetop_image_source__buttons)
//   ├ 画像サイズフォームグループ (.veu_pagetop_image_size__inputs)
//   │   ├ 横サイズ
//   │   └ 縦サイズ
//   └ 説明文                  (.veu_pagetop_image_size__notes, .veu_pagetop_image_meta)

// 余白規約: グループ内 < 同列グループ間 < 親グループ間。
//   - URL ⇔ ボタン群:        密着 (0.2em)  — 同じ画像関連選択フォームグループ内
//   - 横サイズ ⇔ 縦サイズ:   密着 (0.2em)  — 同じ画像サイズフォームグループ内
//   - プレビュー ⇔ URL 入力: 中余白 (0.8em) — プレビュー ⇔ 画像関連選択フォームグループ
//   - ボタン群 ⇔ サイズ:     大余白 (1.6em) — 画像ソース ⇔ サイズフォームグループ
//   - サイズ ⇔ 説明文:       中余白 (0.9em) — サイズフォームグループ内サブグループ間

// specificity の方針: すべて class セレクタで揃え、`!important` は使わない。
// shorthand `margin: 0 0 0.3em` ではなく `margin-top` / `margin-bottom` を個別に書く。
// Customizer「ページトップへ戻るボタン」セクション内、
// 「Page top button image」の説明文（最後の <p class="description">）と
// 直下の画像サムネイル（vkExUnit_pagetop_image_url コントロール）の間の余白拡大。
// issue #1368: デフォルトのままだと説明文の終端と画像サムネイルの距離が近く、
// 「説明文 → 画像サムネイル」が同じ塊に見えてしまう（説明と操作対象の境界が弱い）。
// design-rules.md「余白」「情報グループ内の余白 < 情報グループ間の余白」を踏まえ、
// 当該境界の絶対値 px を 1.4 倍に拡大する（指定範囲 1.3〜1.5 の中央）。

// 計測結果（wp-env 上の Customizer・既定状態）:
//   - heading 控除 li の margin-bottom: 12px
//   - 最後の <p class="description"> の margin-bottom: 5px（collapse 後 12px）
//   - 結果として説明文と画像サムネイル間の実描画 gap = 17px (12 + 5)
// 目標: 17px × 1.4 ≒ 24px。
// 実装: 最後の description の margin-bottom を 5px → 12px に拡大すると、
// 12 + 12 = 24px となり狙い通り。説明文側のマージンを足す形を選ぶのは、
// 「最後の段落と次の control の間」という意味合いが最もセレクタで表現できるため
// （li 同士の margin を増やすと「li と li の間」全般に作用してしまう）。
// スコープは `#customize-control-vkExUnit_pagetop_image_heading` 内に限定し、
// 他コントロールの description は影響を受けない。
// 詳細度は `:where()` で 0 に保ち、customizer のデフォルトや他プラグインの
// 素朴な指定と衝突しないようにする（design-rules.md / 過去案件のレビュー方針）。
// セレクタ補足: heading 控除の id は当該セクション固有なので
// `#customize-control-vkExUnit_pagetop_image_heading` 単独でも他セクションには
// 当たらないが、issue #1368 の方針（セクションスコープ限定）を意図として明示するため
// `#sub-accordion-section-veu_pagetop_setting` を前段に置く。
#sub-accordion-section-veu_pagetop_setting #customize-control-vkExUnit_pagetop_image_heading :where(.description:last-child) {
    margin-bottom: 12px;
}

#pagetopSetting {

    // ===== 画像ソース親グループ =====
    .veu_pagetop_image_source {
        margin-bottom: 1.6em; // 親グループ間余白（画像ソース → サイズ）

        // プレビュー単独。次の画像関連選択フォームグループとの境界として中余白を取る。
        // design-rules.md OK 例の「画像プレビュー [空行] [URL 入力]」の空行に相当。
        > .veu_pagetop_image_preview {
            margin-top: 0.3em;
            margin-bottom: 0.8em;
        }

        // URL 入力 ⇔ ボタン群 は同じ「画像関連選択フォームグループ」内の
        // サブグループ同士なので密着させる（design-rules.md OK 例で空行なし）。
        > .veu_pagetop_image_source__url {
            margin-top: 0.2em;
            margin-bottom: 0.2em;

            // URL input は親幅いっぱいに広げ、ボタン群の最大幅と max-width を揃える。
            // ボタン: flex 1 1 14em × 2 + gap 0.4em = 28.4em 相当。これに合わせ
            // 28.4em を max-width として右端を揃える（design-rules.md「要素の
            // グループごとでの改行を考慮する」/ レビュー指摘の右端揃え対応）。
            > input {
                width: 100%;
                max-width: 28.4em;
                box-sizing: border-box;
            }
        }

        // ボタン段落ち端揃え（design-rules.md「横並びボタンの揃え」準拠）。
        // 旧実装のインライン `style="display:flex; ..."` を SCSS に集約。
        > .veu_pagetop_image_source__buttons {
            margin-top: 0.2em;
            margin-bottom: 0.2em;
            display: flex;
            flex-wrap: wrap;
            gap: 0.4em;
            max-width: 28.4em; // URL input と右端を揃える

            .button {
                flex: 1 1 14em;
                min-width: 14em;
            }
        }
    }

    // ===== サイズフォームグループ =====
    .veu_pagetop_image_size {
        margin-bottom: 1.6em; // 親グループ間余白（サイズ → meta）

        // 画像サイズフォームグループ。横サイズ ⇔ 縦サイズ は密着。
        // 説明文との境界では中余白を取る（同列サブグループ間）。
        > .veu_pagetop_image_size__inputs {
            margin-top: 0.3em;
            margin-bottom: 0.9em;

            // 横サイズ ⇔ 縦サイズ の各行（密着）。
            // grid-template-columns でラベル列の幅を固定し、ラベルの文字数差
            // （"width" vs "height"）で入力欄の x 座標がずれるのを防ぐ
            // （design-rules.md「ラベル付き入力欄の x 座標揃え」準拠）。
            > p {
                margin-top: 0.2em;
                margin-bottom: 0.2em;

                > label {
                    display: grid;
                    // ラベル列: 「Image height (px)」(13文字 + 余白) が収まる 11em。
                    // 入力列: 6em 固定で width / height の input 左端を揃える。
                    grid-template-columns: 11em 6em;
                    align-items: center;
                    column-gap: 0.5em;

                    // input 自体は親 grid セルにフィットさせる（既存 inline
                    // `style="width:6em;"` も SCSS で吸収する形）。
                    > input[type="number"] {
                        width: 100%;
                        box-sizing: border-box;
                        margin: 0;
                    }
                }
            }
        }

        > .veu_pagetop_image_size__notes {
            margin-top: 0.3em;
            margin-bottom: 0.3em;

            // 連続する description は近接させる。`<p>` デフォルトの 1em マージンを
            // ここで上書き。
            > p.description {
                margin-top: 0.4em;
                margin-bottom: 0;

                &:first-child {
                    margin-top: 0;
                }
            }
        }
    }

    // ===== 画像 meta グループ =====
    .veu_pagetop_image_meta {

        > p.description {
            margin-top: 0.4em;
            margin-bottom: 0;

            &:first-child {
                margin-top: 0;
            }
        }
    }
}