/* =========================================
   1. 狀態列 (Header)
   ========================================= */
.jct-status-bar {
    background: #f8f9fa;
    border-left: 4px solid #d63638;
    padding: 15px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    border-radius: 0 4px 4px 0;
}

/* 呼吸燈動畫 Badge */
.jct-badge-pulse {
    display: inline-flex;
    align-items: center;
    color: #d63638;
    font-weight: bold;
    font-size: 0.95em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.jct-dot {
    width: 10px;
    height: 10px;
    background-color: #d63638;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    position: relative;
    animation: jct-pulse 2s infinite;
}

@keyframes jct-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(214, 54, 56, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(214, 54, 56, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(214, 54, 56, 0);
    }
}

/* 最後更新時間 */
.jct-last-updated {
    font-size: 0.85em;
    color: #555;
    display: flex;
    align-items: center;
}

.jct-last-updated .dashicons {
    margin-right: 4px;
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* =========================================
   2. 時間軸本體 (Timeline)
   ========================================= */
.jct-timeline-wrapper {
    position: relative;
    padding-left: 20px;
    margin-top: 20px;
}

/* 單一節點 */
.jct-item {
    position: relative;
    margin-bottom: 40px !important;
    padding-left: 40px;
}

/* ------------------------------------------------------------------
   預設行為 (與自動連接)：
   ------------------------------------------------------------------ */
.jct-item::after {
    content: '';
    position: absolute;
    top: 20px; /* 預設：從圓點中心下方開始往下畫 */
    bottom: 0;
    left: 9px;
    width: 2px;
    background: #e5e5e5;
    z-index: 1; 
}

/* 自動連接：如果兩個節點緊鄰，第二個節點會往上畫線連回去 */
.jct-item + .jct-item::after {
    top: -40px; 
}

/* ------------------------------------------------------------------
   強制範圍模式 (Timeline Scope) - 配合 JS Fixer 增強版
   JS 會自動標記 .jct-is-latest 與 .jct-is-last，比純 CSS 選擇器更準
   ------------------------------------------------------------------ */

/* 1. 最新一筆資料 (First Item) */
/* 強制不往上畫線 (top: 20px) */
.jct-item.jct-is-latest::after,
.jct-timeline-scope > .jct-item:first-of-type::after { 
    top: 20px !important; 
}

/* 2. 最後一筆資料 (Last Item) */
/* 強制截斷尾巴 (不往下畫) */
.jct-item.jct-is-last::after,
.jct-timeline-scope > .jct-item:last-of-type::after {
    top: -40px !important; /* 向上連接上一筆 */
    bottom: auto !important; /* 解除底部固定 */
    height: 60px !important; /* 給予固定高度 */
}

/* 特別處理：如果同時是第一筆也是最後一筆 (只有一個項目) */
.jct-item.jct-is-latest.jct-is-last::after,
.jct-timeline-scope > .jct-item:first-of-type:last-of-type::after {
    display: none !important;
}

/* ------------------------------------------------------------------
   通用元件樣式
   ------------------------------------------------------------------ */

/* 節點圓點 (預設空心) */
.jct-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff; /* 預設白底 (空心感) */
    border: 3px solid #0073aa;
    z-index: 2;
    box-shadow: 0 0 0 3px #fff; 
}

/* 最新一筆資料 (First Item) 顯示實心紅圈 */
/* 優先使用 JS 標記的 class (.jct-is-latest) */
.jct-item.jct-is-latest::before,
.jct-timeline-wrapper .jct-item:first-child::before,
.jct-timeline-scope > .jct-item:first-of-type::before {
    border-color: #d63638 !important; /* 紅框 */
    background: #d63638 !important;   /* 紅底 (實心) */
}

/* 時間文字 */
.jct-date {
    font-weight: 700;
    font-size: 0.95em;
    color: #444;
    margin-bottom: 8px !important;
    display: block;
    letter-spacing: 0.3px;
}

/* 內容卡片 */
.jct-content {
    background: #fff;
    padding: 15px 20px;
}

/* 手機版調整 */
@media (max-width: 600px) {
    .jct-status-bar {
        flex-direction: column;
        align-items: flex-start;
    }
}