/* ----- Base / Layout ----- */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:#fff;color:#2c3e50;}
.timeline-section{background:#d3eaf2;padding:40px 20px;border-radius:12px;margin:40px auto;max-width:1500px;}

/* ----- Typography ----- */
.title{font-size:2.5rem;font-weight:700;color:#11607f;text-align:center;margin-bottom:6px;}
.subtitle{font-size:1.05rem;font-weight:400;color:#245d72;text-align:center;margin-bottom:28px;}

/* ----- Controls ----- */
.controls-wrap{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:24px;}
.controls-wrap input{padding:12px 16px;border-radius:30px;border:none;width:320px;max-width:80%;outline:none;font-size:1rem;}
.btn{padding:12px 22px;border:none;border-radius:30px;background:#005f8f;color:#fff;font-weight:600;cursor:pointer;transition:all .3s ease;}
.btn:hover{background:#004e77;}
.btn.active{background:#003366;}
.zoom-btn{width:46px;padding:12px 0;font-size:1.2rem;}

/* ----- View Toggle ----- */
.view-toggle{display:flex;justify-content:center;gap:5px;margin:20px 0;}
.toggle-btn{padding:8px 16px;border:2px solid #005f8f;border-radius:20px;background:#fff;color:#005f8f;font-weight:600;cursor:pointer;transition:all .3s ease;}
.toggle-btn.active{background:#005f8f;color:#fff;}
.toggle-btn:hover{background:#f0f7ff;}
.toggle-btn.active:hover{background:#004e77;}

/* ----- Timeline Core - Horizontal ----- */
.timeline-wrapper{overflow:auto;padding:0 120px 16px;transition:all .3s ease;}
.timeline{position:relative;height:190px;min-width:3800px;margin:40px 0;transition:all .25s ease;}
.timeline-line{position:absolute;top:80px;left:0;right:0;height:4px;background:#555;border-radius:2px;opacity:0.3;}    
.timeline-item{position:absolute;transform:translateX(-50%);cursor:pointer;transition:all .25s ease;}
.timeline-item:hover{transform:translateX(-50%) scale(1.05);}    

/* ----- Timeline Core - Vertical ----- */
.timeline-wrapper.vertical{padding:20px;max-height:70vh;overflow-y:auto;overflow-x:hidden;display:flex;justify-content:center;}
.timeline.vertical{width:100%;min-width:auto;height:auto;min-height:1000px;position:relative;margin:20px 0;max-width:800px;}
.timeline.vertical .timeline-line{top:0;bottom:0;left:50%;width:4px;height:100%;right:auto;transform:translateX(-50%);}
.timeline.vertical .timeline-item{position:absolute;width:280px;z-index:10;transform:none;}
.timeline.vertical .timeline-item:hover{transform:scale(1.05);z-index:20;}
.timeline.vertical .timeline-item.left-side{right:calc(50% + 20px);transform-origin:right center;}
.timeline.vertical .timeline-item.right-side{left:calc(50% + 20px);transform-origin:left center;}
.timeline.vertical .timeline-item.left-side:hover{transform:scale(1.05);transform-origin:right center;}
.timeline.vertical .timeline-item.right-side:hover{transform:scale(1.05);transform-origin:left center;}
.timeline.vertical .timeline-content{position:relative;}
.timeline.vertical .timeline-content::before{
    content:'';
    position:absolute;
    top:50%;
    width:20px;
    height:2px;
    background:#555;
    transform:translateY(-50%);
}
.timeline.vertical .left-side .timeline-content::before{right:-20px;}
.timeline.vertical .right-side .timeline-content::before{left:-20px;}

/* ----- Timeline Items ----- */
.timeline-dot{width:16px;height:16px;border-radius:50%;border:4px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.15);margin:0 auto 10px;}
.timeline-content{background:#fff;padding:12px 16px;border-radius:8px;min-width:210px;box-shadow:0 4px 12px rgba(0,0,0,.15);text-align:center;}
.submission-class{font-size:1rem;font-weight:700;margin-bottom:6px;}
.submission-details{font-size:.9rem;color:#555;margin-bottom:6px;}
.date-label{font-size:.8rem;color:#888;}

/* ----- Improved Link Styling ----- */
.doc-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:8px;}
.doc-links a{
    display:inline-block;
    font-size:.75rem;
    color:#005f8f;
    text-decoration:underline;
    padding:2px 6px;
    border-radius:4px;
    transition:all 0.2s ease;
}
.doc-links a:hover{
    color:#003366;
    background-color:#f0f7ff;
    text-decoration:none;
}

/* ----- Color Coding ----- */
.labeling{background:#3498db;}.labeling .timeline-dot{background:#3498db;}.labeling .submission-class{color:#3498db;}
.efficacy{background:#27ae60;}.efficacy .timeline-dot{background:#27ae60;}.efficacy .submission-class{color:#27ae60;}
.manuf{background:#f39c12;}.manuf .timeline-dot{background:#f39c12;}.manuf .submission-class{color:#f39c12;}
.rems{background:#e74c3c;}.rems .timeline-dot{background:#e74c3c;}.rems .submission-class{color:#e74c3c;}
.type1{background:#8e44ad;}.type1 .timeline-dot{background:#8e44ad;}.type1 .submission-class{color:#8e44ad;}

/* ----- Hidden items ----- */
.timeline-item.hidden{display:none;}

/* ----- Legend & Filter Stats ----- */
.legend{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:36px;}
.legend-item{display:flex;align-items:center;gap:6px;color:#245d72;font-size:.9rem;}
.legend-dot{width:14px;height:14px;border-radius:50%;}
.legend-dot.labeling{background:#3498db;}.legend-dot.efficacy{background:#27ae60;}.legend-dot.manuf{background:#f39c12;}.legend-dot.rems{background:#e74c3c;}.legend-dot.type1{background:#8e44ad;}

.filter-stats{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:46px;}
.filter-card{
    background:rgba(255,255,255,.92);
    border-radius:10px;
    padding:18px 30px;
    text-align:center;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
    cursor:pointer;
    transition:all .3s ease;
    border:3px solid transparent;
    position:relative;
}
.filter-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.2);}
.filter-card.active{border-color:#005f8f;background:rgba(0,95,143,.05);}
.filter-card.inactive{opacity:0.5;background:#f5f5f5;color:#999;}
.filter-card.inactive .stat-number{color:#999;}

.stat-number{font-size:2rem;font-weight:700;color:#2c3e50;transition:color .3s ease;}
.stat-label{font-size:.9rem;color:#7f8c8d;margin-top:4px;transition:color .3s ease;}

/* Checkmark indicator */
.filter-card::after{
    content:'✓';
    position:absolute;
    top:8px;
    right:12px;
    font-size:1.2rem;
    color:#005f8f;
    font-weight:bold;
    opacity:0;
    transition:opacity .3s ease;
}
.filter-card.active::after{opacity:1;}

/* ----- Scrollbar ----- */
.timeline-wrapper::-webkit-scrollbar{height:8px;width:8px;}
.timeline-wrapper::-webkit-scrollbar-track{background:#dcdcdc;}
.timeline-wrapper::-webkit-scrollbar-thumb{background:#888;border-radius:4px;}

/* Responsive adjustments for vertical view */
@media (max-width: 768px) {
    .timeline.vertical .timeline-item {
        width: 220px;
    }
    .timeline.vertical .timeline-item.left-side {
        right: calc(50% + 10px);
    }
    .timeline.vertical .timeline-item.right-side {
        left: calc(50% + 10px);
    }
}