/* Chart Visualization Simplified */
/* Highcharts用の最小限のカスタマイズのみ */

/* ==================== チャートコンテナ基本設定 ==================== */
#time_graph {
    min-height: 300px;
    width: 100%;
    background: #fff;
    border-radius: 8px;
    position: relative;
}

/* ==================== 読み込み中表示 ==================== */
#time_graph.loading::before {
    content: "グラフを読み込み中...";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #6c757d; /* Bootstrap text-muted相当 */
    z-index: 10;
}

/* ==================== タッチデバイス対応 ==================== */
@media (hover: none) and (pointer: coarse) {
    .highcharts-tooltip {
        font-size: 14px !important;
        padding: 12px !important;
    }
}

/* ==================== レスポンシブ対応 ==================== */
@media (max-width: 768px) {
    #time_graph {
        min-height: 250px;
    }
}

@media (max-width: 480px) {
    #time_graph {
        min-height: 200px;
    }
}

/* ==================== ダークモード対応 ==================== */
@media (prefers-color-scheme: dark) {
    #time_graph {
        background: #2b2b2b;
        color: #fff;
    }
    
    .highcharts-background {
        fill: #2b2b2b !important;
    }
    
    .highcharts-title {
        fill: #fff !important;
    }
}

/* ==================== 高コントラストモード ==================== */
@media (prefers-contrast: high) {
    #time_graph {
        border: 2px solid #000;
    }
    
    .highcharts-axis-line {
        stroke: #000 !important;
        stroke-width: 2px !important;
    }
}

/* ==================== モーション設定への配慮 ==================== */
@media (prefers-reduced-motion: reduce) {
    .highcharts-series-animation,
    .highcharts-point-animation {
        animation-duration: 0.01ms !important;
    }
    
    #time_graph.loading {
        animation: none;
    }
}