/* 時間軸頁面樣式 */
.timeline-page {
    padding: 2rem 0;
    min-height: calc(100vh - 160px);
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    min-width: 100vw;
    overflow-x: hidden;
}

.timeline-header {
    max-width: 1200px;
    margin: 0 auto 2rem;
    padding: 0 2rem;
    color: white;
}

.timeline-header h1 {
    font-size: 2.5rem;
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    margin-bottom: 2rem;
    text-align: center;
}

/* 关系线控制区域 */
.relationship-controls {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.control-group h4 {
    color: #2c3e50;
    font-size: 1rem;
    margin-bottom: 1rem;
    text-align: center;
    font-weight: 600;
}

.toggle-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.toggle-btn {
    background: #ecf0f1;
    border: 2px solid #bdc3c7;
    color: #2c3e50;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.toggle-btn:hover {
    background: #d5dbdb;
    border-color: #95a5a6;
}

.toggle-btn.active {
    background: #3498db;
    border-color: #2980b9;
    color: white;
}

.toggle-btn[data-type="family"].active {
    background: #2ecc71;
    border-color: #27ae60;
}

.toggle-btn[data-type="alliance"].active {
    background: #3498db;
    border-color: #2980b9;
}

.toggle-btn[data-type="enemy"].active {
    background: #e74c3c;
    border-color: #c0392b;
}

.toggle-btn[data-type="none"].active {
    background: #95a5a6;
    border-color: #7f8c8d;
}

.timeline-controls {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

/* 底部图例区域 */
.bottom-legends {
    max-width: 1200px;
    margin: 3rem auto 2rem;
    padding: 0 2rem;
    color: white;
}

.bottom-legends .timeline-controls {
    margin-bottom: 1.5rem;
}

.legend {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.legend h3 {
    color: #2c3e50;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.legend-toggle {
    background: none;
    border: none;
    color: #2c3e50;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.2rem;
    transition: transform 0.3s ease, color 0.3s ease;
    display: none;
}

.legend-toggle:hover {
    color: #3498db;
}

.legend-toggle.collapsed {
    transform: rotate(-90deg);
}

.legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #555;
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid #fff;
}

.legend-color.level-1 {
    background: #CB1B45;
}

.legend-color.level-2 {
    background: #CC543A;
}

.legend-color.level-3 {
    background: #939650;
}

.legend-color.level-4 {
    background: #336774;
}

.legend-color.level-5 {
    background: #656765;
}

/* 圖表容器 */
#chart {
    margin: 0 auto 40px;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    padding: 20px;
    width: 95%;
    max-width: 100%;
    overflow-x: auto;
    min-width: 300px;
}

/* SVG 樣式 */
svg {
    display: block;
    margin: 0 auto;
}

/* 座標軸樣式 */
.axis {
    color: #666;
}

.axis path,
.axis line {
    stroke: #e0e0e0;
}

.axis text {
    fill: #666;
    font-weight: 500;
}

/* 網格線樣式 */
.grid line {
    stroke: #ddd;
    stroke-opacity: 0.7;
    shape-rendering: crispEdges;
}

.grid path {
    stroke-width: 0;
}

/* 統治者方塊樣式 */
.ruler-bar {
    cursor: pointer;
    stroke: #fff;
    stroke-width: 1.5px;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.ruler-bar:hover {
    opacity: 1;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

/* 重要度等級顏色 */
.ruler-bar.level-1 {
    fill: #CB1B45; /* 桃紅色 - 世界級重要 */
    stroke: #fff;
}

.ruler-bar.level-2 {
    fill: #CC543A; /* 紅色 - 全球知名 */
    stroke: #fff;
}

.ruler-bar.level-3 {
    fill: #939650; /* 綠色 - 國家級重要 */
    stroke: #fff;
}

.ruler-bar.level-4 {
    fill: #336774; /* 藍色 - 國家重要 */
    stroke: #fff;
}

.ruler-bar.level-5 {
    fill: #656765; /* 灰色 - 一般重要 */
    stroke: #fff;
}

/* 保留舊的類別以便兼容 */
.ruler-bar.important {
    fill: #e74c3c;
    stroke: #fff;
}

.ruler-bar.normal {
    fill: #3498db;
    stroke: #fff;
}

/* 關係線條樣式 */
.relationship-line {
    stroke-opacity: 0.6;
    stroke-width: 3px;
    stroke-linecap: round;
    transition: stroke-opacity 0.3s ease;
}

.relationship-line:hover {
    stroke-opacity: 1;
    stroke-width: 4px;
}

/* 親屬關係 - 綠色實線 */
.relationship-line.family {
    stroke: #2ecc71;
    stroke-dasharray: 0;
}

/* 同盟關係 - 藍色虛線 */
.relationship-line.alliance {
    stroke: #3498db;
    stroke-dasharray: 8, 4;
}

/* 敵對關係 - 紅色點線 */
.relationship-line.enemy {
    stroke: #e74c3c;
    stroke-dasharray: 3, 3;
}

/* 關係線隱藏狀態 */
.relationship-line.hidden {
    opacity: 0;
    pointer-events: none;
}

.relationship-label.hidden {
    opacity: 0;
    pointer-events: none;
}

/* 關係標籤 */
.relationship-label {
    font-size: 11px;
    fill: #7f8c8d;
    font-weight: 600;
    text-anchor: middle;
    pointer-events: none;
    paint-order: stroke;
    stroke: #ffffff;
    stroke-width: 4px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 統治者名稱標籤 */
.ruler-label {
    font-size: 11px;
    font-weight: 600;
    pointer-events: none;
    fill: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* 王朝背景樣式 */
.dynasty-period {
    pointer-events: none;
}

/* 王朝名稱樣式 */
.dynasty-name {
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 羅馬帝國晚期背景 */
.late-roman-period {
    pointer-events: none;
}

.period-label {
    pointer-events: none;
}

/* 提示框樣式 */
#tooltip {
    position: absolute;
    background: rgba(44, 62, 80, 0.95);
    color: #fff;
    padding: 16px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.6;
    max-width: 300px;
    pointer-events: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 9999;
}

#tooltip strong {
    color: #3498db;
    font-size: 16px;
}

#tooltip hr {
    border: none;
    height: 1px;
    background: rgba(255,255,255,0.2);
    margin: 8px 0;
}

/* 響應式設計 */
@media (max-width: 768px) {
    .timeline-header {
        padding: 0 1rem;
    }
    
    .timeline-header h1 {
        font-size: 1.8rem;
    }
    
    .legend-toggle {
        display: block;
    }
    
    .legend-items {
        flex-direction: column;
        gap: 0.5rem;
        max-height: 300px;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    
    .legend-items.collapsed {
        max-height: 0;
    }
    
    .legend h3 {
        margin-bottom: 0.5rem;
    }
    
    #chart {
        width: 100vw;
        max-width: none;
        margin-left: -1rem;
        margin-right: -1rem;
        padding: 10px 1rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 0;
    }
    
    .relationship-controls {
        margin: 1rem 0;
        padding: 1rem;
    }
    
    .control-group h4 {
        font-size: 0.9rem;
        margin-bottom: 0.8rem;
    }
    
    .toggle-buttons {
        gap: 0.3rem;
    }
    
    .toggle-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
    
    svg {
        min-width: 1600px;
        width: auto;
        height: auto;
    }
    
    @media (max-width: 480px) {
        .timeline-page {
            padding: 1rem 0;
        }
        
        #chart {
            padding: 5px;
            position: relative;
        }
        
        #chart::after {
            content: "👈 左右滑動查看完整時間軸";
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(52, 152, 219, 0.9);
            color: white;
            padding: 0.3rem 0.6rem;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 500;
            pointer-events: none;
            z-index: 10;
            animation: slideHint 3s ease-in-out infinite;
        }
        
        @keyframes slideHint {
            0%, 100% { opacity: 0.7; }
            50% { opacity: 1; }
        }
        
        svg {
            min-width: 1800px;
            display: block;
            margin: 0;
        }
        
        .toggle-btn {
            padding: 0.3rem 0.6rem;
            font-size: 0.75rem;
        }
    }
}