/*
 * public/css/utilities.css
 *
 * このファイルには、Kamos Design System の特定の目的のための再利用可能なユーティリティクラスを定義します。
 * これらのクラスは、単一のCSSプロパティや少数のプロパティセットを適用し、
 * HTML要素に直接追加して、素早いスタイリングの調整を可能にします。
 *
 * Tailwind CSSが提供するユーティリティクラスを補完するために使用します。
 * Tailwindで提供されているものと重複しないように注意してください。
 *
 * kamos-ui.css からのユーティリティ関連のスタイルをここに統合します。
 * Vue.js移行時も、これらのユーティリティクラスはコンポーネントやテンプレート内で
 * そのまま使用されることが想定されます。
 */

/* ==========================================================================
   1. 表示/非表示ユーティリティ (Display/Visibility Utilities)
   ========================================================================== */
/* kamos-ui.css の .kamos-hidden と base.css の .sr-only を統合 */
/* base.css にて .sr-only の定義に統合済みのため、ここでは追加の .kamos-hidden のみ */
.kamos-hidden {
    display: none !important; /* !important で強制的に非表示にするユーティリティ */
}

/* ==========================================================================
   2. レイアウト調整ユーティリティ (Layout Adjustment Utilities)
   ========================================================================== */


/* ==========================================================================
   3. テーブルレイアウトユーティリティ (Table Layout Utilities)
   ========================================================================== */
/*
 * テーブルの列幅を固定し、レスポンシブ対応も考慮します。
 */
.analysis-table {
    table-layout: fixed; /* 列の幅を固定 */
    width: 100%;
}
.analysis-table th,
.analysis-table td {
    height: 100px; /* 行の高さを固定 (必要に応じて調整) */
    vertical-align: top; /* 上揃え */
}

/* モバイル表示時のテーブルスタイル調整 */
@media (max-width: 767px) {
    .analysis-table,
    .analysis-table thead,
    .analysis-table tbody,
    .analysis-table tr {
        display: block; /* テーブル全体、ヘッダー、ボディ、行をブロック要素にする */
        width: 100%; /* 幅を100%にする */
    }

    .analysis-table thead {
        /* モバイルではヘッダーを非表示にする */
        display: none;
    }

    .analysis-table tr {
        margin-bottom: var(--kamos-space-xl); /* 各行（カード）間に余白 */
        border: 1px solid var(--kamos-border-color-default); /* カードの枠線 */
        border-radius: var(--kamos-border-radius-lg); /* カードの角丸 */
        box-shadow: var(--kamos-box-shadow-md); /* カードの影 */
        background-color: var(--kamos-bg-color-body); /* カードの背景色 */
        padding: var(--kamos-space-lg); /* カードの内側の余白 */
        box-sizing: border-box; /* パディングとボーダーを幅に含める */
    }

    .analysis-table td {
        display: block; /* セルをブロック要素にする */
        width: 100% !important; /* セルの幅を100%にする */
        height: auto; /* モバイルでは高さ固定を解除 */
        border: none; /* セル間のボーダーをなくす */
        padding: var(--kamos-space-sm) 0; /* セル内の上下パディングを調整 */
        position: relative; /* 子要素の配置のために必要 */
    }

    /* 最初のセル（行ラベル）のスタイル調整 */
    .analysis-table td:first-child {
        font-size: var(--kamos-font-size-h4); /* ラベルのフォントサイズを大きく */
        font-weight: bold; /* ラベルを太字に */
        color: var(--kamos-primary-color); /* ラベルの色をプライマリカラーに */
        margin-bottom: var(--kamos-space-md); /* ラベルの下に余白 */
        padding-top: 0; /* 上パディングをなくす */
        border-bottom: 1px solid var(--kamos-border-color-light); /* ラベルの下に線 */
        padding-bottom: var(--kamos-space-md); /* 線とコンテンツの間に余白 */
    }

    /* モバイル表示時のテーブルセル内の質問文 */
    .analysis-table td .original-question {
        padding-right: 0; /* モバイルでは右パディングをリセット */
        font-size: var(--kamos-font-size-small); /* 質問文のフォントサイズを小さく */
        color: var(--kamos-text-color-light); /* 質問文の色を薄く */
        margin-top: var(--kamos-space-md); /* 上に余白 */
    }
    /* リストアイテム内の質問文 */
    .list-item .original-question { /* kamos-ui.cssから該当部分を統合 */
        padding-right: 0; /* モバイルでは右パディングをリセット */
    }
    /* オブジェクト出力セクション内の質問文 */
    .wp-section-content .original-question { /* kamos-ui.cssから該当部分を統合 */
        padding-right: 0; /* モバイルでは右パディングをリセット */
    }

    /* テーブルセル内のアクションボタン */
    .analysis-table td .action-button-group { /* kamos-ui.cssから該当部分を統合 */
        position: absolute; /* 親要素（td）を基準に配置 */
        top: var(--kamos-space-sm); /* 上からの位置 */
        right: var(--kamos-space-sm); /* 右からの位置 */
        z-index: 10;
        flex-direction: row; /* ボタンを横並びにする */
        gap: var(--kamos-space-xs); /* ボタン間の余白 */
    }
    /* リストアイテム内のアクションボタン */
    .list-item .action-button-group { /* kamos-ui.cssから該当部分を統合 */
        position: relative; /* モバイルでは相対配置に戻す */
        top: auto;
        right: auto;
    }
    /* オブジェクト出力セクション内のアクションボタン */
    .wp-section-content .action-button-group { /* kamos-ui.cssから該当部分を統合 */
        position: relative; /* モバイルでは相対配置に戻す */
        top: auto;
        right: auto;
    }

    /* 各分析テキストエリアのスタイル調整 */
    .analysis-table td .analysis-text.editable-div {
        min-height: 80px; /* 最小高さを確保 */
        border: 1px solid var(--kamos-border-color-default); /* 枠線 */
        border-radius: var(--kamos-border-radius-md); /* 角丸 */
        padding: var(--kamos-space-md); /* 内側の余白 */
        background-color: var(--kamos-bg-color-input); /* 背景色 */
    }
}