/* Production Line Visualization */
.canal-system {
    margin: 20px 0;
    padding: 20px;
    background: #F5F5F5;
    border-radius: 8px;
    position: relative;
}

.canal-row {
    display: flex;
    align-items: center;
    margin: 15px 0;
    position: relative;
}

.canal-label {
    width: 100px;
    font-weight: 600;
    text-align: right;
    margin-right: 20px;
    color: #333;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.canal {
    flex: 1;
    height: 60px;
    background: #E0E0E0;
    border: 2px solid #BDBDBD;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
    /* Assembly line appearance */
    background-image: repeating-linear-gradient(
        90deg,
        #E0E0E0,
        #E0E0E0 10px,
        #D0D0D0 10px,
        #D0D0D0 12px
    );
}

.canal-arrow {
    font-size: 24px;
    color: #999;
    margin: 0 20px;
}

.reservoir {
    width: 60px;
    height: 60px;
    background: #1976D2;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    /* Factory icon */
}

/* Component Types */
.water {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 500;
    transition: all 0.5s ease;
    /* Component box appearance */
    border-radius: 4px;
    margin: 4px;
}

.water-label {
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    font-size: 13px;
    font-weight: 600;
}

.empty-water {
    background: transparent;
    color: #999;
    border: 2px dashed #BDBDBD;
}

.red-water {
    background: linear-gradient(135deg, #EF5350 0%, #E53935 100%);
}

.green-water {
    background: linear-gradient(135deg, #66BB6A 0%, #4CAF50 100%);
}

.blue-water {
    background: linear-gradient(135deg, #42A5F5 0%, #2196F3 100%);
}

.yellow-water {
    background: linear-gradient(135deg, #FFEE58 0%, #FDD835 100%);
}

.purple-water {
    background: linear-gradient(135deg, #AB47BC 0%, #9C27B0 100%);
}

.orange-water {
    background: linear-gradient(135deg, #FFA726 0%, #FF9800 100%);
}

.hotfix-water {
    background: linear-gradient(135deg, #F44336 0%, #D32F2F 100%);
    font-size: 12px;
}

/* Component Batch */
.water-mixture {
    display: flex;
    height: 100%;
    padding: 4px;
    gap: 4px;
}

.water-segment {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 12px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    border-radius: 4px;
    /* Component box shadow */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Contaminated State */
.canal.contaminated {
    border-color: #FF5722;
    background: #FFEBEE;
}

.contaminated .water-segment {
    position: relative;
}

.contaminated .water-segment::after {
    content: '⚠';
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 12px;
    color: rgba(255,255,255,0.9);
}

.contaminated .blue-water {
    opacity: 0.7;
    background: linear-gradient(135deg, #EF5350 0%, #E53935 100%) !important;
}

/* Animations */
.animated-flow {
    animation: flowIn 1s ease-out;
}

@keyframes flowIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.syncing {
    animation: pulse 1s ease-in-out;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Safety Recall Indicator */
.hotfix-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #F44336;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: blink 2s ease-in-out infinite;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.4);
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Branch Arrows */
.branch-arrows {
    margin: 20px 0;
    height: 300px;
    position: relative;
}

.merge-arrows {
    width: 100%;
    height: 100%;
}

/* Specific stage styles */
.dev-canal {
    border-color: #4CAF50;
    border-width: 3px;
}

.sit-canal {
    border-color: #FF9800;
    border-width: 3px;
}

.uat-canal {
    border-color: #2196F3;
    border-width: 3px;
}

.main-canal {
    border-color: #9C27B0;
    background: #F3E5F5;
    border-width: 3px;
    background-image: none;
}

/* Responsive */
/* Production line appearance */
.production-container {
    background-color: #FAFAFA;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}

/* Conveyor belt effect */
.canal::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: repeating-linear-gradient(
        90deg,
        #999,
        #999 5px,
        #666 5px,
        #666 10px
    );
}

/* Stage indicators */
.canal-row::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #666;
    border-radius: 50%;
}

@media (max-width: 768px) {
    .canal-label {
        width: 60px;
        font-size: 11px;
    }
    
    .water-segment {
        font-size: 11px;
    }
    
    .canal {
        height: 50px;
    }
}