/* public/css/main.css */

/* 1. Base Styles */
@import url("./base.css");

/* 2. Layout Styles */
@import url("./layout.css");

/* 3. Component Styles */
@import url("./components.css");

/* 4. Utility Styles */
@import url("./utilities.css");

/* 5. Page Specific Styles */
@import url("./pages.css");

/* 6. Theme Styles */
@import url("./themes.css");
@import url("./bio-theme.css");

/* 7. Tailwind CSS (もしあれば最後にインポート) */
/* @import url("../tailwind.css"); */
/* または、tailwind.config.js でPostCSSを使って統合する場合、別途設定 */

/* 13. kamos-visible utility class */
.kamos-visible {
    visibility: visible !important;
}

/* 8. Full Width Mode - 新規追加 */
/* html要素に full-width-active クラスがある場合、#app の最大幅を解除 */
html.full-width-active #app {
    max-width: none !important;
    /* Tailwindの kamos-max-w-[1280px] を上書き */
    width: 100%;
    /* 念のため明示的に100%に設定 */
    /* 全幅モード時の左右のパディングを調整。デフォルトのp-lg (24px) よりも小さくする */
    padding-left: var(--kamos-space-md, 24px);
    /* 仮にデフォルトのp-lgと同じにするか、調整 */
    padding-right: var(--kamos-space-md, 24px);
}

/* 必要に応じて、全幅モード時のセクションカードのパディングも調整 */
html.full-width-active #app .kamos-section-card {
    /* ここに全幅モード時のセクションカードのパディング調整があれば追加 */
    /* 例:
    padding-left: var(--kamos-space-lg, 24px);
    padding-right: var(--kamos-space-lg, 24px);
    */
}

/* ヘッダーが固定されている場合、ヘッダーの幅も調整する必要があるかもしれません */
/* .kamos-fixed.kamos-top-0.kamos-left-0.kamos-w-full.kamos-p-sm.kamos-px-lg.kamos-flex.kamos-justify-end.kamos-items-center.kamos-z-[1001].kamos-shadow-md.kamos-gap-md.kamos-bg-gray-100 */
/* 認証コンテナ (ヘッダー部分) も全幅にする場合は、以下のルールを追加 */
html.full-width-active #authContainer {
    max-width: none !important;
    width: auto !important;
    /* Changed from 100% to auto to work with margins */
}

/* 9. Loading Overlay Centering - 新規追加 */
/* #loadingOverlay は ui-helpers.js でトグルされる想定 */
#loadingOverlay {
    position: fixed;
    /* 画面に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* 半透明の背景 */
    z-index: 1002;
    /* 他の要素より手前に表示 */
    display: flex;
    /* Flexbox を使用して子要素を中央に配置 */
    justify-content: center;
    /* 水平方向の中央揃え */
    align-items: center;
    /* 垂直方向の中央揃え */
    /* ui-helpers.js で 'hidden' クラスをトグルするか、display を直接操作する想定 */
}

/* ローディングメッセージボックス自体のスタイル */
#overlay-loading-message-box {
    background-color: #ffffff;
    /* 白い背景 */
    padding: 2rem;
    /* パディング */
    border-radius: 0.5rem;
    /* 角丸 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* 影 */
    text-align: center;
    /* テキスト中央揃え */
    color: #374151;
    /* ダークグレーのテキスト */
    font-family: 'Noto Sans JP', sans-serif;
    /* Noto Sans JP フォント */
    display: flex;
    /* Flexbox を使用してコンテンツを中央に配置（スピナーとテキスト用） */
    flex-direction: column;
    /* 縦方向に並べる */
    align-items: center;
    /* 中央揃え */
    gap: 1rem;
    /* 要素間のスペース */
}



/* Custom style for the first column in analysis tables using :first-child */
#reportSectionsContainer .analysis-table tbody tr td:first-child {
    background-color: #E5E7EB !important;
    /* Tailwind gray-200, !important to override even row style */
}

/* Dark mode adjustment for the first column */
html.dark #reportSectionsContainer .analysis-table tbody tr td:first-child {
    background-color: #374151 !important;
    /* Tailwind gray-700, !important to override even row style */
}

/* 10. Cell Selection Highlight */
.cell-selected {
    background-color: lightyellow !important;
}

html.dark .cell-selected {
    background-color: #ffffe0 !important;
    /* ダークモードでも見やすいように調整 */
}

/* 11. Dialogue Mode UI Adjustments */
#mode-toggle-buttons {
    gap: 1rem;
    /* ボタン間のスペースを追加 */
}

#dialogue-chat-container .chat-message {
    margin-bottom: 1rem;
    /* 各チャットバルーンの下にマージンを追加 */
}

/* 12. Dialogue Mode Immersive UI */
#dialogue-mode-container {
    transition: all 0.5s ease-in-out;
    padding: var(--kamos-space-xl);
    border-radius: var(--kamos-radius-lg);
    max-width: 800px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
}

#dialogue-mode-container .kamos-chat-input-area {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    transition: max-width 0.5s ease-in-out;
}

#dialogue-mode-container #dialogue-input {
    min-height: 80px;
    font-size: var(--kamos-text-lg);
    transition: all 0.5s ease-in-out;
    resize: none;
    flex-grow: 1;
}

#dialogue-chat-wrapper {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out;
    width: 100%;
}

#dialogue-chat-container {
    height: 500px;
    overflow-y: auto;
    border: 1px solid var(--kamos-color-border-default);
    padding: var(--kamos-space-md);
    margin-bottom: var(--kamos-space-md);
    border-radius: var(--kamos-radius-md);
    background-color: var(--kamos-color-bg-container-light);
}

#dialogue-mode-container.chat-active {
    background-color: var(--kamos-color-bg-body);
    box-shadow: var(--kamos-shadow-card);
    border: 1px solid var(--kamos-color-border-light);
    min-height: auto;
}

#dialogue-mode-container.chat-active .immersive-welcome-message {
    display: none;
}

#dialogue-mode-container.chat-active #dialogue-chat-wrapper {
    opacity: 1;
    max-height: 600px;
}

#dialogue-mode-container.chat-active .kamos-chat-input-area {
    max-width: 100%;
}

#dialogue-mode-container.chat-active #dialogue-input {
    min-height: 60px;
    font-size: var(--kamos-text-body);
}

/* Align perspective tags and reference sources to the left */
#dialogue-mode-container #perspective-tags-container,
#dialogue-mode-container #reference-sources-container {
    align-self: flex-start;
    width: 100%;
    justify-content: flex-start;
}

.chat-notification {
    display: flex;
    align-items: center;
    background-color: var(--kamos-color-bg-info);
    color: var(--kamos-color-text-info);
    padding: var(--kamos-space-md);
    margin: var(--kamos-space-md) auto;
    border-radius: var(--kamos-radius-md);
    max-width: 80%;
    border: 1px solid var(--kamos-color-border-info);
}

.chat-notification .material-symbols-outlined {
    margin-right: var(--kamos-space-sm);
}

/* Ensure dialogue mode action buttons are always clickable */
.kamos-chat-input-area #dialogue-attach-button,
.kamos-chat-input-area #dialogue-options-button {
    position: relative;
    z-index: 10;
    pointer-events: auto !important;
}

/* 13. View Tabs Spacing */
#view-tabs {
    margin-bottom: 1.5rem;
    /* Add spacing below the tabs */
}

/* 14. Cell Highlight for Report View Links */
.cell-highlight {
    background-color: #ffe4e1 !important;
    transition: background-color 0.5s ease;
}

html.dark .cell-highlight {
    background-color: #ffcccb !important;
    /* A slightly different pink for dark mode */
}

/* Accordion Styles */
.kamos-accordion-item {
    border: 1px solid var(--kamos-color-border-default);
    border-radius: var(--kamos-border-radius-md);
    margin-bottom: var(--kamos-space-md);
    background-color: var(--kamos-color-bg-body);
    box-shadow: var(--kamos-shadow-sm);
    transition: all 0.3s ease-in-out;
}

.kamos-accordion-item:hover {
    border-color: var(--kamos-color-border-light);
    box-shadow: var(--kamos-shadow-md);
}

.kamos-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--kamos-space-md) var(--kamos-space-lg);
    background-color: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--kamos-color-text-default);
}

.kamos-accordion-header h3 {
    margin: 0;
    color: var(--kamos-color-text-primary-darker);
}

.kamos-accordion-icon {
    transition: transform 0.3s ease-in-out;
}

.kamos-accordion-header.active .kamos-accordion-icon {
    transform: rotate(180deg);
}

.kamos-accordion-content {
    padding: 0 var(--kamos-space-lg) var(--kamos-space-lg);
    border-top: 1px solid var(--kamos-color-border-dashed);
    display: none;
    /* Initially hidden */
}

/* Improved Accordion Header Styles */
.kamos-accordion-header {
    border: 1px solid #9CA3AF;
    border-radius: var(--kamos-border-radius-md);
    background-color: var(--kamos-color-bg-container-light);
    margin-bottom: -1px;
    /* Avoid double borders when open */
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease-in-out;
}

.kamos-accordion-header:hover {
    background-color: var(--kamos-color-bg-container-hover);
    border-color: var(--kamos-primary-darker);
    box-shadow: 0 8px 12px -2px rgba(0, 0, 0, 0.2), 0 4px 8px -2px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.kamos-accordion-header.active {
    background-color: var(--kamos-color-bg-container-hover);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transform: translateY(0);
}


.kamos-accordion-item {
    border: none;
    border-radius: 0;
    margin-bottom: var(--kamos-space-md);
    background-color: transparent;
    box-shadow: none;
}

.kamos-accordion-content {
    border: 1px solid var(--kamos-color-border-default);
    border-top: none;
    border-radius: 0 0 var(--kamos-border-radius-md) var(--kamos-border-radius-md);
    padding: var(--kamos-space-lg);
}

/* 15. Timeline Design Modal Scroll */
#timelineDesignContainer {
    overflow-x: auto;
    /* Allow horizontal scrolling for wide gantt charts */
    -webkit-overflow-scrolling: touch;
    /* Smooth scrolling on touch devices */
}

/* Override base.css max-width for the gantt chart svg */
#gantt-chart svg {
    max-width: none !important;
}

/* 16. Global Main Content Fade-In */
/* Default state is hidden to prevent FOUC (Flash of Unstyled Content) before header loads */
body>main {
    /* opacity: 0; */
    transition: opacity 0.4s ease-out;
}

body>main.content-visible {
    opacity: 1;
}

/* 17. Force MindElixir Path Color (Node.js) */
/* 接続線の色を強制的に統一 */
#map svg path {
    stroke: #94a3b8 !important;
}