/* css/station-timetable.css */

/* ============================================================ */
/* ========== 列车时刻表看板（真实大屏版·弹性网格终极版） ========== */
/* ============================================================ */
.dash-timetable-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #050505;
    background-image: 
        radial-gradient(circle at center, rgba(20, 30, 40, 0.4) 0%, #050505 100%),
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.02) 3px);
    border: 1px solid #1a2a3a;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 0 20px rgba(0,0,0,1);
    width: 100%;
    margin-top: 12px;
}

.dash-timetable-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: rgba(10, 15, 25, 0.8);
    border-bottom: 1px solid rgba(0, 229, 255, 0.2);
    font-size: 0.85rem;
    color: #00e5ff;
    font-family: var(--font-mono);
    flex-shrink: 0;
}

.tt-count { 
    color: #8a9bb5; 
    font-size: 0.75rem; 
}
.tt-count span { 
    color: #00e5ff; 
    font-weight: bold; 
    font-size: 0.9rem; 
}

/* ============================================================ */
/* 表头及行：真正的弹性 8 列网格 */
/* ============================================================ */
.tt-header-grid, .dash-train-item {
    display: grid;
    /* 重新分配列宽：压缩始发/终到，加宽站台/检票/状态，防止长检票口折行 */
    grid-template-columns: 
        minmax(65px, 80px)  /* 车次 */
        minmax(55px, 1fr)   /* 始发 */
        minmax(55px, 1fr)   /* 终到 */
        minmax(45px, 55px)  /* 到点 */
        minmax(45px, 55px)  /* 开点 */
        minmax(35px, 42px)  /* 站台 */
        minmax(45px, 60px)  /* 检票口 */
        minmax(65px, 80px); /* 状态 */
    gap: 6px; 
    align-items: center;
    padding: 0 10px; 
    font-family: var(--font-mono);
    font-size: 0.85rem;
    box-sizing: border-box;
    text-align: center;
    width: 100%;
}

.tt-header-grid {
    height: 36px;
    background: rgba(0, 229, 255, 0.05);
    border-bottom: 1px dashed rgba(0, 229, 255, 0.2);
    font-size: 0.7rem;
    color: #8a9bb5;
    flex-shrink: 0;
}

/* ============================================================ */
/* 滚动视口 */
/* ============================================================ */
.dash-timetable-viewport {
    height: 288px; /* 6行 * 48px */
    overflow: hidden;
    position: relative;
    transition: height 0.3s ease;
}

.dash-timetable-track {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ============================================================ */
/* 单趟列车行 */
/* ============================================================ */
.dash-train-item {
    height: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: background 0.2s;
    color: #e0e6ed;
}

.dash-train-item:hover {
    background: rgba(0, 229, 255, 0.08);
}

/* 车次颜色 & 车型徽章布局 */
.tt-code {
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px; /* 徽章和文字的间距 */
}

.text-tag-K { color: #409eff; }
.text-tag-D { color: #e6a23c; }
.text-tag-Z { color: #909399; }
.text-tag-T { color: #67c23a; }
.text-tag-C { color: #f56c6c; }
.text-tag-G { color: #a855f7; }
.text-tag-N { color: #b0c4de; }

/* 车型徽章基础样式 */
.train-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: bold;
    color: #fff;
    flex-shrink: 0;
    font-family: 'Microsoft YaHei', sans-serif;
    box-shadow: 0 0 4px rgba(0,0,0,0.5);
}

/* 复兴号（红） */
.badge-fuxing { background: #e74c3c; }
/* 和谐号（蓝） */
.badge-hexie { background: #3498db; }
/* 智能动车（紫） */
.badge-zhineng { background: #8e44ad; }
/* 绿巨人（绿） */
.badge-lvjuren { background: #27ae60; }
/* 普通客车（灰） */
.badge-normal { background: #6c757d; }

/* 站名 */
.tt-station {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #a0aec0;
}

/* 时间 */
.tt-time {
    font-size: 0.9rem;
    color: #a0aec0;
    white-space: nowrap;
    text-align: center;
}

.tt-time.highlight {
    color: #00e5ff;
    font-weight: bold;
}

/* ============================================================ */
/* 站台与检票口 */
/* ============================================================ */
.tt-platform { 
    color: #00e5ff; 
    font-weight: bold; 
    text-align: center;
    white-space: nowrap;
}

.tt-gate { 
    color: #00e5ff; 
    font-weight: bold; 
    text-align: center;
    white-space: nowrap;
    font-size: 0.85rem; /* 防止 B12 等字母数字组合过大撑开 */
}

/* 状态标签 */
.tt-status-tag {
    font-size: 0.75rem;
    font-weight: bold;
    white-space: nowrap;
}

/* ============================================================ */
/* 状态动画联动 */
/* ============================================================ */

/* 1. 候车 */
.status-waiting { 
    color: #00e5ff; 
    text-shadow: 0 0 5px rgba(0,229,255,0.3); 
}

/* 2. 准备检票 (亮蓝色呼吸效果) */
.tt-status-tag.status-pre-checking {
    color: #00bfff;
    text-shadow: 0 0 8px rgba(0, 191, 255, 0.8);
    animation: blink-blue 1.5s infinite;
}

/* 3. 正在检票（黄闪） */
.tt-gate.status-checking,
.tt-status-tag.status-checking {
    color: #f1c40f;
    text-shadow: 0 0 8px rgba(241, 196, 15, 0.85);
    animation: blink-yellow 1.5s infinite;
}

/* 4. 停止检票 */
.tt-gate.status-stopped,
.tt-status-tag.status-stopped {
    color: #e74c3c;
    text-shadow: 0 0 8px rgba(231, 76, 60, 0.8);
    animation: blink-red 1s infinite;
}

/* 5. 终到 */
.status-terminal { 
    color: var(--gold, #d4a24c); 
    text-shadow: 0 0 5px rgba(212, 162, 76, 0.3); 
}

/* 6. 已发车 */
.status-departed {
    color: #6c7a89;
    text-shadow: none;
}

/* 新增：晚点状态（强提醒，橙色闪烁） */
.status-delayed { 
    color: #e6a23c !important; 
    text-shadow: 0 0 8px rgba(230, 162, 60, 0.8); 
    animation: blink-yellow 1.5s infinite;
}

/* 新增：早点状态（绿色） */
.status-early { 
    color: #67c23a !important; 
    text-shadow: 0 0 5px rgba(103, 194, 58, 0.4); 
}

/* 新增：正点状态（青色） */
.status-ontime { 
    color: #00e5ff !important; 
    text-shadow: 0 0 5px rgba(0, 229, 255, 0.3); 
}


@keyframes blink-blue {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
@keyframes blink-green {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
@keyframes blink-yellow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
@keyframes blink-red {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.tt-empty {
    text-align: center;
    color: var(--text-mute);
    padding: 30px 10px;
    font-size: 0.8rem;
}

.day-mark {
    font-size: 0.65rem;
    color: #e2b04a;
    margin-right: 2px;
}

/* ============================================================ */
/* 响应式适配（手机端优化版） */
/* ============================================================ */
@media (max-width: 768px) {
    .dash-timetable-viewport { height: 240px; }
    
    .pc-only { display: none !important; }
    .mobile-only { display: inline !important; }
    
    .tt-header-grid, .dash-train-item {
        grid-template-columns: 
            minmax(65px, 75px) /* 车次 */
            minmax(50px, 1fr)  /* 终到 */
            minmax(42px, 45px) /* 到点 */
            minmax(42px, 45px) /* 开点 */
            minmax(28px, 32px) /* 站台 */
            minmax(38px, 42px) /* 检票 */
            minmax(55px, 62px); /* 状态 */
        font-size: 0.78rem;
        padding: 0 6px;
        gap: 2px;
    }
    
    .tt-header-grid {
        font-size: 0.65rem; 
    }

    /* 隐藏始发列 */
    .tt-header-grid div:nth-child(2),
    .dash-train-item .tt-station:nth-child(2) { display: none; }
    
    .tt-status-tag { font-size: 0.7rem; }
    .tt-time { font-size: 0.8rem; }
    .tt-code { font-size: 0.9rem; }
    .tt-gate { font-size: 0.75rem; }
}

/* PC 端显示检票口 */
.pc-only { display: inline; }
.mobile-only { display: none; }

/* ============================================================ */
/* ========== 列车时刻表弹窗 ========== */
/* ============================================================ */
.train-modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 10020; opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.train-modal-overlay.visible { opacity: 1; pointer-events: auto; }
.train-modal-content {
    background: var(--bg-2, #16110c); border: 1px solid var(--gold, #d4a24c);
    border-radius: 12px; width: 90%; max-width: 400px;
    max-height: 80vh; display: flex; flex-direction: column;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    transform: translateY(20px); transition: transform 0.3s;
}
.train-modal-overlay.visible .train-modal-content { transform: translateY(0); }
.train-modal-header {
    padding: 15px; margin: 0; color: var(--gold-bright, #f0c674);
    border-bottom: 1px solid rgba(212, 162, 76, 0.2); text-align: center;
    font-size: 1.1rem; font-weight: 700;
}
.train-modal-close {
    position: absolute; top: 12px; right: 12px;
    background: none; border: none; color: #888; font-size: 1.2rem; cursor: pointer;
    transition: color 0.2s;
}
.train-modal-close:hover { color: var(--gold); }
.train-modal-body { padding: 10px; overflow-y: auto; flex: 1; }

.stops-timeline { display: flex; flex-direction: column; }
.stop-item {
    display: flex; align-items: center; padding: 10px;
    border-bottom: 1px dashed rgba(255,255,255,0.1);
}
.stop-index { width: 25px; font-size: 0.7rem; color: #888; text-align: center; }
.stop-name { flex: 1; font-size: 0.9rem; color: var(--text, #ede5d8); font-weight: 500; }
.stop-time { width: 90px; font-size: 0.75rem; text-align: right; color: #aaa; line-height: 1.3; font-family: var(--font-mono); }

/* ============================================================ */
/* ========== 大屏底部警示栏 ========== */
/* ============================================================ */
.dash-timetable-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; 
    gap: 4px 16px; 
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(0, 229, 255, 0.25);
    box-shadow: inset 0 1px 0 rgba(0, 229, 255, 0.05);
    font-size: 0.75rem;
    line-height: 1.3; 
    color: #8a9bb5;
    flex-shrink: 0;
    font-family: var(--font-mono, "SF Mono", Consolas, monospace);
    letter-spacing: 0.5px;
}

.dash-timetable-footer > div {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap; 
}

.dash-timetable-footer i {
    color: #00e5ff;
    font-size: 0.9rem;
    opacity: 0.8;
}

.dash-timetable-footer > div:nth-child(2) {
    color: #e2b04a;
}
.dash-timetable-footer > div:nth-child(2) i {
    color: #e2b04a;
}

.dash-timetable-footer .warn-text {
    color: #ff5252;
    font-weight: bold;
}
.dash-timetable-footer .warn-text i {
    color: #ff5252;
}

@media (max-width: 768px) {
    .dash-timetable-footer {
        gap: 4px 10px; 
        padding: 8px;
        font-size: 0.7rem; 
    }
}

/* ============================================================ */
/* ========== 股道信号矩阵控制台（双灯竖向版） ========== */
/* ============================================================ */
.platform-matrix-container {
    padding: 12px 16px 16px;
    background: rgba(0, 0, 0, 0.5);
    border-top: 1px dashed rgba(0, 229, 255, 0.15);
    flex-shrink: 0;
}

.matrix-title {
    font-size: 0.65rem;
    color: #5b738c;
    font-family: var(--font-mono, monospace);
    letter-spacing: 2px;
    margin-bottom: 12px;
    text-align: center;
}

.matrix-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* 调整间距，确保 18 个轨道能在一行内排下 */
    gap: 8px 10px; 
}

.track-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* 竖向双灯灯箱 */
.track-lights {
    display: flex;
    flex-direction: column;
    background: #0a0a0a;
    border: 1.5px solid #333;
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.9);
}

/* 单个灯孔 */
.track-light {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #111;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.8);
    transition: all 0.3s ease;
}

.track-num {
    font-size: 0.65rem;
    color: #8a9bb5;
    font-family: var(--font-mono, monospace);
}

/* ============================================================ */
/* 状态颜色逻辑（完美还原《技规》双灯位组合） */
/* ============================================================ */

/* 1. 空闲/闭塞 (单红：上灭，下红常亮) */
.track-node.idle .track-light:first-child {
    background: #111;
    box-shadow: none;
}
.track-node.idle .track-light:last-child {
    background: #e74c3c;
    box-shadow: 0 0 6px rgba(231, 76, 60, 0.5), inset 0 0 2px rgba(255,255,255,0.5);
}

/* 2. 候车 (单黄：上灭，下黄常亮) */
.track-node.waiting .track-light:first-child {
    background: #111;
    box-shadow: none;
}
.track-node.waiting .track-light:last-child {
    background: #f1c40f;
    box-shadow: 0 0 6px rgba(241, 196, 15, 0.4);
}

/* 3. 即将进站 (双黄：上下全黄闪烁) */
.track-node.arriving .track-light {
    background: #f1c40f;
    box-shadow: 0 0 6px rgba(241, 196, 15, 0.8), inset 0 0 2px #fff;
    animation: track-blink 1.5s infinite;
}

/* 4. 正在检票/进路开放 (绿黄：上绿下黄常亮) */
.track-node.checking .track-light:first-child {
    background: #2ecc71;
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.9), inset 0 0 2px #fff;
}
.track-node.checking .track-light:last-child {
    background: #f1c40f;
    box-shadow: 0 0 8px rgba(241, 196, 15, 0.9), inset 0 0 2px #fff;
}

/* 准备检票 (单蓝：上灭，下蓝常亮，调车/准备进路) */
.track-node.pre-checking .track-light:first-child {
    background: #111;
    box-shadow: none;
}
.track-node.pre-checking .track-light:last-child {
    background: #1e90ff;
    box-shadow: 0 0 8px rgba(30, 144, 255, 0.9), inset 0 0 2px #fff;
}

/* 5. 停止检票/准发车 (单绿：上灭，下绿常亮，出站信号) */
.track-node.stopped .track-light:first-child {
    background: #111;
    box-shadow: none;
}
.track-node.stopped .track-light:last-child {
    background: #2ecc71;
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.9), inset 0 0 2px #fff;
}

/* 6. 列车终到停稳 (单白：上灭，下白常亮) */
.track-node.terminal .track-light:first-child {
    background: #111;
    box-shadow: none;
}
.track-node.terminal .track-light:last-child {
    background: #ffffff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8), inset 0 0 2px #fff;
}

@keyframes track-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

/* ============================================================ */
/* 移动端适配：股道矩阵横向滚动，缩小尺寸 */
/* ============================================================ */
@media (max-width: 768px) {
    .platform-matrix-container {
        display: block !important;
        padding: 10px 12px 12px;
    }
    
    .matrix-title {
        font-size: 0.6rem;
        margin-bottom: 8px;
        letter-spacing: 1px;
    }
    
    .matrix-grid {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        gap: 12px !important;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .matrix-grid::-webkit-scrollbar {
        display: none;
    }
    
    .track-node {
        gap: 6px !important;
        flex-shrink: 0;
        margin: 0 2px;
    }
    
    .track-lights {
        padding: 3px !important;
        border-radius: 10px !important;
        gap: 3px !important;
    }
    
    .track-light {
        width: 6px !important;
        height: 6px !important;
    }
    
    .track-num {
        font-size: 0.55rem !important;
    }
}

/* ============================================================ */
/* 检票口 + 候车室 长文本跑马灯 */
/* ============================================================ */
.tt-gate {
    overflow: hidden;   /* 防止长文本撑破 grid 列 */
    position: relative;
}

.tt-gate .tt-gate-scroll {
    display: inline-block;
    white-space: nowrap;
    vertical-align: middle;
}

.tt-gate .tt-gate-scroll.scrolling {
    padding-left: 100%;
    animation: gate-marquee 12s linear infinite;
}

.tt-gate .tt-gate-scroll.scrolling:hover {
    animation-play-state: paused;
}

@keyframes gate-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* 移动端列太窄，不跑马灯，仅截断显示 */
@media (max-width: 768px) {
    .tt-gate .tt-gate-scroll {
        animation: none !important;
        padding-left: 0 !important;
        transform: none !important;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
}