/* ======================================================================= */
/* 【管理画面共通コンポーネント】: page.css - ダッシュボード以外の全管理画面で読み込み */
/* ======================================================================= */

/* --- 汎用ボタン --- */
.admin-button {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    font-weight: bold;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.1s;
    text-decoration: none; /* aタグの場合も考慮 */
}

/* プライマリボタン (新規作成など) */
.admin-button.btn-primary {
    background-color: var(--base-text-color); /* 通常時: 濃紺 */
    color: #fff; /* 文字色: 白 */
    border: 1px solid var(--base-text-color); /* ボーダー: 濃紺 */
}
.admin-button.btn-primary:hover {
    background-color: var(--accent-color); 
    color: #fff; /* 文字色: 白 (視認性維持) */
    border-color: var(--accent-color);
    transform: translateY(-1px);
}

/* セカンダリボタン (編集など) */
.admin-button.btn-secondary {
    background-color: #fff;
    color: var(--base-text-color);
    border: 1px solid #ccc;
}
.admin-button.btn-secondary:hover {
    background-color: #f0f0f0;
    color: var(--accent-color);
    border-color: #bbb;
    transform: translateY(-1px);
}

/* デンジャーボタン (削除など) */
.admin-button.btn-danger {
    background-color: #dc3545; /* 赤系 */
    color: #fff;
    border: 1px solid #dc3545;
}
.admin-button.btn-danger:hover {
    background-color: #c82333; /* 赤系濃 */
    color: var(--accent-color); 
    border-color: #bd2130;
    transform: translateY(-1px);
}


/* --- テーブル --- */
.admin-table-container {
    overflow-x: auto; /* PC・モバイル問わず横スクロール可能に */
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 2rem;
    background-color: #fff;
    /* Firefox用のスクロールバー設定 */
    scrollbar-width: thin; 
    scrollbar-color: var(--accent-color) #f8f9fa;
}
/* WebKit系ブラウザ (Chrome, Safari, Edge) のスクロールバーデザイン */
.admin-table-container::-webkit-scrollbar {
    height: 12px; /* 横スクロールバーの高さ */
}
.admin-table-container::-webkit-scrollbar-track {
    background-color: #f8f9fa; /* トラックの背景色 */
    border-radius: 6px;
}
.admin-table-container::-webkit-scrollbar-thumb {
    background-color: var(--accent-color); /* つまみの色 */
    border-radius: 6px;
    border: 3px solid #f8f9fa; /* トラック色で縁取り、つまみを細く見せる */
}
.admin-table-container::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-color-hover); /* ホバー時の色 */
}

.admin-table {
    width: 100%;
    border-collapse: collapse; /* 罫線を一本線に */
    white-space: nowrap; /* デフォルトではセル内改行を禁止 */
}

.admin-table th,
.admin-table td {
    padding: 0.7rem 1.2rem;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
    max-width: 300px; /* 必要に応じて調整 */
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-table thead th {
    background-color: #f8f9fa; /* ヘッダーの背景色 */
    font-weight: bold;
    color: #555;
    white-space: nowrap;
}

.admin-table tbody tr:last-child td {
    border-bottom: none; /* 最後の行の下線は消す */
}

/* テーブル内のボタン調整 */
.admin-table td .admin-button {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    margin-right: 0.5rem; /* ボタン間の余白 */
    white-space: nowrap;
}
.admin-table td .admin-button:last-child {
    margin-right: 0;
}


/* ページネーションUI スタイル --- */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
    list-style: none;
    padding: 0;
}

.pagination li a,
.pagination li span {
    display: block;
    min-width: 36px;
    height: 36px;
    padding: 0 0.5rem;
    line-height: 34px; /* ボーダー2px分を引く */
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: var(--base-text-color);
    text-decoration: none;
    background-color: #fff;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.pagination li a:hover {
    background-color: #f7f7f7;
    border-color: #ccc;
    color: var(--accent-color); /* ホバー時文字色を金色に */
}

.pagination li.active span {
    background-color: var(--base-text-color);
    color: #fff;
    border-color: var(--base-text-color);
    font-weight: bold;
}

.pagination li.disabled span {
    color: #aaa;
    background-color: #f7f7f7;
    cursor: not-allowed;
}

/* モバイル向け対応 */
@media (max-width: 480px) {
    .pagination {
        flex-wrap: wrap; /* 狭い画面では改行させる */
        gap: 0.4rem;
    }
    .pagination li a,
    .pagination li span {
        min-width: 30px;
        height: 30px;
        line-height: 28px;
        font-size: 0.9rem;
        padding: 0 0.3rem;
    }
}

/* =============================================== */
/* ★★★ フォーム共通スタイル ★★★ */
/* =============================================== */
.form-group {
    margin-bottom: 1.5rem; /* 各フォームグループの下部に余白 */
    display: block; /* 常にブロック要素として扱う */
    position: relative; /* ラベルのホバーエフェクトなどの基準点 */
}

.form-label {
    display: block; /* ラベルをブロック要素にする */
    font-weight: bold;
    margin-bottom: 0.5rem; /* ラベルと入力欄の間に余白 */
    color: var(--base-text-color); /* ラベルの色を基本色に */
}

.form-label .required {
    color: #c0392b; /* 必須マークの色 */
    font-size: 0.9em;
    margin-left: 0.5em;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--base-text-color);
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 4px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    box-sizing: border-box; /* paddingを含めてwidth 100%にするため */
    resize: vertical; /* textareaのリサイズを縦方向にのみ許可 */
    min-height: 40px; /* inputの最小高さを確保 */
}

textarea.form-control {
    min-height: 150px; /* textareaのデフォルト高さを確保 */
    line-height: 1.7; /* テキストエリア内の行間を調整 */
}

.form-control:focus {
    color: var(--base-text-color);
    background-color: #fff;
    border-color: var(--accent-color); /* フォーカス時にアクセントカラーのボーダー */
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(191, 169, 117, 0.25); /* --accent-color の薄い色でシャドウ */
}

/* フォームグループ内の補足説明 */
.form-group .form-description {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.85em;
    color: #6c757d; /* グレーアウト */
    line-height: 1.4;
}

/* チェックボックス・ラジオボタン用 */
.form-check-group {
    display: flex; /* チェックボックスとラベルを横並びに */
    align-items: center;
    margin-top: 0.5rem; /* チェックボックスの上の余白 */
    margin-bottom: 1rem;
}

.form-check-input {
    margin-right: 0.5rem;
    width: 1.25em; /* サイズ調整 */
    height: 1.25em; /* サイズ調整 */
    flex-shrink: 0; /* 縮まないようにする */
    vertical-align: middle; /* 上下中央揃え */
}

.form-check-label {
    margin-bottom: 0; /* ラベルのデフォルトマージンをリセット */
    font-weight: normal; /* チェックボックスのラベルは太字にしない */
    color: var(--base-text-color);
    cursor: pointer;
    vertical-align: middle; /* 上下中央揃え */
}

/* インラインで表示する入力欄（例：表示順） */
.form-group-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* ラベルと入力欄の間にスペース */
}

.form-group-inline .form-label {
    margin-bottom: 0; /* インラインなので下マージンは不要 */
    white-space: nowrap; /* ラベルが改行されないように */
}

.form-control-inline {
    width: auto; /* 幅を自動調整 */
    max-width: 100px; /* 最大幅を設定 */
    text-align: center; /* 数字などを中央寄せ */
}

/* 画像URL表示とボタンのコンテナ */
.image-upload-area {
    display: flex;
    align-items: center;
    gap: 1rem; /* URL表示とボタンの間に余白 */
    flex-wrap: wrap; /* 必要に応じて折り返し */
}

/* 画像URLのラベル表示 */
.image-url-label {
    flex-grow: 1; /* スペースを埋めるように伸びる */
    background-color: #f8f9fa; /* 薄い背景色 */
    border: 1px solid #e0e0e0; /* 枠線 */
    border-radius: 4px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #555; /* URLは少し薄い色に */
    word-break: break-all; /* 長いURLがはみ出ないように */
    min-height: 40px; /* inputの高さと合わせる */
    display: flex; /* 垂直中央揃え用 */
    align-items: center; /* 垂直中央揃え */
}


.form-actions {
    margin-top: 2rem;
    text-align: center;
}

.btn-submit {
    display: inline-block;
    font-weight: bold;
    color: #fff;
    background-color: var(--base-text-color);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    padding: 0.75rem 2.5rem;
    font-size: 1rem;
    border-radius: 4px;
    transition: background-color 0.2s, transform 0.2s;
}

.btn-submit:hover {
    background-color: var(--accent-color);
    color: #fff;
    transform: translateY(-2px);
}

/* ★★★ 読み取り専用テキストのスタイル ★★★ */
/* .form-static-text は .image-url-label と同じスタイルに調整 */
.form-static-text {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    background-color: #f8f9fa; /* 薄い背景色 */
    border: 1px solid #e0e0e0; /* 枠線 */
    border-radius: 4px;
    margin: 0; /* pタグのデフォルトマージンをリセット */
    word-wrap: break-word; /* 長い文字列がはみ出ないように */
}

/* 設定セクションの区切り線 */
.form-section-divider {
    border: 0;
    height: 1px;
    background-color: #e0e0e0;
    margin: 2.5rem 0; /* 区切り線の上下に余白 */
}

/* スライダー設定のスロットグループ */
.main-visual-slot-group {
    background-color: #fdfdfa; /* 各スライドの背景色を少し変える */
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.main-visual-slot-group h4 {
    margin-top: 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 1.5rem;
    color: var(--base-text-color);
    font-size: 1.25rem;
}

/* =============================================== */
/* タブUI                                          */
/* =============================================== */
.tab-container {
    margin-top: 1.5rem; /* 上部の余白を調整 */
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #fff;
}

.tab-nav {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #e0e0e0;
    flex-wrap: wrap; /* スマホでタブが折り返されるように */
}

.tab-nav a {
    display: block;
    padding: 0.8rem 1.5rem;
    font-weight: bold;
    color: #888;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: color 0.2s, border-bottom-color 0.2s;
    margin-bottom: -1px; /* 下のボーダーと重なるように */
    white-space: nowrap; /* タブのテキストが改行されないように */
}

.tab-nav a:hover {
    color: var(--base-text-color);
}

.tab-nav a.active {
    color: var(--base-text-color);
    border-bottom-color: var(--accent-color);
}

.tab-content {
    padding: 1.5rem;
}

.tab-pane {
    display: none;
}
.tab-pane.active {
    display: block;
}
.tab-pane h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #eee;
    font-size: 1.1rem; /* ページ全体のタイトルより小さくする */
}

/* スマホ対応 */
@media (max-width: 768px) {
    .tab-nav {
        flex-direction: column; /* スマホでは縦並びに */
        border-bottom: none; /* 縦並びなので下のボーダーは不要 */
    }
    .tab-nav li {
        width: 100%; /* 全幅を使う */
    }
    .tab-nav a {
        border-bottom: 1px solid #e0e0e0; /* 各タブの下に線 */
        border-left: 3px solid transparent; /* 左側にアクティブ表示 */
        margin-bottom: 0;
        text-align: center; /* タブ中央寄せ */
    }
    .tab-nav a.active {
        border-left-color: var(--accent-color);
        border-bottom-color: #e0e0e0; /* アクティブでも下の線は残す */
        background-color: #f8f9fa; /* アクティブタブの背景色 */
    }
    .tab-content {
        border-top: 1px solid #e0e0e0; /* タブコンテンツの上に線 */
        padding: 1rem;
    }
}