/*
 * public/css/layout.css
 *
 * このファイルには、Kamos Design System のウェブサイト全体のレイアウトに関するスタイルを定義します。
 * - 全体的なコンテナ (Container)
 * - ヘッダー（認証コンテナ） (Header / Auth Container)
 * - フッター (Footer)
 * - メインコンテンツエリア (Main Content Area)
 * - 分析履歴サイドパネル (Analysis History Side Panel)
 *
 * kamos-ui.css からのレイアウト関連のスタイルをここに統合します。
 * Vue.js移行時も、ページの骨格を形成するレイアウトスタイルとして維持されます。
 *
 * Kamos Design System と Kamos Designography の原則に基づき、
 * Kamosグリーンを基調とし、ビタミンカラーとElevation（Material Design参照）を組み込み、
 * Ivy RossのPixelのような柔和かつシャープな印象を目指して改訂。
 */

/* ==========================================================================
   Kamos Design System Global Variables & Elevation (Material Design inspired)
   ========================================================================== */
:root {
    /* Kamos Vitamin Colors (追加) */
    --kamos-vitamin-orange: #FF8C00; /* 鮮やかなオレンジ */
    --kamos-vitamin-orange-darker: #E67300; /* ホバー用 */
    /* Kamos Primary Color RGB (RGBAで使用するため) */
    --kamos-primary-color-rgb: 16, 185, 129;

    /* Elevation / Box Shadows (Material Designを参考に柔和な影を表現) */
    --kamos-box-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); /* 非常に微妙な影 */
    --kamos-box-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); /* 軽量な要素用 */
    --kamos-box-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06); /* カードや中程度の要素用 */
    --kamos-box-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); /* モーダルやサイドパネルなど目立つ要素用 */
    --kamos-box-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.12), 0 8px 10px rgba(0, 0, 0, 0.06); /* 最も高いElevation用 */
    --kamos-box-shadow-focus: 0 0 0 3px rgba(var(--kamos-primary-color-rgb), 0.3); /* Kamosグリーンを基調としたフォーカスリング */

    /* Transition Timing Function (有機的な動き) - components.cssで定義済みの変数を使用 */
    /* --kamos-transition-timing-function-kamos-organic-bounce は components.css か base.css で定義済みと仮定 */
}


/* ==========================================================================
   1. 全体的なコンテナ/ページラッパー
   ========================================================================== */
/*
 * .kamos-container は、コンテンツの最大幅を制限し、中央に配置するためのクラスです。
 * Tailwindのコンテナクラスを補完またはオーバーライドする場合に使用します。
 * kamos-ui.css の .kamos-container の定義を統合。
 */
.kamos-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1280px; /* kamos-ui.css で指定された最大幅 */
    margin-left: auto;
    margin-right: auto;
    padding: var(--kamos-space-lg);
    padding-top: calc(var(--kamos-space-lg) + 56px); /* ヘッダーの高さ (authContainerの高さ約56px) を考慮 */
}

/* ログインページ特有のコンテナスタイル */
body.login-page .kamos-container {
    padding-top:var(--kamos-space-lg)!important; /* ログインページではヘッダーパディングを減らす */
    max-width: 480px;
}

/* レポートコンテナの特定スタイル */
#reportContainer.kamos-container {
    flex-grow: 1;
}

/* アプリケーションのルート要素 */
#app {
    max-width:1280px; /* .kamos-container と冗長だが、明示のために維持 */
}

/* ==========================================================================
   2. ヘッダー / 認証コンテナ (Header / Auth Container)
   ========================================================================== */
/*
 * #authContainer は、ヘッダーとして機能する認証情報の表示エリアです。
 * Kamos Designographyに基づき、ElevationとKamosグリーンを意識したデザインに。
 */
#authContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: var(--kamos-space-sm) var(--kamos-space-lg); /* パディングを調整 */
    display: flex;
    justify-content: flex-end; /* 右寄せ */
    align-items: center;
    z-index: 1001;
    box-shadow: var(--kamos-box-shadow-md); /* Material DesignのElevationを参考に影を適用 */
    gap: var(--kamos-space-md);
    transition: background-color var(--kamos-transition-duration-medium) ease-in-out,
                box-shadow var(--kamos-transition-duration-medium) ease-in-out;
    background-color: var(--kamos-bg-color-container-light); /* ヘッダーの背景色を中間レイヤーに */
    border-bottom: 1px solid var(--kamos-border-color-light); /* 下部に薄いボーダー */
}

/* ログインページ以外の背景色 */
body:not(.login-page) #authContainer {
    background-color: var(--kamos-bg-color-container-light);
}

/* Login Page specific auth container styles */
body.login-page #authContainer {
    background-color: var(--kamos-bg-color-container-dark-alpha);
    box-shadow: none; /* ログインページでは影を削除 */
    border-bottom: none; /* ログインページではボーダーも削除 */
}

/* ユーザー表示ステータス（一時的に非表示） */
#authContainer span#userStatus {
    display: none !important;
}

/* ヘッダー内のボタンのスタイル調整 - より柔和な印象に */
#authContainer button {
    background-color: transparent; /* 背景を透過 */
    color: var(--kamos-text-color-default); /* デフォルトのテキスト色 */
    transition: all var(--kamos-transition-duration-short) var(--kamos-transition-timing-function-kamos-organic-bounce);
    border: none; /* ボーダーを削除 */
    min-width: 48px; /* タッチターゲットサイズ確保 (Material Design推奨) */
    min-height: 48px;
    padding: var(--kamos-space-sm); /* パディング調整 */
    border-radius: var(--kamos-border-radius-md); /* 角丸 */
}

#authContainer button:hover {
    background-color: rgba(var(--kamos-primary-color-rgb), 0.1); /* Kamosグリーンを薄く透過 */
    color: var(--kamos-primary-darker);
    transform: translateY(-1px);
    box-shadow: var(--kamos-box-shadow-sm); /* 軽い影で浮き上がり */
}
#authContainer button:active {
    transform: translateY(0px); /* クリック時に戻る */
    box-shadow: var(--kamos-box-shadow-xs); /* 押下感 */
}
#authContainer button:focus-visible {
    outline: none;
    box-shadow: var(--kamos-box-shadow-focus);
}


#authContainer button .material-symbols-outlined {
    font-size: 28px; /* アイコンサイズを調整 */
}

/* 新規分析ボタンの特別なスタイル - Kamosグリーンを強調 */
#startNewAnalysisHeaderButton {
    background-color: var(--kamos-primary-color);
    color: var(--kamos-text-color-inverted);
    padding: var(--kamos-space-sm) var(--kamos-space-md);
    border-radius: var(--kamos-border-radius-md);
    box-shadow: var(--kamos-box-shadow-md); /* 目立つように影を強調 */
    font-weight: 600;
}

#startNewAnalysisHeaderButton:hover {
    background-color: var(--kamos-primary-darker);
    box-shadow: var(--kamos-box-shadow-lg); /* ホバーでさらに浮き上がる */
    transform: translateY(-2px);
}
#startNewAnalysisHeaderButton:active {
    transform: translateY(0px);
    box-shadow: var(--kamos-box-shadow-md);
}
#startNewAnalysisHeaderButton:focus-visible {
    outline: none;
    box-shadow: var(--kamos-box-shadow-focus);
}

/* ==========================================================================
   3. メインコンテンツエリア (Main Content Area)
   ========================================================================== */
/*
 * メインコンテンツエリアのスタイル。必要に応じて .kamos-container と組み合わせて使用。
 */
.main-content {
  flex-grow: 1; /* 残りのスペースを埋めるように伸長 */
}

/* セクションカード (ページの主要コンテンツブロック) - 柔和な影と丸み */
.kamos-section-card {
    background-color: var(--kamos-bg-color-body); /* 最も手前のレイヤーの背景色 */
    border: 1px solid var(--kamos-border-color-default);
    border-radius: var(--kamos-border-radius-lg); /* Kamos Designographyの「やわらかな丸み」 */
    padding: var(--kamos-space-xl);
    margin-bottom: var(--kamos-space-2xl);
    box-shadow: var(--kamos-box-shadow-md); /* Material DesignのElevationを参考に影を適用 */
    transition: background-color var(--kamos-transition-duration-short) ease-in-out,
                border-color var(--kamos-transition-duration-short) ease-in-out,
                box-shadow var(--kamos-transition-duration-short) ease-in-out;
}

/* フレームワーク定義コンテナ (グリッドレイアウト) */
.framework-def-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--kamos-space-lg);
    margin-bottom: var(--kamos-space-xl);
}

/* ペルソナセクション - レイアウト調整 */
.persona-section {
    background-color: var(--kamos-bg-color-body); /* 最も手前のレイヤーの背景色 */
    border: 1px solid var(--kamos-border-color-default);
    padding: var(--kamos-space-lg);
    border-radius: var(--kamos-border-radius-lg);
    margin-bottom: var(--kamos-space-xl);
    box-shadow: var(--kamos-box-shadow-sm); /* 軽い影 */
}
.persona-section h2 {
    color: var(--kamos-primary-darkest);
    border-bottom: none;
    margin-top: 0;
    font-weight: 600;
}
.persona-description {
    color: var(--kamos-text-color-light);
    margin-bottom: var(--kamos-space-lg);
    font-size: var(--kamos-font-size-small);
}

/* ==========================================================================
   4. フッター (Footer)
   ========================================================================== */
/*
 * フッターのスタイル。Kamos Designographyに基づき、Elevationと柔和な印象に。
 */
footer {
    text-align: center;
    width: 100%;
    padding: var(--kamos-space-md) 0;
    font-size: var(--kamos-font-size-small);
    color: var(--kamos-text-color-light);
    background-color: var(--kamos-bg-color-container-light); /* フッターの背景色を中間レイヤーに */
    box-shadow: var(--kamos-box-shadow-md); /* Material DesignのElevationを参考に影を追加 */
    transition: background-color var(--kamos-transition-duration-medium) ease-in-out,
                color var(--kamos-transition-duration-medium) ease-in-out;
    margin-top: auto; /* Flexboxの子要素としてフッターをコンテンツの下に押し出す */
    border-top: 1px solid var(--kamos-border-color-light); /* 上部に薄いボーダー */
}

/* ログインページ特有のフッターの色調整 */
body.login-page footer {
    color: var(--kamos-text-color-inverted);
    background-color: var(--kamos-bg-color-body-login); /* ログインページの背景色に合わせる */
    box-shadow: none; /* ログインページでは影を削除 */
    border-top: none; /* ログインページではボーダーも削除 */
}

/* ==========================================================================
   5. 分析履歴サイドパネル (Analysis History Side Panel)
   ========================================================================== */

/* メインアプリケーションラッパー - サイドパネルの親 */
#main-app-wrapper {
    display: flex;
    flex-grow: 1; /* body の flex-col の中でコンテンツ領域を埋める */
    width: 100%; /* 親要素の幅を埋める */
    position: relative; /* サイドパネルの基準点にする */
    overflow-x: hidden; /* 横スクロールを防ぐ */
}

/* サイドパネル本体 - ElevationとKamosグリーンを意識したデザインに。 */
#analysisHistoryPanel, #customFrameworkHistoryPanel {
    width: 320px; /* パネルのデフォルト幅 */
    flex-shrink: 0; /* 縮小しない */
    box-shadow: var(--kamos-box-shadow-lg); /* Material DesignのElevationを参考に影を適用 */
    background-color: var(--kamos-bg-color-container-light); /* サイドパネルの背景色を中間レイヤーに */
    transition: transform var(--kamos-transition-duration-medium) var(--kamos-transition-timing-function-kamos-ease-out),
                box-shadow var(--kamos-transition-duration-medium) ease-in-out,
                background-color var(--kamos-transition-duration-medium) ease-in-out;
    display: flex; /* Flexbox を使用してコンテンツを縦積みに */
    flex-direction: column; /* 要素を縦積みに */
    position: fixed; /* 固定配置 */
    top: 0;
    height: 100vh; /* ビューポートの高さ */
    padding-top: 156px; /* ヘッダーの高さ分、コンテンツを下げる */
    z-index: 1050; /* z-indexを高く設定 */
    border-radius: var(--kamos-border-radius-lg); /* やわらかな丸み */
}

#analysisHistoryPanel {
    right: 0;
    transform: translateX(100%); /* 初期状態は完全に隠す */
    border-left: 1px solid var(--kamos-border-color-default); /* 左ボーダーを追加 */
}

#customFrameworkHistoryPanel {
    left: 0;
    transform: translateX(-100%); /* 初期状態は完全に隠す */
    border-right: 1px solid var(--kamos-border-color-default); /* 右ボーダーを追加 */
}


/* サイドパネルが開いた状態 */
#analysisHistoryPanel.is-open {
    transform: translateX(0); /* 完全に表示 */
}

#customFrameworkHistoryPanel.is-open {
    transform: translateX(0); /* 完全に表示 */
}

/* サイドパネルの開閉ボタン - Kamosグリーンと有機的な動き */
#toggleHistoryPanelButton, #toggleCustomHistoryPanelButton {
    position: fixed;
    top: 50%;
    transform: translateY(-50%); /* オーバーレイのため、translateXの調整を削除 */
    background-color: var(--kamos-primary-color);
    color: var(--kamos-text-color-inverted);
    padding: var(--kamos-space-md); /* 大きく見せる */
    box-shadow: var(--kamos-box-shadow-md);
    z-index: 1055; /* サイドパネルよりさらに高く設定 */
    cursor: pointer;
    border: none;
    transition: transform var(--kamos-transition-duration-medium) var(--kamos-transition-timing-function-kamos-organic-bounce),
                background-color var(--kamos-transition-duration-short) ease-in-out,
                color var(--kamos-transition-duration-short) ease-in-out,
                box-shadow var(--kamos-transition-duration-short) ease-in-out;
    min-width: 56px; /* タッチターゲットサイズ確保 (Material Design推奨) */
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#toggleHistoryPanelButton {
    right: 0;
    border-radius: var(--kamos-border-radius-lg) 0 0 var(--kamos-border-radius-lg); /* 左側だけ丸くする */
}

#toggleCustomHistoryPanelButton {
    left: 0;
    border-radius: 0 var(--kamos-border-radius-lg) var(--kamos-border-radius-lg) 0; /* 右側だけ丸くする */
}


#toggleHistoryPanelButton:hover, #toggleCustomHistoryPanelButton:hover {
    background-color: var(--kamos-primary-darker);
    box-shadow: var(--kamos-box-shadow-lg);
    transform: translateY(-50%) scale(1.05); /* 少し拡大 */
}
#toggleHistoryPanelButton:active, #toggleCustomHistoryPanelButton:active {
    transform: translateY(-50%) scale(1.0); /* 押下時に戻る */
    box-shadow: var(--kamos-box-shadow-md);
}
#toggleHistoryPanelButton:focus-visible, #toggleCustomHistoryPanelButton:focus-visible {
    outline: none;
    box-shadow: var(--kamos-box-shadow-focus);
}


/* サイドパネルが開いた時のボタンの位置調整（オーバーレイのため、ボタンは常に表示） */
/* このルールを削除またはコメントアウトし、ボタンが常に表示されるようにする */
/* #analysisHistoryPanel.is-open + #toggleHistoryPanelButton, */
/* #customFrameworkHistoryPanel.is-open + #toggleCustomHistoryPanelButton { */
/* display: none; */
/* } */


/* サイドパネルのリストアイテム - やわらかな影と丸み */
#analysisHistoryList li, #customFrameworkHistoryList li {
    padding: var(--kamos-space-sm) var(--kamos-space-md);
    background-color: var(--kamos-bg-color-body); /* 個々のアイテムの背景色を最手前レイヤーに */
    border: 1px solid var(--kamos-border-color-light);
    border-radius: var(--kamos-border-radius-md);
    cursor: pointer;
    transition: background-color var(--kamos-transition-duration-short) ease-in-out,
                border-color var(--kamos-transition-duration-short) ease-in-out,
                box-shadow var(--kamos-transition-duration-short) ease-in-out;
    margin-bottom: var(--kamos-space-sm);
    box-shadow: var(--kamos-box-shadow-sm); /* 軽い影 */
}

#analysisHistoryList li:hover, #customFrameworkHistoryList li:hover {
    background-color: var(--kamos-bg-color-container-light); /* ホバーで中間レイヤーに */
    border-color: var(--kamos-primary-color);
    box-shadow: var(--kamos-box-shadow-md); /* 影を強調 */
    transform: translateY(-1px); /* 少し浮き上がる */
}
#analysisHistoryList li:active, #customFrameworkHistoryList li:active {
    transform: translateY(0px); /* 押下時に戻る */
    box-shadow: var(--kamos-box-shadow-sm);
}

#analysisHistoryList li p, #customFrameworkHistoryList li p {
    margin: 0;
    font-size: var(--kamos-font-size-body);
    color: var(--kamos-text-color-default);
    line-height: 1.4;
}

#analysisHistoryList li .history-meta, #customFrameworkHistoryList li .history-meta {
    font-size: var(--kamos-font-size-xs);
    color: var(--kamos-text-color-light);
    margin-top: var(--kamos-space-xs);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#analysisHistoryList li .history-meta .material-symbols-outlined, #customFrameworkHistoryList li .history-meta .material-symbols-outlined {
    font-size: 1rem;
    vertical-align: middle;
    margin-right: 2px;
}

/* サイドパネルヘッダーとフッター */
#analysisHistoryPanel .kamos-sticky, #customFrameworkHistoryPanel .kamos-sticky {
    background-color: var(--kamos-bg-color-container-light); /* ヘッダー・フッターも中間レイヤーに */
    box-shadow: var(--kamos-box-shadow-sm); /* 軽い影 */
    padding-top: var(--kamos-space-md); /* Add some internal padding if needed */
    padding-bottom: var(--kamos-space-md); /* Add some internal padding if needed */
}

/* サイドパネルのスクロール可能領域のパディング */
#analysisHistoryPanel .kamos-overflow-y-auto, #customFrameworkHistoryPanel .kamos-overflow-y-auto {
    padding-top: var(--kamos-space-md); /* Ensure content starts below sticky header */
    padding-bottom: var(--kamos-space-md); /* Ensure space above sticky footer */
}


/* モバイル表示時の調整 */
@media (max-width: 768px) {
    #analysisHistoryPanel, #customFrameworkHistoryPanel {
        width: 100vw; /* モバイルでは全幅 */
    }
    /* モバイルではトグルボタンを表示し続ける（パネルは全画面オーバーレイ） */
    /* サイドパネルがオーバーレイするため、開閉ボタンは常に表示されるが、パネルの下に隠れる */
    /* 以前の display: flex; の指定を削除。常にボタンが表示されるのがデフォルト動作になる */
    /* #analysisHistoryPanel.is-open + #toggleHistoryPanelButton, */
    /* #customFrameworkHistoryPanel.is-open + #toggleCustomHistoryPanelButton { */
    /* z-index: 1055; */
    /* } */
}