/*
 * ===================================================================
 * PFCバランス円グラフ 固有スタイル
 * /css/my-pfc-pie-chart.css
 * (共通スタイル分離後・不具合修正版)
 *
 * 共通スタイルは common-chart-styles.css で定義されています。
 * ===================================================================
 */

/*
 * -------------------------------------------------------------------
 * 1. 共通コンテナスタイルの上書き・拡張
 * -------------------------------------------------------------------
 */

/* 外側コンテナ: 中央揃えは共通スタイルの margin: auto に任せ、最大幅のみ指定 */
.pfc-pie-chart-container {
    max-width: 600px;
}

/* 描画エリア: 不要なFlexbox指定を削除し、シンプルに保つ */
.pfc-pie-chart-area {
    position: relative; /* ツールチップ等の基準点として残す */
    min-height: 400px; /* JSが描画するまでのガタつき防止 */
}


/*
 * -------------------------------------------------------------------
 * 2. コントロールUI (ラジオボタン) のスタイル
 * -------------------------------------------------------------------
 */

.pfc-pie-chart-area .pfc-radio-controls {
    display: flex; /* ボタン同士を横に並べるためにFlexを使用 */
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px; /* グラフとの間に余白を確保 */
}
.pfc-pie-chart-area .pfc-radio-controls label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #e0e0e0;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.pfc-pie-chart-area .pfc-radio-controls label span {
    font-size: 15px;
    font-weight: 500;
    color: #555;
    transition: color 0.2s ease;
}
.pfc-pie-chart-area .pfc-radio-controls input[type="radio"] {
    display: none;
}
.pfc-pie-chart-area .pfc-radio-controls label:has(input[type="radio"]:checked) {
    background-color: #007bff;
    box-shadow: 0 2px 4px rgba(78, 121, 167, 0.3);
}
.pfc-pie-chart-area .pfc-radio-controls label:has(input[type="radio"]:checked) span {
    color: #ffffff;
}

/*
 * -------------------------------------------------------------------
 * 3. SVGと内部要素のスタイル (変更なし)
 * -------------------------------------------------------------------
 */

.pfc-pie-chart-area svg {
    overflow: visible !important;
}
.pfc-pie-chart-area .segment {
    stroke: #ffffff;
    stroke-width: 1.5px;
    cursor: pointer;
    transition: filter 0.2s ease-in-out;
}
.pfc-pie-chart-area .segment.is-hovered {
    filter: brightness(1.15);
}
.pfc-pie-chart-area .center-value-label,
.pfc-pie-chart-area .center-value-amount {
    font-size: 18px;
    font-weight: bold;
    font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
}
.pfc-pie-chart-area .legend-item text {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    fill: #333333;
    dominant-baseline: middle;
    font-size: 14px;
}
.pfc-pie-chart-area .sub-value-item {
    font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
    font-size: 16px;
    font-weight: bold;
    text-anchor: start;
}


/*
 * -------------------------------------------------------------------
 * 4. ツールチップのスタイル (変更なし)
 * -------------------------------------------------------------------
 */

.pfc-chart-tooltip {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    position: absolute;
    pointer-events: none;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.85);
    color: #fff;
    border-radius: 5px;
    padding: 8px 12px;
    max-width: 220px;
    text-align: left;
}
.pfc-chart-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
}
.pfc-chart-tooltip .tooltip-main-text {
    font-size: 15px;
    line-height: 1.3;
    margin: 0;
    padding: 0;
}
.pfc-chart-tooltip .tooltip-sub-text {
    font-size: 13px;
    line-height: 1.3;
    color: #e0e0e0;
    margin: 2px 0 0 0;
    padding: 0;
}