/*
 * 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 で強制的に非表示にするユーティリティ */
}

/* Color Utilities */
.kamos-bg-primary {
    background-color: var(--kamos-primary-color) !important;
}

.kamos-text-white {
    color: #ffffff !important;
}

/* Card Background Utility */
.kamos-bg-card {
    background-color: #ffffff !important;
    /* Default Light Mode */
}

/* Dark Mode override assumes .dark class on parent (e.g., html) */
.dark .kamos-bg-card {
    background-color: var(--kamos-card-bg, #1E293B) !important;
}

/* ==========================================================================
   Transition & Animation Utilities
   ========================================================================== */
@keyframes kamos-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes kamos-fade-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(10px);
    }
}

.kamos-fade-enter {
    animation: kamos-fade-in 0.3s var(--kamos-ease-emphasized-decelerate) forwards;
}

.kamos-fade-exit {
    animation: kamos-fade-out 0.2s var(--kamos-ease-emphasized-accelerate) forwards;
}

/* ==========================================================================
   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);
        /* 背景色 */
    }
}