/* 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");

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

/* 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: 100%;
}

/* 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: 1000; /* 他の要素より手前に表示 */
    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; /* 要素間のスペース */
}

/* スピナーのスタイル（仮） */
.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #10B981; /* Kamosグリーン */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Custom style for the first column in analysis tables using :first-child */
.analysis-table tbody tr td:first-child {
    background-color: var(--kamos-bg-color-container-light); /* Light background for the first column */
}

/* Dark mode adjustment for the first column */
html.dark .analysis-table tbody tr td:first-child {
    background-color: var(--kamos-bg-color-container-dark); /* Darker background for dark mode */
}