.approval-timeline-container{background:#fff;border-radius:5px;padding:20px;box-shadow:0 2px 8px #00000014;border:1px solid #e9ecef;margin:16px 0}.timeline-header{margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid #f1f3f4}.timeline-header h3{font-size:1.1rem;font-weight:700;color:#2c3e50;margin:0}.timeline-content{position:relative}.timeline-item{display:flex;align-items:flex-start;position:relative;padding-bottom:20px}.timeline-item:last-child{padding-bottom:0}.timeline-item:last-child .timeline-line{display:none}.timeline-icon{flex-shrink:0;margin-right:10px;margin-top:3px;z-index:2;position:relative}.status-icon{border-radius:50%;background:#fff;border:3px solid transparent}.status-icon.approved{color:#22c55e;border-color:#22c55e;background:#f0fdf4}.status-icon.pending{color:#f59e0b;border-color:#f59e0b;background:#fffbeb}.status-icon.submitted{color:#3b82f6;border-color:#3b82f6;background:#eff6ff}.status-icon.rejected{color:#ef4444;border-color:#ef4444;background:#fef2f2}.status-icon.moved-to-pending{color:#f59e0b;border-color:#f59e0b;background:#fffbeb}.status-icon.default{color:#6b7280;border-color:#6b7280;background:#f9fafb}.timeline-line{position:absolute;left:9px;top:20px;bottom:-24px;width:2px;background:#e5e7eb;z-index:1}.timeline-details{flex:1;min-width:0}.timeline-status{margin-bottom:2px}.status-label{display:inline-block;padding:2px 10px;border-radius:20px;font-size:12px;font-weight:500;text-transform:capitalize}.status-label.approved{background:#22c55e;color:#fff}.status-label.pending{background:#f59e0b;color:#fff}.status-label.submitted{background:#3b82f6;color:#fff}.status-label.rejected{background:#ef4444;color:#fff}.status-label.moved-to-pending{background:#f59e0b;color:#fff}.status-label.default{background:#6b7280;color:#fff}.timeline-name{font-size:12px;font-weight:500;color:#1f2937;margin-bottom:2px}.timeline-datetime{font-size:12px;color:#6b7280;margin-bottom:2px}.timeline-comment{font-size:.8rem;color:#4b5563}.timeline-empty{text-align:center;padding:40px 20px;color:#9ca3af}.timeline-empty p{margin:0;font-size:1rem}@media(max-width:768px){.approval-timeline-container{padding:16px;margin:12px 0}.timeline-header h3{font-size:1.125rem}.timeline-icon{margin-right:10px}.timeline-line{left:22px}.status-icon{width:18px;height:18px}.timeline-name{font-size:.95rem}.timeline-datetime{font-size:.8rem}.timeline-comment{font-size:.8rem;padding:6px 10px}}@keyframes slideInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.timeline-item{animation:slideInUp .3s ease-out;animation-fill-mode:both}.timeline-item:nth-child(1){animation-delay:.1s}.timeline-item:nth-child(2){animation-delay:.2s}.timeline-item:nth-child(3){animation-delay:.3s}.timeline-item:nth-child(4){animation-delay:.4s}.timeline-item:nth-child(5){animation-delay:.5s}.timeline-item:hover .status-icon{transform:scale(1.1);transition:transform .2s ease}