/* 基本スタイル - ハカルト ロゴカラー反映 */
body {
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fdf5e6; /* ロゴ背景のベージュ系 */
    color: #5c4033; /* ロゴ文字のダークブラウン系 */
    line-height: 1.6;
}

h1, h2, h3 {
    color: #5c4033; /* ダークブラウン系 */
}

header {
    background-color: #ffffff;
    padding: 15px 30px;
    border-bottom: 1px solid #e0dacb; /* ベージュ系の薄い線 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 {
    margin: 0;
    font-size: 1.8em;
    display: flex;
    align-items: center;
}

.last-updated {
    font-size: 0.9em;
    color: #8b7d6b; /* やや薄いブラウン */
}

main {
    padding: 20px;
}

section {
    margin-bottom: 30px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(92, 64, 51, 0.1); /* ブラウン系の影 */
}

section h2 {
    margin-top: 0;
    border-bottom: 2px solid #a2cc53; /* ロゴのグリーン系 */
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* KPIサマリー */
.kpi-summary h2 {
    border-bottom-color: #40e0d0; /* ロゴのターコイズ系 */
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 常に3カラム表示 */
    gap: 20px;
}

.kpi-tile {
    padding: 20px;
    border-radius: 8px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.2s ease-in-out;
}

.kpi-tile:hover {
    transform: translateY(-3px);
}

.kpi-label {
    font-size: 0.9em;
    margin-bottom: 8px;
    opacity: 0.9;
}

.kpi-value {
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 8px;
}

.kpi-change {
    font-size: 1em;
    font-weight: bold;
}

.kpi-change.increase {
    color: #d4f8e8; /* 淡い緑 */
}

.kpi-change.decrease {
    color: #ffdddd; /* 淡い赤 */
}

/* KPIタイル個別色 - ハカルト ロゴカラー反映 */
.kpi-tile.navy { background-color: #4682b4; } /* 既存の色を残すか、ロゴ色に合わせるか検討 (例: SteelBlue) */
.kpi-tile.purple { background-color: #40e0d0; } /* ロゴのターコイズ系 */
.kpi-tile.cyan { background-color: #a2cc53; } /* ロゴのグリーン系 */
.kpi-tile.net-increase { background-color: #8fbc8f; } /* やや濃いグリーン系 */
.kpi-tile.net-increase .kpi-value { color: #ffffff; }
.kpi-tile.net-increase .kpi-change.increase { color: #d4f8e8; }

.kpi-tile.gray {
    background-color: #f5f5f5; /* 明るいグレー */
    color: #5c4033; /* ダークブラウン */
}
.kpi-tile.gray .kpi-change.increase { color: #2e8b57; } /* SeaGreen */
.kpi-tile.gray .kpi-change.decrease { color: #dc143c; } /* Crimson */

.kpi-tile.nrr { background-color: #ff8c69; } /* ロゴのオレンジ系 */
.kpi-meter {
    width: 50px;
    height: 25px; /* 半円 */
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border: 5px solid rgba(255, 255, 255, 0.4); /* 白の透明度調整 */
    border-bottom: 0;
    margin-top: 10px;
    position: relative;
    /* 実際のメーター表示はJSやSVGが必要 */
}

/* アラート時の背景色 (例) */
.kpi-tile.alert {
    background-color: #fff0f0; /* 淡い赤 */
    color: #dc143c; /* Crimson */
    border: 1px solid #dc143c;
}
.kpi-tile.alert .kpi-change { color: #dc143c; }


/* トレンドグラフ */
.trend-graphs h2 {
    border-bottom-color: #ff8c69; /* ロゴのオレンジ系 */
}

.graph-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.graph-card {
    background-color: #fffaf5; /* ややベージュがかった白 */
    padding: 15px;
    border: 1px solid #e0dacb; /* ベージュ系の薄い線 */
    border-radius: 6px;
    position: relative; /* テキスト重ね表示のための基準 */
}

.graph-card h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.1em;
    color: #5c4033; /* ダークブラウン */
}

.graph-card p {
    font-size: 0.85em;
    color: #8b7d6b; /* やや薄いブラウン */
    margin-bottom: 15px;
}

/* グラフのプレースホルダー画像用スタイル */
.graph-placeholder-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
    margin-top: 10px;
    border: 1px solid #eee5d9; /* 薄いベージュ線 */
    position: relative; /* ::after の基準 */
}

/* グラフ画像の上にテキストを重ねる */
.graph-placeholder-img::after {
    content: "グラフエリア";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #aaaaaa; /* 薄いグレー */
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    pointer-events: none; /* 下の画像をクリック可能にする */
}


/* 詳細ドリルダウン */
.details h2 {
    border-bottom-color: #8b7d6b; /* やや薄いブラウン */
}

details {
    margin-bottom: 15px;
    background-color: #fffaf5; /* ややベージュがかった白 */
    border: 1px solid #e0dacb; /* ベージュ系の薄い線 */
    border-radius: 6px;
}

summary {
    padding: 10px 15px;
    font-weight: bold;
    cursor: pointer;
    background-color: #f5f0e8; /* 薄いベージュ */
    border-bottom: 1px solid #e0dacb;
    border-radius: 6px 6px 0 0;
    outline: none;
    color: #5c4033; /* ダークブラウン */
}

details[open] summary {
    border-bottom: 1px solid #e0dacb;
    border-radius: 6px 6px 0 0;
}

details > div, details > table {
    padding: 15px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

th, td {
    border: 1px solid #e0dacb; /* ベージュ系の薄い線 */
    padding: 10px;
    text-align: left;
    font-size: 0.9em;
}

th {
    background-color: #f5f0e8; /* 薄いベージュ */
    font-weight: bold;
    color: #5c4033; /* ダークブラウン */
}

tbody tr:nth-child(even) {
    background-color: #fdfaf6; /* さらに薄いベージュ */
}

/* フッター */
footer {
    text-align: center;
    margin-top: 30px;
    padding: 15px;
    font-size: 0.9em;
    color: #8b7d6b; /* やや薄いブラウン */
    border-top: 1px solid #e0dacb; /* ベージュ系の薄い線 */
}

/* レスポンシブ対応 (簡易) */
@media (max-width: 768px) {
    header {
        flex-direction: column;
        align-items: flex-start;
    }
    .last-updated {
        margin-top: 5px;
    }
    /*
    .kpi-grid {
        grid-template-columns: 1fr; /* モバイルでは縦一列にする場合はコメント解除 */
    }
    */
    .graph-grid {
        grid-template-columns: 1fr; /* 縦一列に */
}