/**
 * 機能関連図のスタイル
 * 
 * システムの機能フローを視覚的に表示する関連図のスタイル定義
 * データ取得、処理、提供の流れと各機能の稼働状態を表示
 */

/* ========================================
   メインコンテナ
   機能関連図全体を包むコンテナ
   ======================================== */

.function-flow-diagram {
    margin-top: 2rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.function-flow-diagram h3 {
    margin: 0 0 1.5rem 0;
    color: #333;
    font-size: 1.2rem;
    font-weight: 600;
}

/* ========================================
   フローコンテナ
   カテゴリを横並びに配置するコンテナ
   ======================================== */

.flow-container {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
    overflow-x: auto;
    padding: 1rem 0;
}

/* ========================================
   フローカテゴリ
   データ取得、処理、提供などのカテゴリカード
   ======================================== */

.flow-category {
    min-width: 200px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ========================================
   カテゴリヘッダー
   カテゴリ名、アイコン、ステータスを表示
   ======================================== */

.category-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e9ecef;
}

/* カテゴリアイコン */
.category-icon {
    font-size: 1.2rem;
}

/* カテゴリタイトル */
.category-title {
    font-weight: 600;
    color: #333;
    flex: 1;
}

/* ========================================
   カテゴリステータスバッジ
   カテゴリ全体の稼働状態を表示
   ======================================== */

.category-status {
    background: #6c757d;
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* 全て稼働中（緑） */
.category-status.active {
    background: #28a745;
}

/* 一部稼働中（黄色） */
.category-status.partial {
    background: #ffc107;
    color: #333;
}

/* ========================================
   機能項目リスト
   各カテゴリ内の機能一覧
   ======================================== */

.function-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* 横並び表示 */
.function-items.horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ========================================
   機能項目
   個別の機能を表示するカード
   ======================================== */

.function-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

/* ホバー時の背景色変更 */
.function-item:hover {
    background: #e9ecef;
}

/* ========================================
   機能ステータスインジケーター
   各機能の稼働状態を色で表示
   ======================================== */

.function-status-indicator {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: #dc3545; /* 停止状態：赤 */
    flex-shrink: 0;
    transition: background-color 0.3s;
}

/* 稼働中（緑） */
.function-status-indicator.active {
    background: #28a745; /* 稼働中：緑 */
}

/* 警告状態（黄色） */
.function-status-indicator.warning {
    background: #ffc107; /* 警告：黄 */
}

/* 機能名のテキスト */
.function-name {
    font-size: 0.85rem;
    color: #495057;
    font-weight: 500;
}

/* ========================================
   フロー矢印
   カテゴリ間の流れを示す矢印
   ======================================== */

.flow-arrow {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    color: #6c757d;
    margin: 0 0.5rem;
    flex-shrink: 0;
}

/* ========================================
   その他の機能
   メインフロー以外の機能を表示するセクション
   ======================================== */

.other-functions {
    border-top: 1px solid #dee2e6;
    padding-top: 1.5rem;
}

.other-category {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ========================================
   レスポンシブ対応
   スマートフォン向けの縦並びレイアウト
   ======================================== */

/* タブレット・スマートフォン向け（768px以下） */
@media (max-width: 768px) {
    .flow-container {
        flex-direction: column;
        align-items: stretch;
    }
    /* 矢印を90度回転して縦向きに */
    .flow-arrow {
        transform: rotate(90deg);
        align-self: center;
        margin: 0.5rem 0;
    }
    /* 横並びを縦並びに変更 */
    .function-items.horizontal {
        flex-direction: column;
    }
}

/* ========================================
   アニメーション効果
   停止状態の機能を点滅させる
   ======================================== */

.function-status-indicator {
    animation: pulse 2s infinite;
}

/* 稼働中の機能はアニメーションなし */
.function-status-indicator.active {
    animation: none;
}

/* 点滅アニメーション */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}